QR Cafe

Designing mobile restaurant menus for a socially distanced dining

Role

UX/UI Designer

Timeline

Nov - Dec 2020

Light and dark theme UI for QR cafe shown on a mobile device
Overview

A Baltic start-up offers restaurant customers a tool for browsing the menu and placing orders via their mobile devices. They secured the initial funding and received interest from many local venues, so invited me to design the priority screens they could show to prospective clients.

Challenge

Since Covid-19 pandemic, many restaurants saw the need to minimise physical contact between their customers and staff. Streamlining the ordering process also allows restaurants to ensure higher accuracy, save time and money and, if done right, provide a better customer experience.

While socially distanced dining was embraced by many customers, it goes against the tradition of discussing the options and asking the waiter for advice in choosing, which is extremely prevalent in Eastern Europe. The alternative digital experience that forgoes human contact needs to be simple, efficient, and enjoyable.

My role

As a UX / UI designer, I worked closely with the start-up founder and the development team to bring their product vision to life. Since the start-up was in its very early days, the task for this commission was to visualise the existing ideas to grow and attract additional funding. User research and usability testing were therefore not in scope until later stages.

Process
Task flow

After the initial briefing call with the project team, I created a task flow for the priority journey that the MVP was focussed on. It is predominantly a linear journey from reviewing the menu to placing the order, with multiple options to filter to content and go back and forth to add more items. Note, there is no payment step since all financial transactions are handled in person.

Task flow for the priority user journey of browsing the menu, selecting products and placing an order.

Wireframes

Once we agreed on the priority task flow, I created multiple wireframes variations to explore how product categories and individual items could be displayed in the interface. This included accordions, card lists and grids, tabs, modal and other UX solutions.

Three wireframe variations for the main menu page. Left: accordion; center: card grid; right: tabs.

Two wireframe variations for the item view. Left: row of cards with horizontal scrolling inside an accordion; right: a more traditional card list.

Three wireframe variations showing an expanded item card with more details.

After three rounds of iterations, we settled on the final wireflow that consisted of only two pages. It resolves most actions by expanding and contracting cards to show additional information.

Final flow consisting of two pages resolves most actions by expanding and contracting cards to show additional information.

UI design

I worked on the two conceptual directions for the interface design. The first one is a classical dark theme associated with luxury and elegance and aimed at fine dining establishments. The second theme has a modern look using bright colours and rounded shapes and typography to appeal to more casual venues.

Two conceptual directions for the app UI.

The client selected the first style for their MVP, which I applied to all screens in the key user journey. I created an alternative light version of this theme to give restaurants more choice in how their menu is presented.

Three screens from the main flow rendered in the dark theme Two screens from the main flow rendered in the light theme