UX Prototype
Case Study
Overview
OBJECTIVE
I was prompted to create a responsive website of a menu for a cafe in Syracuse with a focus on accessability. The app needed to follow the specific UX design process outlined by Google.
APPROACH & RESPONSIBILITIES
Each part of the design process was done by me. Digital design was done in Adobe XD!
-
Research
-
Sketching
-
Wireframing
-
Prototyping
-
Usability test facilitation and moderation
-
High-Fidelity design
Process
The process for this project includes the following:
UNDERSTAND
Interviews
Personas and journeys
Competitive audit
​
IDEATE
Crazy 8s
Storyboards
DECIDE
Goal Statement
Feature List
​
PROTOTYPE
TEST
Paper Wireframes
LoFi Prototypes
HiFi Prototypes
Annotations
Usability Testing
Understand
Interviews
The main takeaways from these interviews were:
Not feeling confident about a restaurant's attention to food allergies or intolerances stand as a big pain point for some who are trying to order from a digital menu
People generally like ordering at the counter, but they dislike being at the front of the line and not knowing what they want to order.
One person said they prefer having options, and do not like to be told to order in one specific way on a digital menu.
One person with arthritis and poor vision said digital menus can be better than paper in many cases, as long as the UI does not require a pinch to zoom
Personas
To design the app in a user centered way, I created 3 personas that are based off of the interviews I conducted. Each persona has unique goals and unique frustrations. This helps anchor my focus on specific needs that will also benefit the broader user base.
The personas Destiny and Daliah both have a permanent or situational disability that creates an accessibility challenge. Designing in an accessible and equitable way not only allows those with disabilities a better user experience, but it also improves the user experience in general!
Competitive Audit
Ideate
Crazy 8s
This crazy 8s exercise is meant to generate ideas at a rapid rate. The specific idea being explored in the picture above is how show the user what possible ingredients may be an issue for someone with allergies or intolerances, in a concise and consistent way.
Decide
Goal Statement
Our digital cafe menu website will allow users to view and interact with the cafe menu in an accessible way which will affect people who are interested in ordering from the cafe but may not find the physical menus easy to use.
​
We will measure effectiveness by reading user reviews and site traffic.
Feature List
-
Brand establishment like a home page, about us, and contact
-
A list making element to the site to allow people to easily keep track of items the might want
-
Simple scrolling menu navigation with a general menu constantly visible
-
Allergy/Intolerance markers
-
Language options
​
​
Prototype Phase 1
Paper Wireframe
I made 5 iterations of each top level page for the app, with an additional sixth iteration that refines all of the best ideas from the previous five. This way I can flesh out concepts I want for each page, and then mix and match the best ideas together into the final direction. Here is a sample:
Refined Wireframes
Low Fidelity Prototype
The refined paper wireframes were then made digital in XD, and given prototype functionality. These prototypes were shared with other designers in the program for general feedback.
Test
I created a Usability Study plan that outlined research goals, questions, key performance indicators (KPIs), and test methodology. I also wrote out a script to keep each usability test consistent. Notes were taken by tracking feedback in an a spreadsheet. Data was then synthesized and grouped into 4 main feedback areas.
1
Menu header area is distracting
The 2 column menu feels tedious
2
The saved list feels useless
3
The minus button is hard to click on
4
All users expressed negative feedback about the menu header, because it made them feel like they were on the wrong page.
Most users felt annoyed by the 2 column menu. Saying it seemed too large, with too much scrolling.
Most users were confused at the point of the "saved list". With many asking if the list could be sent to a friend or their own phone.
All users struggled to click the minus button under a food item.
1
2
3
Prototype Phase 2
High Fidelity Prototype
After the wireframes were tested by users and updated, they were brought into the true design phase. Branding along with type, color, and graphical elements were chosen and applied. The main screens that allow the user to complete some main user flows were designed, the prototype does not represent the entire site, but could be designed fairly quickly!
Annotation for Web Accessibility
To make this website more accessible, I added annotations to dictate the traversal order of a page, as it is being navigated via keyboard only. These annotations will help those with disabilities who cannot use a mouse or trackpad.
