Tartine is an iconic, California-based bakery famous for its pastries and coffee brand, Coffee Manufactory. Boasting nine locations in California and six in South Korea, Tartine was ready to streamline its approach to a digital menu system.
Lead UX/UI Designer
Figma
Contentful
Customers walk into Tartine and scan a QR code to view the menu. At the time of this project, however, every menu per location was uploaded as a PDF on the website, causing customers to have to zoom in and pan left/right to view a single menu item. Further, whenever there was a small menu change, cafe managers would have to edit a document, and re-upload the PDF.
Inconvenient and tedious, this system was overhauled with my design, which allows for customers to have a pleasant menu-selection experience and managers to easily edit menus without worrying about formatting details or the labor of uploading new documents.
These menus are very content-heavy and it's important users can easily scan and locate whatever menu items that suit them.
When a customer taps on one of the menu category buttons, the screen scrolls down to the corresponding anchor point on the screen.
Although I had initially thought that the buttons would "follow" the user down the page, so they can scroll up slightly to go back to the categories, feedback I received told me that this was not the most user friendly approach.
Pivoting away from this approach, I decided to keep the buttons static at the top of the page, and instead implement a "Back to Top" button that appears once the user has scrolls about 2.5 screen lengths down the page.
Desktop works similarly to mobile, only in lieu of buttons up top, there's a vertical navigation bar to the left that highlights actives states using a bold typeface. Users can also toggle between sections using these links.
In handing off the designs to the developers, I advised how the CMS model should respond to various elements within the menu.
Ultimately, I determined there should be three types of menus:
1) The main menu
2) The simple beverage menu
3) The simple menu (reserved exclusively for sides dishes)
Every element of a dish, from the title, description, price, and add ons would need its own input field so they're styled correctly on the front-end.
Rolling out a digital menu for each location is not as easy as pulling a switch. Each restaurant manager needs to translate all existing PDF menus into the Contentful model.
In preparing Tartine for a smooth transition, I created an SOP that covers the processes of creating a menu, how to publish changes, and making that final switch from PDF to digital.
I'm looking forward to seeing these digital menus roll out in the coming months!
