The Maroon responsive Website and mobile version case study
The Maroon is a food menu website for a modern restaurant. The Maroon Targets the working class and users with limited income, offering a variety of affordable, modern, and contemporary dishes,
and an extraordinary experience.
My role:
UX designer designing a responsive website for The Maroon from conception to delivery.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Target Audience:
The Maroon Targets the working class and users with limited income,
Project goals:
Design a responsive food menu website for a modern restaurant with an affordable variety of contemporary platters
Key challenge:
Unavailability of affordable accessible contemporary food choices for people with low income
Research Details:
Determine if users can easily find their affordable choices and complete the core tasks within the prototype and find if the app is easy to use and straightforward by conducting a usability study and determining (KPIs) and asking the following questions:
-
How long does it take for the user to find their affordable options?
-
Are there parts where the user is stuck?
-
Are they actually finding a wide variety?
-
Are they happy with the options available?
-
How long does it take for the user to complete an order?
-
Did they find the IA clear?
-
Is the app easy or difficult to navigate?
-
Are there more features the users think should be added?
Read the full Research Study Plan:
Initial Design Concepts
Taking the time to draft iterations of each screen of the website on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized quick and easy access to the special offer menu.
Wireframes:
As the initial design phase continued, I made sure to base screen designs on feedback and findings from user research.
Prioritizing easy navigation and locating the special offer menu in various places
Digital wireframes and screen variations
Lo-fi prototype:
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was finding and ordering from the special menu so the prototype could be used in a usability study
User testing results
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Refining mockups
Based on the insights from the usability study a note section was added to every platter page to take into consideration people with allergies
Original screen size
High fidelity prototype
The Final High fidelity prototype provides the user experience from start to finish after the last iterations, as a result to the second usability study and pain points research
Thank you so much for reading my case study,for the full one click read more :D
