Sarah
Matt
WANDA + SAL'S
UI/UX • Research • Branding • Wireframe • Prototype
I started this project to dip my toes into UI/UX design. I selected a prompt for a mobile application that would allow users to view a menu for a bakery. Having little experience using such an app, this would be a fantastic learning and research opportunity.
I wanted to create an app that would fulfill the needs of various users, primarily those who often use similar apps and those who are not technologically inclined. Through research, I learned what users want from such an app, what leads to frustration, and what would motivate them to use this one.
Background
The Problem
There are an abundance of apps for restaurants, cafes, and bakeries that don’t always take into account people's technological proficiency or unique needs. Physical menus are already overwhelming having almost an endless offering of products, and oftentimes do not include images with the food descriptions. Mobile menu applications are often bogged down by clunky interfaces and an over-saturation of offerings. Because there are so many, businesses try to innovate and stand out which can often lead to confusion and frustration as they try to attract users with their aesthetics instead of focusing on what the user needs.
The Goal
Create a menu viewing app that is easy to use and navigate regardless of the technological proficiency of the user.
Content
Research
Competition
User research
Define
User Groups
Personas
Ideation
Flow Chart
User Journey Flow chart
Lofi Wireframe
Branding
Interactive Prototype
The Design
Usability Testing
Prompts
Summary
RESEARCH
The Competition
I explored various apps from small businesses and large businesses that offered similar products. The businesses I looked at were Dunkin, Krispy Kreme, Crumbl, Great American Cookie (GAC), Sweet Hut, and Cinnabon.
Of the businesses I explored, Great American Cookie, Cinnabon, Crumbl, and Krispy Kreme were more niche offering a specific product whereas Dunkin and Sweet Hut had a larger variety of products.
Dunkin is one of the most popular coffee chains in the United States offering donuts, breakfast goods, coffee, and various beverages.
Krispy Kreme sells a variety of donuts. Their unique draw is that they will turn on a "hot now" sign at the physical locations to notify customers when the doughnuts are freshly made and hot.
Crumbl is quite unique in that they have a weekly rotating menu offering only six cookie flavors each week. They are a newer business but have managed to make a quick impact.
Great American Cookie specializes in cookie cakes, but they also sell individual cookies.
Sweet Hut is an Atlanta area-based bakery. They offer Asian-inspired baked goods like sweet buns and savory bread, as well as typical baked goods, coffee, slushed drinks, and milk teas.
Cinnabon specializes in cinnamon rolls. They entice customers with their sticky and sweet icing. Recently they have begun to branch off of their original offerings and now sell beverages.
I conducted a competitive audit to compare these brands mobile apps to see where they shines, where they created pain points, and to see the various features and offerings.
STRENGTHS
-
Branding: Each brand was relatively consistent with their visuals and branding, with Crumbl standing out for a very simplified interface. Because they have a rotating menu of six items, they have room to focus on a clean and easily navigable app. Dunkin also had a very clean interface, but with having so many products, its easy to get overwhelmed by the offerings.
-
Rewards: Each brand had rewards programs to incentivize users to continue using their apps. They were all pretty straightforward in design often utilizing a visual indicator to show a user's progression to a reward.
WEAKNESSES
-
Menu: Several apps have multiple steps before you can view a menu. Crumbl, for example, requires you to sign up before viewing anything in the app. There is often no way to view the menu without the "intention" of placing an order. Location services are then required to continue forward.
-
Accessibility: Several apps prioritize looking nice over having text and icons that are easy to see and interact with.
-
Usability: Several of these apps are severely underdeveloped. Cinnabon, for example, seems to bounce around between the mobile app interface and using the website interface. It feels like these apps were created simply to have a place in the market.
GAPS
-
Every app works, but Cinnabon, Sweet Hut, and GAC could stand to put more time into developing their apps into better and cleaner user experiences.
OPPORTUNITIES
-
Allow users to view menus without signing up or requiring location services.
-
Offer accessibility options
Competitive Audit Data Summary:
-
Most offered a rewards program to incentivize people to return.
-
The best apps were by the more popular and long-running and lucrative businesses.
-
More often than not, the “ordering” menu was the menu on the app.
-
They didn’t all have a way to simply view the products.
-
It’s not easy to find allergen information.
-
Gift options were more prevalent than I would have thought.
-
Some apps give the option to view or order as a guest.
User Research
Goals
-
Identify any pain points that users have experienced with similar apps.
-
What would a user find the most useful in an app like this (descriptions, pricing)?
-
How might a user use this app to fulfill their needs or goals?
-
Why would a user want to use this app?
Method
To find a willing group of people to participate in my interviews, I reached out to various contacts who then reached out to their contacts. I had everyone join a Discord server where I gave an overview of what I was working on, and what I would be doing, along with a preview of the questions I would be asking. The people who were able to participate are located in various time zones so I created a Google document where they could easily record their answers.
Four people out of ten committed to the interview process. The people who participated came from various backgrounds, and they have various technological proficiency.
I asked my participants the following questions:
-
Could you describe your experience using an app to view a menu for a restaurant or specialty food service location?
-
How often do you use similar apps?
-
What were some frustrations you encountered when using similar apps/specific apps?
-
What did you hope to accomplish by using the app/similar apps?
-
What would motivate you to use the app again or a similar app?
-
What was a feature that you found especially helpful or unique?
-
Is there anything else you would like to mention that might be helpful?
Summary of Answers Given
Frustrations using similar apps:
-
Difficult to navigate
-
Too many steps to view the menu
-
Price not always displayed
-
Ordering done through third party
-
Often have to login or type in address to view menu
Motivation to use similar apps:
-
Browse out of boredom
-
To order something specific
-
Rewards
-
Avoid interacting with people (social anxiety)
-
To see menu before visiting location
Motivation for continued use:
-
Rewards and membership benefits
-
Ease of use and navigation
-
Familiarity from having used it before
-
Easy to understand and limits interaction with people
Features Users Found Useful:
-
Detailed photos that accompanied the the product descriptions
-
When everything was organized and labeld
-
Streamlined checkout process where the user could see what they ordered, the final cost, and the wait time for the order
Overview
-
Users like to occasionally browse out of boredom and don’t want to log in to do so.
-
Pictures are important because “we eat with our eyes first”.
-
Occasionally users want to simply view the menu before going to the location.
-
Users like to be incentivized with rewards programs.
-
Users find ease and speed of use to be important.
-
User like when apps are straight forward, labeled, and organized.
-
Users want to order through an app to avoid having to talk to people due to anxiety.
-
Users want to easily see what they selected to order, see the price, and when they need to pick it up.
-
Users take issue when ordering is done through a third party (ex. Doordash, Uber Eats).
In summary:
Most users specified how important it is that an app is easy to navigate. They don’t want to dig around for features or information, and they don’t like having to jump through hoops just to view a menu. They don't like nonsense. They want to be able to place an order, see the cost, and see how long until it can be delivered or picked up. They want everything to be streamlined and simple.
I was surprised to learn how incentives like a rewards program had so much influence over a user's potential to use a particular restaurants/cafe’s app. I was also fascinated to realize how important mobile ordering is for people who experience social anxiety. What is a simple task for some, going to a counter and ordering something, is anxiety-inducing for others. Having these apps to limit that potential stressor is something that needs to be taken into account.
DEFINE
The Users
After my research and interviews, I developed two user groups that I feel represent two important user bases for this product. I then created two personas based on these user groups.
Group One
-
Frequents similar establishments and often use similar products
-
Expects quick service
-
Technically inclined and can easily navigate but needs to be able to use the app quickly
-
Needs to frequently place large orders for multiple people
-
Dietary restrictions to be visible as they order for multiple people with various needs
Group Two
-
Relies on visual indicators over words
-
Relies on intuitive, easy navigation
-
Does not use similar applications on a daily basis
-
Images need to tell more than product descriptions
-
Needs to have prices immediately available when viewing a menu, not hidden behind the product page as they are not frequent visitors and will not “already know”
IDEATION
.png)
In considering my two personas, I needed to ensure and prioritize the simplicity of the navigation to appeal to both. I created an app navigation flow chart to illustrate the navigation experience.
Next, I made experience flow charts for each persona taking into account the various journeys a user might take
Alex H.
For Alex, the experience is pretty straightforward forward placing larger orders for several people.
He is already logged into he navigates straight to the hamburger menu and selects the "menu". He adds multiple products to his cart and navigates to the cart. He places his order and determines how long until his order is ready.
.png)
Steven L.
Steven's experience is not nearly as straightforward compared to Alex's. Steven is an older gentleman who is not as technologically proficient who is influenced by the requests and urging of his grandkids, so his journey could go in several directions.
In the first instance, Steven opens the app for the first time and selects "just looking" because he just wants to view the menu. He navigates to "view menu" on the homepage. He then hands the device to his grandkids so they can view the products.
.png)
In the second instance, Steven's grandkids have talked him into signing up for the membership benefits. He selects "sign up" which takes him to the sign-up screen. After entering those details, he is prompted to enter card details or come back to it later. He goes on to enter the card details, finishes, and is taken to the home page. He navigates to the menu from the homepage and once again hands his device over to the grandkids. They add their choices. He takes the phone back and navigates to the shopping bag to go over what the kids have selected. He confirms everything and then places the order. He is then shown the progress screen.
.png)
In the third instance, Steven and the grandkids are placing an order in store where he is asked if he has a membership he wants to scan. He opens the app, scrolls and scrolls to see the rewards tab on the home page which he selects. He shows the QR code to the shop worker to scan.
.png)
Lofi Wireframes
Having completed user research, competitive research, and creating two personas and visualizing their unique journeys, I was able to create lofi wireframes of the app. I started by first sketching on paper, and then transferring what I developed into the digital space using Figma.
Branding
During my wireframe process, I experimented with a logo and tropical/hippy concept. After an exhaustive typeface exploration, I re-directed my theme and concept simplifying it tremendously.
The branding is inspired by the rounded and bubbly typeface Gluten (ironic considering it's a bakery app). I used two contrasting colors, a bright and poppy pink, and a more subdued and steadfast dark blue. The two colors balance each other fantastically. The pink brings out the fun of a bakery and matches the brightly decorated pastries. It allows certain elements to stand out drawing the user to certain actions or objects. The blue is more reserved keeping everything from being overwhelming. It also draws the user's eyes but with less urgency.
Hi-Fi Interactive Prototype
When creating my prototype for W&S, I needed to keep the user groups in mind ensuring things were easy to read, see, and that certain elements were generally appealing.
The Design
The Welcome Page
The welcome page is what users will be greeted with when they first launch the app. In my research, users expressed frustration with not being able to view the menu without logging in or launching into an ordering menu. I have given users the ability to view the app in its entirety without logging in or signing up by selecting “just looking”. Doing so will take the user directly to the home page.
I need to further develop on what the features only available if you are signed up will look like if the user does not login/sign up.
The Home Page
The homepage was designed to have the features a user most likely wants to use be available first thing without having to look elsewhere. A user not familiar with a menu app may not innately know to tap a hamburger menu in the corner. Having the menu be the first CTA button resolves any confusion as they know exactly where to go. Having the rewards information further down serves to both make it more quickly accessible, and also introduce the concept of a rewards program to the less experienced user. Having the “featured” section was primarily a design choice as it broke up the page a bit. It also is a great introduction to the service being offered by showcasing some fantastic products right away.
Pop-Out Menu
The pop-out menu was designed to split two categories of the menu. The top and pink part shows the features a user will want to interact with to move them through the process of placing and order.
The blue section offers features that aren’t necessary to place an order, but offer additional information like dietary and allergen information, an about us section, and a contact us section.
The Menu
The menu was designed to be streamlined and simple. To streamline the viewing experience, the menu is on a single page that can be scrolled in its entirety. Users also have the option to select a category from the static category menu at the top to take them straight to a specific type of product. When a product is tapped on, it brings up an overlay showing the product with the product description underneath, as well as the ability to add the product to the shopping bad, and adjust how many of the product a user can add to the cart.
Rewards
The rewards punch card was inspired by the rewards programs of the past. The older demographic will be familiar with the concept of a physical punch card. By creating a digital version, we are making the concept of earning and progressing towards something more tangible and familiar. The concept is also much more simplified in that you aren’t earning a number of points, but rather a punch per however much money is spent. It’s also using simple math to more easily conceptualize how far a user is to an end goal.
That’s appealing to any demographic.
Location
The location page was designed as a way to alleviate stress and anxiety in people who suffer from social anxiety. It shows the map which would take a user to their preferred map app to find the actual location. Further down there are images of the actual location. There are images of the outside and inside of the shop specifically showing where a customer would place an order or pick up their mobile order. There are also icons indicating that the location has wifi, is handicap accessible, and that there is available parking.
Check-out Process
The check-out process was made to show everything in a simplified and easy way. Users can adjust the contents of their cart on this screen. Once the user proceeds to check out, they are shown a screen that will show the processing of their order. They can see from when it is placed, to when it is being prepared, and finally to when it is ready to be picked up. I made each indicator large so that a user may glance at their screen to know when their order will be ready to pick up.
Usability Testing
The Script
I wrote a script to read to each user that would explain in detail what we were doing and why. It is as follows:
I have created a prototype for an app that is used to view a menu for a bakery with the option to place a mobile order. The bakery is fictional, but in this scenario, there is a single location.
The bakery is called Wanda and Sal’s. They sell bakery items such as cupcakes, cookies, muffins, and donuts.
The prototype is not fully developed and usability testing is being used to see how I can improve my design or refine things based on feedback and observation.
Per the Google certificate program text, “A usability study is a research method that assesses how easy it is for participants to complete core tasks in a design.” The key thing to keep in mind is that this is a design and not a fully functional "app". Some things are interactive so it can be confusing when not everything interacts how you would expect. This study is for me, the researcher and designer, to observe you, the user, and how you interact with my design.
I will give you a task and see if you are able to complete the task. I am seeing if what I have designed in this prototype is feasible for a user. I will often be asking you to "pretend" to do a specific thing but there is no actual capability in the app. So when I say "Add this product to the cart", it doesn't actually do anything. The cart is mostly static.
Any questions?
Prompts and Questions
I asked my users to complete three prompts, the first two very specifc, and the final one, very open ended. I asked a single question at the end of the first two prompts, and then I asked a series of follow-up questions when all three were complete.
Prompt 1:
Sign up from the welcome screen. Navigate to the menu and add the chocolate chip cookie and chocolate raspberry cupcake to the cart. Check out.
Question:
Did you find this task easy or difficult to complete?
Prompt 2:
Navigate to rewards and add the coupon for “1 free pastry” to the cart.
Questions:
Did you find this task easy or difficult to complete?
Prompt 3:
Play around and explore the app keeping in mind that not everything is functional.
Follow-up Questions:
Did you find the prototype for this app difficult or easy to navigate?
What were the features that stood out to you?
What were the features that hindered the experience?
Did you find the text to be legible?
Did the design (choice of text and colors and images) enhance or worsen the experience and usability?
Anything you would like to add?
The Users
In conducting my usability testing I wanted to record each user's technological proficiency, their interest in technology, and their confidence in using technology. I believe a user's proficiency, willingness, and how they feel about themselves and their ability to use technology are important factors when considering a user's experience.
USER 1: Early 30’s, Female
Proficient: Yes
Interested: No
Confident: Yes
USER 2: Early 30’s, Female
Proficient: Yes
Interested: Yes
Confident: Yes
USER 3: Mid 60’s, Female
Proficient: No
Interested: No
Confident: No
USER 4: Late 30’s, Male
Proficient: Yes
Interested: No
Confident: Yes
USER 5: Late 20’s, Female
Proficient: Yes
Interested: No
Confident: No
USER 6: Late 60’s, Male
Proficient: No
Interested: No
Confident: No
Prompt One
Sign Up
Navigate to Menu and add items to cart
Check-out
Prompt Two
Navigate to Rewards
Add Coupon to Cart
Overview
Users 1, 2, 4, and 5 were able to complete prompts one and two and found the tasks easy to complete.
Users 3 and 6 were successful in completing the first parts of prompt 1 but struggled with navigating to the checkout screen. Both did not recognize the bag icon being an alternative to a shopping cart icon.
Both 3 and 6 struggled with prompt 2. They did not understand the function of the drop-down menu that revealed the scannable bar code and the “apply coupon to cart” prompt. Neither user understood to tap the text “apply coupon to cart” to add it to the cart. User 6 suggested changing the color to make it more discernable as a separate element and interaction from the bar code. Despite these hiccups, the users reported the prompts were easy to complete.
All users reported that the application was easy to navigate. Features that stood out to users were the use of product images, the hamburger menu being split by urgency (for example viewing the menu being an immediate need versus viewing an “about us” page”), and the punch card style rewards system.
One user reported that something that hindered the experience was not having a reminder on the check-out page to check if there were rewards available to use.
All users reported that the text was legible and that the choice of typography, colors, and images enhanced and did not worsen the experience.
In summary, the study was successful showing areas I succeeded and areas where I would need to make adjustments or changes.
If I were to proceed with developing this app, I would implement user feedback by adding a prompt on the checkout page that would remind and direct users to check for coupons on the rewards page. I would also change the text "add coupon to bag" text to "add to bag" as a button that would more easily indicate the intended interaction of that text.
Conclusion
Throughout the process of developing this prototype, I have realized how vital the user research process is to properly develop an app to give the best user experience. I have a background in visual design so I was not familiar with conducting research and I found the process to be intimidating. I wish I had access to more participants as I feel having more data to pull from for the initial user research process would have given me a wider scope of understanding the user's needs. I specifically wanted to conduct user interviews, which unfortunately does limit the number of people who can participate, because I wanted detailed answers to the questions I had. A survey would have made it much easier to get a larger amount of data, but the questions I would have been able to ask would not have given me the insight I wanted.
The success of my prototype is not fully because of my skill or ability to successfully design a prototype but of the simplicity of the tasks it needed to be able to do: view a menu, or place a mobile order. It was important to keep that in mind so that I could ensure the end result would be as streamlined as the tasks. As I added on functions to this app, I had to be careful to keep each new function as easy as what it was meant to do. For example, the rewards functionality was inspired by physical punchcards that were used before the age of mobile tech.