Restaurant Menu Layout on Desktop Devices
Lead Designer and Front-End Developer
Visual Design, User Testing, HTML/SCSS
As a desktop user, I want the process of building up an order and checking out to be simple and fast.
When the design team performed a UX audit on the Yumbi food ordering platform, we identified several areas on the desktop version of the restaurant menu page that we felt could use some improvement. The most notable being that there was no way to view your order summary and no obvious way to proceed to checkout. We also observed that the styles between the landing page and subsequent restaurant menu page were not consistent. This led to a jarring transition from restaurant store selection to restaurant menu.
Identifying Areas for Improvement
First we needed to define the elements on the page that would need to be addressed in the re-design of this page. We identified the following problem areas:
- Logo and promotional banner are squashed
- Checkout button needs more emphasis
- Introduce an order summary
- Update the page to be more inline with the layout and styles of the landing page
User Testing the Design
In Figma and using our design system I got to work on exploring options for a new layout. The main focus of this re-design was to introduce the order summary component and visible checkout button. After many iterations of the design, the design team was evenly split between the placement of the checkout button. This seemed like a good time to introduce some user testing!
I prepared two prototypes in Figma and turned to Maze for our user testing. Our goal was to determine the time it took for a user to select a menu item and proceed to checkout. We knew that the less time it took, the better for the user.
We didn’t expect such a considerable difference between the average durations. The results pointed to a clear preference:
My colleague summed it up well:
10 seconds is a life time for such a small difference. Very interesting.
As both a UI designer and UI developer, I often have the opportunity to implement my own design solutions. I started this stage of the process by writing a spec document in Quip outlining the design and development changes that we would be making. As we don’t use any css frameworks, I implemented custom HTML components and SCSS for the page in Vue, the JS framework we use for this app. I collaborated with the development team to ensure alignment to the product vision.
We expected that there would be a higher conversion rate at checkout on desktop as we know that the users who proceed to checkout have already confirmed their cart. We confirmed this using google analytics.
Before 15.6% conversion
After 17% conversion