“Vietnamese food with a modern twist”
Role
UX/UI Designer
Team
Shawn Berg (solo)
Duration
4 Weeks
Problem:
Solution:
The current website for Soup Shop contains design inconsistencies and has improperly functioning features, leading to potential missed sales and client satisfaction
A website that is organized, has design consistency and fixes the previous technical errors allowing the user to confidently navigate the web pages
The current experience
After evaluating the website in its current state, several heuristic violations were identified. Lower-severity issues were related to user satisfaction and visibility, while the most severe violation related to error handling
High priority concerns
Clicking on “menu” text on the header - lands on “visit us” page
Clicking on “view our menu” - lands on “visit us” page
Order online button found on the “visit us” page
Clicking it only refreshes the page and does not lead the user to the ordering screen
If users cannot order online or view the menu, there will be a likely drop in potential sales and revenue for the business
Medium - low priority concerns
Text sizing inconsistencies have an effect on visual hierarchy, For example:
The closing time text is sized larger than the location text, placing emphasis on it versus the location
Spacing between correlated pictures and text are inconsistent throughout the website, which leads to visual inconsistency
Visual accessibility issues, For example:
The red font on top of the photo background (home page) might not have enough contrast for those with vision problems
Because there is incorrect navigation and improperly functioning features, the assumption is that this will lead to increased website abandonment rates, ultimately leading to lost conversions and reduced potential sales
After speaking to multiple individuals, I found that users generally have consistent expectations of what a restaurant website needs
Users said they use restaurant websites for these reasons
To view the menu
Check locations
Check store hours
Users said they expect to find this information on a restaurant website
Pictures of the food
Information about the restaurant roots and history
Online ordering and contact information
Current design
Re-design
Images below are before user testing (Final design featured in prototype)
The original landing page uses a nice visual of the food and the call to action buttons, such as “View menu” and “Order online” help grab the users attention and informs them on actions they can take, however there are a few flaws found that can be addressed
The locations being written on the landing page is not warm and welcoming to new users
Information overload with text spread out through the page can lead to users feeling overwhelmed
The contrast on the text may be hard to read and harsh on the eyes for some users
Text hierarchy and spacing is inconsistent. For example, the hours under each location is in larger text compared to the location text sizing
When it came to the original site’s menu, the images were the highlight of this page, however there were a few ways the design could be improved
The text of the dishes could be bigger and bolder, so the user knows what the dish is
Images could be separated into different categories to establish relevance
Descriptions of the dish could help users understand what the dish is
The original design doesn’t necessarily contain incorrect information, but the page has a lot going on, leaving users feeling overwhelmed for a couple reasons
The maps have a lot going on within them, making it distracting to look at
The written address is much smaller than the map, making it less of a focal point
Menu
Locations
The new design is focusing on a more minimal approach by cleaning up the landing page of scattered text. I did so, by focusing on a few key areas
Keep the Call to action buttons on the homepage like the original design, but keep them a consistent size and placing the order now button on the header so it will be available at any time on the uses journey through the website
Created a welcoming landing page by utilizing the original writing from the original “About us” section, but using the restaurant catch phrase. The focus on the text was to have different sizing to show relevancy to the neighboring text, as well as to introduce some contrast
The header was re-arranged in a way that made the “menu” the center piece and removed “food” because menu and food would fall under the same category. I also included a home button as well, to have a clear path to return to the home page
(original concept, final version shown in User testing section)
The new designs focus is to give the user more information in a clear and simple approach. This was done by
Including a side navigation menu to help navigate through the different menu pages
Including a brief description of each item, along with the price
An image relevant to what the page will be focused on
(Sample images used as placeholders until business takes more photos)
The new design for this page was intended to remove the maps and come with a more simple and effective approach. Some of the new design ideas implemented were
Include front image of restaurant as a visual to let users know which location they’ll be visiting
Address and Hours text are in red as a visual aid to find relevant information quickly
Order now button provided on each location slot to provide an easy way to order from the specific location
Test findings
Test results confirmed that users were now able to
Navigate to the correct pages through the corresponding links
Find locations and relevant information correlated to the restaurant location
Able to navigate to the menu and place order successfully through the online order button
What was found
Users stated they rely on pictures to help them decide what to order. Not having pictures makes their decision harder
Users noticed a lack of a popular dishes section. Users stated they feel overwhelmed when there are too many menu items and can’t decide what dish will taste good
How it was fixed
Pictures of each dish were added with a description of the dish
A symbol was added to highlight what the popular dishes are
Provide more photos to use for the menu, home, about, and locations pages. Users value imagery to help them decide if they’d like the food and what they would order
Provide the writing needed for pages such as about and menu item description. Users have confidence in ordering from an experienced business
Have the 3rd party delivery services linked to the order now button
What I learned
Users generally use restaurant websites to view menu and locations. From my research, the users rely much more on imagery in the menu than I anticipated, so having specific images to each dish would give them more confidence when deciding what to order
Having an about me section to highlight the business’ story gives users confidence when ordering because they trust that the quality of food will be high