casaDe Burger
A mobile focused website for Mexican themed burger hub.
Background
I worked on this website as a project for the UI/UX Design specialization by California Institute of Arts on Coursera.
Team
solo
Duration
1.5 months
Tools Used
- Google Docs - For Documenting
- Google Forms - For Surveys
- Balsamiq - For Wireframing
- Adobe XD - For Design & Prototype
Understanding the Problem
An entrepreneur wanted to open a new, delivery cum Mexican themed restaurant establishment that delivers food (or drinks) to customers living nearby. I have been asked to plan and design the restaurant’s website. The centerpiece of this website was an online food customization and ordering system.
Problem Solution
casaDeBurger is a mobile focused website that provide a platform for burger lovers to quickly order self customised burgers and sides.
- - Users are able to explore and choose different items and customise accordingly
- - User can check if restaurant delivers to their specific place or not
Design Process
Competitive Analysis
To get a stronger grasp on what other solutions are providing, I analyzed competitors who have attempted to design for a similar problem.
McDelivery allows user to order from exciting range of burgers and also include beverages, desserts, cookies etc. It allows users to customize their burgers according to their will.
Burger King provides user with good range of burgers, beverages, desserts etc. It allows users to customize their burgers according to their will.
Discover
In order to understand the users, their needs and expectations I conducted a survey that included set of questions related to both qualitative and quantitative needs.
Research Takeaway
Target User
Define
From research finding, A persona was prepared that depicts their goals, needs and problems
Persona
Empathy Mapping
Ideate
Before wireframes, I decided to create a simple user story and an initial crucial step for application i.e. Information Architecture.
Story Boarding
Information Architecture
Design
Wireframes were the beginning of design process, various paper sketches were made to establish the basic structure with the use of sitemap. Then, a high-fidelity wireframe was designed using Balsamiq.
Low-Fidelity Wireframes
High-Fidelity Wireframes
UI Kit
In this step, I finalized a color palette. I tried to give a touch of Mexican old look which resembles the theme of restaurant (i.e. Mexican) Next, I chose the fonts. I used Roboto as the primary font and Wide Latin for heading mainly in home page
Prototype
An interactive high fidelity prototype was created using Adobe XD. The prototype flow was created mainly for order process. Not all parts are clickable (active)
Conclusion
This was my first UX project and it helped me understand the flow of design process. I tried to stick towards human-centered design process throughout the project. Initially I was not comfortable on how to gather user data using surveys, but with time I understood. If I would have anything differently, it would be trying to know and research more about users and focus accordingly.
Thank you for reading!
I would appreciate any feedback or suggestions. Feel free to contact me
May 21, 2020
UI/UX
Research
Design