.png)
Check out the Figma prototype, or keep reading to learn about my design process
Role: UX/UI Designer, UX Researcher
Deliverables: Responsive Website Re-design (for main pages)
Timeline: 150 hours
Tools: Figma, Miro, Whimsical, Optimal Sort
The Humble Dumpling is a recently opened local restaurant. The owner created a bare bones website for the time being, but wanted a responsive site that conveys the brand identity and allows potential customers to find them. The owner wanted to stick with his current site platform: Wix, but was open to utilizing a custom platform in the future.
• Insights into customer needs and competitor strategies
• Minimum viable product site redesign for desktop and mobile breakpoints
To find a client I went into local businesses to pitch myself. With The Humble Dumpling, I spoke directly to the founder and owner and he ended up being my project stakeholder.
My proposition to the client before conducting any research or formal UX processes, was to create a website that conveyed brand identity consistently, in a way that was inviting and enticing, functional, and informative.
I started out by looking at lots of local restaurant websites as well as more established restaurants to gain an idea of visual design trends in this industry. I also wanted to know the content that other restaurants were including.
As a restaurant website frequenter myself, I went into research with some suppositions: I prefer to order directly from the website to support the business when I can, I want to look at the menu to ensure I’m seeing the most up-to-date offerings and pricing, and if I’m dining in, maybe some information about the premises.
“While consumers are anxious to get back out there to eat, they come with new expectations on everything from menus to the technology used to increase safety. Execution will play a pivotal role in building customer trust and ensuring todays diners remain loyal.” - Simon de Montfort Walker, Sr. VP/G, Oracle Food and Beverage.
• Show don’t tell - the most effective sites provided high quality, professional imagery. Images in the menu was great too.
• Strong hierarchy - the most effective websites made viewing the menu, ordering online, and check the hours and locations highly accessible.
• Personalization - Google maps integration so one can easily map the route was very nice. Additionally, providing me with a lot of ordering options: GrubHub, DoorDash, UberEats, online ordering.
I had already looked through the client's website briefly, but it was time to perform a full site audit. The client and I decided the MVP should consist of updated versions of his existing pages before scaling up the design.
Here is his original homepage. I want to draw focus here to aesthetic.
We can see, the client has liberally used their brand colors throughout this design. They're linking users to platforms in which they can place an order near the top of the page (UberEats, GrubHub, and DoorDash).
The logo head is a big part of the client's brand identity. I like the way the shadowing around the ovular element is reminiscent of a plate, relevant for his product.
One of the first things I noticed about this site, is the heaviness and size of the fonts and the swaths of color. He's got such a clear personality in his logo, I really didn't think the current site aesthetic matched the logo at all.
His site structure was very simple containing only the homepage, the menu, and a contact page.
This is the version of the menu he had on the site when I started working on this project (obviously his offerings change quite regularly).
I don't think there's anything wrong with the way he has this structured, but it did take me a minute to understand the pricing structure.
(The menu was a challenge point through the design process, and the client later mentioned to me that he planned on expanding his offerings beyond dumplings in the near future so my final design ensures the menu and pricing information is scalable and versatile for new items that don't fall into his current pricing structure.
Simple contact form. He again has the motif of the white oval/circle, which is reminiscent of a plate. Not much to comment on in regards to the content here as it's a simple contact form, but my same notes regarding typography apply. Especially true in regards to header text.
I knew I wanted to preserve the client's playful copy, extend the logo's vibe through the whole site, and retain his use of organic shapes and graphic strokes in my redesign of the site.
After my initial research, I conducted user interviews. The criteria was wide - we’ve all eaten at restaurants! Due to the pandemic, I conducted the interviews over Zoom. I talked to two Portlanders, and two non-Portlanders.
Learn what other touch points for interaction with a restaurant 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:
The Humble Dumpling wants to attract both these customers. And they want to make sure they're putting out the right kind of information to attract both. Through interviews we've got inside the minds of the customers, and from here we'll be designing to cater to both Alicia and Enzo's needs as best we can.
THINKS
FEELS
SAYS
DOES
Using my feature priority matrix and the results of the card sort, I mapped out my preliminary site architecture. Due to the simplicity of the product, some items appear in multiple locations where the user might need them: e.g. hours & locations.
The user flows are based off the main tasks Enzo and Alicia would like to complete if they were engaging with The Humble Dumpling's restaurant website.
To create the task flow, I returned to our success metric: we want to introduce the restaurant to the world, convey the brand identity and provide up-to-date information about the operations. (The client also told me he is planning on expanding to online ordering in the near future, but that wouldn't be the success metric for this MVP) We want to encourage users to engage with the site in ways that fulfill that metric.
.png)
.png)
I kept my wireframes low-fidelity, I didn't want to sink too much work into getting these pixel perfect before hearing the client's thoughts.
In order to start designing the screens, I did a quick sketch sprint, where I generated as many ideas and variants in 20 minutes or so. I chose a few viable options to annotate and expand upon digitally.
I decided to design out two variations of the landing page: one emphasizing ordering and operations updates with a more visually conventional style (center alignments, etc); versus a content heavier version that was less focused on up-to-date information, and more focus on showcasing the products themselves.
Additionally, I designed two versions of the menu: one containing each item as a card that would flip to reveal information about the product when hovered upon, as well as simpler itemized list. Although the client really liked the menu cards, he was skeptical about the feasibility of implementing the features involved on Wix.
Based on the constraints and assets the client gave me, I put together some style times which I presented the client. The client provided the name, logo, and brand colors. He stressed to me, that he didn't want to dilute the brand identity/colors by using tonal variants. I had to be careful while designing – using red in designs can be very tricky, and may convey a misleading message when not applied in high priority/emergency contexts.
The original site had quite heavy heading fonts, and I wanted to bring the typography more in-line with the friendly, approachable vibe his logo gave off.
.png)
We decided on the simpler menu for the time being. It was time to start adding color to the project.
From sketches to wireframes, consulting with the client, and adjusting ideas; I finally had a prototype. Here I've outlined some key frames along with some notes on my design reasoning.
I drastically dialed back the usage of the brand colors (from the original site). The client was adamant about preserving the brand colors (he requested no tonal variants).
The "order now" CTA is front and center, and users are still able to quickly access third party ordering options.
I retained the client's original use of organic shapes, and added a messy orange stroke around the hero image to convey the casual, friendly, vibe.
This is the second version of the menu (changes implemented from usability test findings). I added hand drawn dumpling profiles to this page which continue the sketch-like aesthetic from the homepage.
Those with dietary needs expressed deep appreciation for menu filtering and clear callouts of special diet items, so I made items easier to sort and filter by user needs.
The content structuring is simple, which the client wanted in order to ensure technical feasiblity.
Lots of people check out restaurants on their phone or other mobile devices, so it was important that the site was optimized for these device users while retaining the same vibe and usability of the desktop site.
The design stayed largely the same as the desktop site, with small adjustments and design pattern swap outs to ensure optimal usability for the smaller device size.
I drafted a usability plan, and recruited participants for the usability test. This process was quite quick, as the industry is so common, participants were all easily potential customers -- the desired user base.
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 this question wasn't getting at the intended action: I wanted to see how users would look for specific information. This question was worded too specific in that it's 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 aspect to the question
All 4 participants had trouble with the pricing guide in the menu. Whether it was having to navigate back and forth between the menu items and the guide, or understanding the color coding and different pricing structures.
All participants stated that their inclination would not be to pair the FAQ and About tabs; a few 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, or warning them, and 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 segmenting by minor UI changes / larger UX changes. I've documented the biggest changes: 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 design decisions which would accommodate scaling better than the previous model.
.png)
Near the end of the project, the client informed me that he had signed on with an agency to manage their social media and marketing presence, and let me know he would be submitting my designs to them. Shortly after, business got pretty crazy, so any more design fine-tuning and iterating was put on hold for the time being.
Once I finished up the second version of the prototypes, I sent him the new prototypes, a written update, and created an 8 page style guide that I also sent him. This is so that in the event he wants to move forward with my design, and needs to generate additional pages he can ensure the design remains consistent.
I also sent him all my research findings along the way.
Although the product and scope wasn't anything out of the ordinary, it was my first experience working for, and coordinating with a stakeholder of an existing business. Designing within the constraints of existing aesthetics, and identity proved a new challenge for me.
Communication is everything, and setting clear expectations and timelines makes all the difference. On the other hand, it's important to be prepared for delays and unexpected issues to arise, because they 100% will.
.png){kind=small}
.png)
