Ohh Yeahh
Responsive Design
Role
UX Researcher / UI Designer
Software
Figma
Duration
8 weeks
Project Overview
Ohh Yeahh is a new small food business based in Orange County, CA that specializes in Filipino fusion cuisine. Being a new small food business that opened up only a few months ago amidst the pandemic, they have a small customer base and are limited to growing their customer base due to only having social media as their means of advertisement and receiving orders.
Challenge
Due to being a new small food business during a pandemic, especially in an area with a lot of local competitors, and being limited in resources, Ohh Yeahh wants to rebrand themselves and create a user friendly website to grow their online presence and help advertise the business, build their customer base, and increase their sales by allowing customers to order in a safe and convenient way.
Solution
Create a user friendly responsive design that allows for food to be ordered easily and to increase sales as well as improve upon their current branding with a modern, cool, and fun logo and site design to compete with local businesses and help attract more customers.
Research
Three different methods of research were performed: competitive analysis, heuristic analysis, and remote user observation. From these methods I was able to collect information on UI patterns for successful checkout and ordering processes, organizational patterns for product and product information, and user frustrations and pain points in order to improve user experience when it comes to online food ordering.
Research Goals:
Collect information on UI patterns that competitors use during the checkout/ordering process and be able to prioritize what is necessary, what can be optional, and to what is not needed
Detect frustrations and pain points during checkout/ordering process to improve user experience
Observe how competitor sites organize their products/menu
Learn about what components lead to positive user experience during checkout/ordering process
Understand how customer navigates through website and browses items
Observe how sites (especially food sites) are styled/designed to maximize customer engagement and usability
Competitive Analysis:
Goal: Compare restaurant websites that have the option to order directly on their site and compare UI patterns used for the menu, ordering form, and checkout process.
With competitive analysis I was able to pick out the strengths and weaknesses of each restaurant page (Din Tai Fung, Everyday Eatery, and Domino’s). The data collected was mainly on the overall design of each site, content included per page, and how they organized that content. This allowed me to get a sense of what content needs to be included for a food business site and acted as base to build off since information involving the UI components needed will come from the heuristic analysis and remote user observation.
Strengths:
Fixed navigation bar when scrolling down landing page which allows CTAs to make reservations and order online always accessible
Content of images and their adjacent descriptions + CTAs take up full screen
Neutral color palette of beige, white, and black but uses a pop of red for accent color
UI and animation for Category titles on menu screen
Weaknesses:
When ordering, souvenirs & beer and wine to go categories are at the top rather than the food
Inconsistency of quick add to cart. Some items have a plus in top right corner of image and others have to be clicked on first and then added to cart
Strengths:
Upon entering landing page, automatically lists items & prices to allow you to order online
Instead of an additional page when clicking item, a pop up appears to allow you to make changes to item and add to cart
Great use of white space, nice organization of items, and aesthetically pleasing imagery
Weaknesses:
Order Now CTA isn’t visible until hovered over
Needs better use for CTAs on site
Menu is only pdf of menu rather than listing each item along with descriptions
Strengths:
Use of a tracker bar after submitting order to show if they started their order, to when it left the restaurant, to when it’s delivered
As you scroll through menu, checkout button on right side scrolls with you so it is always accessible
Weaknesses:
CTA overload “order” in a red button under each item and on every picture on the landing page. Doesn’t give the CTA as big of effect as they should
Loads slow in transition of pages
Doesn’t list price until added to cart
Heuristic Analysis:
Goal: Compare the usability and UI components of multiple sites (good and bad) by thoroughly going through all ordering and checkout processes by myself.
After figuring out the basic structure of restaurant sites from the competitive analysis research, it was time to analyze sites for their UI components and navigation with the method heuristic analysis. This method allowed me first hand to go through each site, navigate through, and walk myself through the ordering process as well as checkout. By doing each step myself, I was able to pay close attention to the details of navigation and UI components and figure out why sites were organized a specific way to optimize their flow and why each component contributes to that flow as well as the overall ordering and checkout processes.
Key Findings:
Flow is optimized when navigation bar matches flow a user may navigate through
Flow is optimized when site utilizes pop-ups rather than opening a new page and/or tab
Flow is optimized when allowing user to continue shopping from where they left off instead of starting from the top of the page
Flow is optimized if ability to make changes before confirming order
Flow is optimized when menu is organized in chronological order of meal time or by popular dishes
Most sites use a familiar checkout pattern so a user can expect what info to input
Quick Add Modal
Checkout Pattern
How Menu Items are Ordered
Confirmation of Item Added & Slide Out Cart
Remote User Observation
Goal: Get direct insight on user navigation, how a user orders food online, how they go through the checkout process, and what components creates positive user experience vs what components create confusion/frustrations.
Although I went through each site myself, due to my knowledge of UX and how it influences the way I look at sites and their designs now, it was best to get the opinions of people who go to sites to order regularly on a day to day basis. I conducted remote user observation research with 3 participants (2 female, 1 male) between the ages 20 - 28 and asked them to go through a set of 10 different sites in which they had to navigate through, complete an order, and go through the checkout process. This method allowed me to detect components and features that create positive user experience as well as what creates frustrations. I also paid close attention to how those components and features influence their navigation and decisions.
Key Findings:
If not using a format of a carousel, menu was typically in a two column layout for clear viewing/browsing
Users preferred a “quick add” feature followed by a pop up to make modifications because it led to a quicker and smoother process
During checkout, input field bar is highlighted when being used and unhighlighted/greyed out when not
Order of items and language used matters
Accordion layout was used often for Checkout pages
Less is more when presenting content because too much items will become overwhelming
Who is this product for?
By taking the key findings from the research and to make Ohh Yeahh’s target audience feel more relatable and realistic, a persona was created. This persona showcased the goals, needs, and frustrations the user may have when it came to online food ordering from restaurants. This persona was a great reference point whenever I needed a refresher of the user’s goals to keep me on the right track during the design process.
Persona
Project Goals
By creating a persona, I was able to understand the user goals of online food ordering and now wanted to align them with the business goals of Ohh Yeahh as well. By finding common ground between the two, it will help figure out which features and components will be necessary to include in order for those goals to be accomplished.
Feature Roadmap
By using the findings from the research as a basis and considering the goals of Ohh Yeahh and their customers, a feature roadmap was created. I considered all features that can be used for a restaurant business site and then prioritized them all. This allowed me to make sure to include the necessary components first and then if time allowed, add certain features later. The latter of the list can also be considered if they business ever decides to update their site in the feature.
Navigation
Seamless navigation is key to most sites because we want to make the process for users as easy as possible with limited to no frustrations. In Ohh Yeahh’s case, most users will use the site to make an order and should be able to find what they’re looking for and checkout as quick as possible. To accomplish this, a site map was created to lay out how navigation will occur throughout the site and then after we created a user flow to track the possible pathways customers will take when they make an order.
Site Map
Most sites accomplish seamless navigation and flow due to using patterns that users are already familiar with. When creating the site map for Ohh Yeahh, I looked back at the early research done because I took note of restaurants’ organizational patterns for their menus, their order pages, and their navigation bars to influence Ohh Yeahh’s design. I chose this specific flow because it was most effective to the participants. As stated from the heuristic analysis findings, flow is optimized when the navigation bar matches the flow in which a user will navigate through to complete an order. This flow will be explained in more detail through the user flow.
User Flow
Based off our site map, a user flow was created to analyze all pathways a user will take to complete an order while considering all decision points. As stated previously, we want to optimize the flow of the site and therefore considered the thinking process of users’ when going to a restaurant site to make an order. In this case, a user will appear on the landing page and if they do already know what they want to order they will click the CTA right away and if they don’t they will want to click menu which is the closest button to home. After reading the menu the user will most likely know what they want and then click the CTA. This thinking process was based off the findings from the remote user observation.
Mood Board
Once the navigation flow was created, it was time to put the theoretical scenarios into practical designs. Before doing any wireframe work, a mood board was put together to draw up inspiration for the overall design concept for Ohh Yeahh’s website. Ohh Yeahh’s business name was created from the idea that when taking a bite of their food, it will make you say “Ohh Yeahh” and want to eat more so they wanted the design to speak the same way to their customers. They wanted a design that will allow them to stand out against their local competitors and asked us to work around the words “modern, cool, and fun”. Because Ohh Yeahh’s menu was inspired by Filipino street food I thought it would be best to look at designs from food trucks since they gave off a similar vibe with both their graphics, typography, and colorography. After browsing different designs and being inspired from the colors and typography I came across, the idea of using a comic book inspired theme seemed like a different but very fitting direction.
Wireframes
Once a concept was chosen from the creation of a mood board, it was time to design the overall layout and structure for Ohh Yeahh. I started off with low fidelity wireframes sketches to start visualizing the organization, spacing, and flow of the site and then transformed those low fidelity designs into high-fidelity designs. My goal in creating these wireframes was to focus on the layout to ensure clear direction for the users when ordering and checking out. Once the desktop wireframes were completed, responsive designs were created to ensure consistent flow across all electronic devices that a customer may order from.
Medium Fidelity Designs
The designs for Ohh Yeahh was centered around highlighting who they are as a business and their products. I kept the layout simple and organized so that it was clear in where a user needed to go depending on why they came to the site (e.g. to make an order, learn more about them, store hours).
High Fidelity Designs
By using the low fidelity wireframes as the basis to the structure of the site and in addition to the mood board to guide me in a certain direction, I was able to implement the comic book concept through the typography and graphics. It was a debate whether or not to dive deeper into the comic book theme for the site or keep it simple and the latter choice was selected because I wanted to fulfill the request of making the site modern, cool, and fun but also, due to being a business, keep it professional as well which is shown through the layout and organization of the site. This direction seemed like the best option and during the process I was confident that it would turn out well.
Prototype & Testing
Usability testing was done with the high fidelity desktop designs. During this phase I can detect where in the designs needed improvement to ensure limited to no pain points of online food ordering. The task given to the participants was created to analyze navigation to the order page, how user makes an order through scroll and filters, and to ensure a smooth checkout process. The prototype was ran across 3 different participants whom had to complete one specific task. The finding from these tests will help make my final revisions to these designs.
Testing Objectives:
Identify areas of confusion and frustration within site due to design or features present
Determine level of difficulty of user to complete task
Determine average time users take to complete task
Task:
Scenario: It’s a Friday night and you are in the mood for takeout so you go on yelp and come across Ohh Yeahh and decide to order from there. You scroll through the menu and want something new.
Task: Navigate yourself to the order form and order Oosige tacos first through the “popular items” category of the order form and then using the filter chips to navigate to the combo plates section to order.
Results:
100 % Completion Rate
2 out of 3 participants completed the task smoothly by accessing all available links on prototype to get to end destination
1 out of 3 participants showed confusion of where to order by going to menu first through the navigation bar and then using CTA to get to order form
3 out of 3 participants completed task under 5 mins
3 out of 3 participants stated organization of design and clear labels made it easy for them to navigate through the site and complete task
UI Kit
After designing all the necessary screens for Ohh Yeahh’s site and to ensure consistency throughout the design of the site, a UI Kit was created with all components used. This UI Kit will make the process of making additional screens easier because other designers or myself will not have to put time into replicating the designs but instead can just access the kit to get the specific components needed.
Ohh Yeahh Closing Thoughts
At the end of the project, I was really happy with how the design for Ohh Yeahh’s small food business turned out. It was definitely out of my comfort zone to go for a more bold and fun design but I learned so much doing so. The process did include more attention to detail and having creates a responsive design a second time around, I learned more methods and skills that I didn’t get to use previously and that will help me in future projects. I think the most difficult thing was my time management. Having a two week break in middle of this project did effect my work momentum but I believe I bounced back and that the extra time used definitely shows. My favorite part of this assignment was the design portion and going with the comic book theme.