Project Overview
-
The Problem
Users were looking for a place to order quality food and drinks so that they could spend more free time relaxing and less on cooking.
-
The Goal
Design a responsive website where users can easily browse and order menu items from a gastropub.
-
The Product
Gastropup is a responsive website that allows users to order food and drinks online. Users can view Gastropup’s website using a mobile or desktop sized screen. Gastropup aims to provide a quick and pain-free ordering experience so users can spend their precious free time relaxing on their own or with loved ones.
-
My Role
UX designer building the responsive website user interface from conception to delivery.
-
My Responsibilities
Conducted user interviews, brainstormed, created paper and digital wireframes, designed low and high fidelity prototypes, conducted usability studies, accounted for accessibility, and iterated on designs for mobile and desktop screen sizes.
-
Project Duration
November 2021 to March 2022
Understanding the User
I conducted interviews and created empathy maps in order to better understand my user and what needs should be addressed. A user group was identified of young professionals who found cooking dinner after a long workday exhausting and stressful and ordered take out at least once a week. Some restaurant websites had an overwhelming amount of menu options and lacked photos or details of menu items. This led to added stress and disappointment after a long work day.
User Pain Points
Details
Menu items lacked ingredients, photos, or details on what was included, causing confusion and disappointment for users.
Excess
Restaurant websites displayed their long list of menu items on multiple pages, leading to stress and decision fatigue.
Navigation
Restaurant websites directed users to a separate website to order online or view the menu, making navigation overly complicated for users.
Persona and Problem Statement
Sasha is a writer in their late 20s who needs a place to order quality food and drinks during the week because they want to spend their free time relaxing with their spouse rather than cooking at home.
User Journey Map
Mapping out Sasha’s journey map validated the benefit of having a florist app with ordering support and tracking for users.
Starting the Design
Sitemap
Complicated navigation was a pain point for users, so I used that feedback to build a sitemap.
My goal was to make information architecture decisions that would support a simple and cohesive navigation experience.
Paper Wireframes
I sketched out paper wireframes for each screen in the main user flow, keeping in mind user pain points about details, excess, and navigation.
To the right are variations of home screen wireframes.
Screen Size Variations
Taking into account the various screen sizes users use to access the site, I began to iterate on smaller screen size wireframe designs.
Digital Wireframes
Continuing to iterate on wireframes, I built a digital wireframe for the desktop of the homepage, including a toolbar for easy access, a hero image, and an order button.
From there I created wireframes for tablet and mobile screen sizes.
Usability Study Findings
I conducted a moderated usability study with 5 participants using a low-fidelity prototype.
Cart
Users weren’t to access the cart on desktop or mobile screens
Navigation
Restaurant websites directed users to a separate website to order online or view the menu, making navigation overly complicated for users.
Refining the Design
Mockups
Based on user feedback, the about and location pages were removed from the toolbar, and the about section was added to the homepage.
Users wanted more details about menu items in the order flow, so adjustments were made during the iteration phase.
Accessibility Considerations
-
I used photos and icons to help all users better understand the designs.
-
Included captions for screen readers and added context in navigation and descriptions.
-
I used visual hierarchy for easier skimming.
Refined Designs
High-Fidelity Prototype
The final high-fidelity prototype followed the original user flow from the low-fidelity prototype, with adjustments and additions based on user feedback.
Going Forward
Takeaways
Impact
Users shared that they found the layout and designs on all screen sizes intuitive and easy to use. Users appreciated having photos and descriptions of menu items.
Quote from user feedback:
“It was so easy to order. I liked that the mobile and desktop had the same layout. It was easy to find things.”
What I learned
I learned that a simple design can be a great design. When designing for users, the focus is on function and ease. After that is achieved, then some fun and color can be added.
Next Steps
Conduct another round of usability studies to ensure edits and additions made effectively address user needs and pain points.
Conduct user research and iterate on designs as user needs change or are newly discovered.