Timeframe:
150 hours
Role:
UX Designer, UI Designer, UX Researcher
Tools:
Figma, Optimal Workshop, Miro, Whimsical
Deliverables:
Responsive website re-design (for main pages)
I worked with the founder/owner as my stakeholder. The owner felt the current website was "good enough" but misaligned with his brand identity and values. As a new restaurant, they were focused on getting the word out that they were open for business.
Re-imagine the website in alignment with our brand, provide relevant information, and inspire interest from potential customers?
I performed a full site audit to understand the existing branding and content. The client and I decided the MVP should consist of updated versions of existing pages before scaling and expanding on the design.
Learn what other touch points for interaction users value (e.g. Yelp, GrubHub, etc)
Gain insight into how users interact with restaurant websites - loyal customers checking for info, or new customers aiming to discover?
Understand how customers interact with restaurants, and if it affect their willingness to try a restaurant? (E.g. dine-in, order in, etc).
All participants considered proximity one of the most important factors - both when ordering at home, and when traveling.
All participants dismissed reviews due to bias, but highly valued overall restaurant rating (volume of ratings not as important)
All participants said an online menu was very important. 3 out of 6 participants cited dietary restrictions as a motive.
All participants reported a higher rating standard when choosing for themselves vs choosing with a group.
All participants normally chose to opt for old favorites rather than try new restaurants when ordering for themselves.
For 4 out of 6 participants, price point was really important. Esp. since the pandemic, and esp. for takeout/delivery
I compiled my research findings by behavior and motivations into two groups: the convenience consumer, and the picky eater. Meet our customers:
I mapped out my preliminary site architecture using a priority matrix along with the card sort results. Due to the product simplicity, some items appear in multiple locations where the user might look for them: e.g. hours & locations.
.png)
I put together two style tiles based on the constraints and assets I presented the client. He stressed that he didn't want to dilute the brand identity/colors by using tonal variants. I had to be careful designing with red as it may mislead users to adopt a false sense of emergency or urgency.
I wanted to use a lighter typography more in-line with the friendly, approachable vibe of his logo.
I kept my wireframes low-fidelity, I didn't want to sink time into getting mockups pixel perfect before getting stakeholder buy-in. We decided on the simpler menu for the time being.
.png)
From sketches to wireframes, consulting with the client, and adjusting ideas; I finally had a prototype. I've outlined some key frames along with some notes on my design decisions.
I ran into challenges designing the menu guide and due to time constraints; I tested with a stop-gap design solution. I crafted questions geared towards extracting insight into how users expected information to be laid out, as well as their impressions of the pricing structure as a whole.
I drafted a plan, and recruited participants for moderated usability tests which I conducted via Zoom.
User navigates to the site from a Google Search. First impressions of the homepage and brand
"You're a vegetarian, and you want to check the menu to ensure they'll have options for you."
Dumpling week is in February, check if The Humble Dumpling will have any promos, to celebrate the occasion."***
You’re out with friends, and need food. Pull up the mobile menu and show your friends options based on diet needs.
***
During the first test, I realized that we weren't fulfilling the intended need: I needed to know how users search for specific info. This question was worded too specifically: only relevant for a short period of time.
I adjusted the question to request the user find out if they could purchase gift cards in later tests. This adjustment removes the time-specific element.
All 4 participants had trouble with the pricing guide in the menu. Issues: navigating between the menu items and the guide and understanding the color coding and pricing structures.
All participants stated that their inclination wouldn't be to pair the FAQ and About tabs and a few users expected the latter to be important enough to be listed in the main navigation.
3 out of 4 participants expressed a desire for less or no red used in the design. They felt that it was yelling at them, warning them, or that it was alarming.
All 4 participants wished the hero copy expressed the exact nature of the product -- because it isn’t traditional, they made an assumption (correctly) that it was fusion.
2 out of 4 participants felt that the menu item descriptions were too wordy. They didn’t want to read all the descriptions, and rather just wanted information about the ingredients of each item.
I prioritized revisions by segmenting minor UI changes and larger UX changes. I've documented the most significant adjustments in the below document: the largest change being the menu formatting. To eschew the confusion I decided to spell out all pricing and qualities explicitly.
After V2, the client mentioned plans to expand beyond dumplings to include additional culinary options. This validated my menu design decisions which would accommodate scaling better than the previous model.
Near the end of the project, the client informed me that he had signed on with an agency to manage his social media and marketing presence and that he would be submitting my designs to them.
Once I finished up the second version of the MVP I sent him the prototypes, a written update, and an 8 page style guide. In the event he wants to move forward with my design and needs to generate additional pages he can ensure the design remains consistent.
Although the product and scope wasn't anything out of the ordinary, it was my first experience working for, and coordinating with a small business owner with an existing business. Designing within the constraints of existing branding and business constraints proved a new challenge for me.
Communication is everything: setting clear expectations and timelines makes all the difference. On the contrary one must be prepared for delays and unexpected issues to arise as well, because they 100% will.
.png){kind=small}
.png)
