QuickBites delivery app case study
![](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/64833dcdf0de971d08fe5850_Dribbble%20shot%20HD%20-%201.jpg)
Overview:
Through my experimental project, QuickBites, I had the chance to apply UX design principles in a practical setting. The outcome was a high-fidelity prototype of a delivery app that offers users a seamless and enjoyable experience. This project showcases the power of effective UX design in revolutionizing the digital landscape of the fast food industry. Despite being a hypothetical case, QuickBites sets the stage for future UX design projects that aim to make a real-world impact.
My role:
- UX Designer
Tools:
- Figma
- Figjam
- Google Sheets
Problem Statement:
Local fast-food restaurants face significant challenges in managing orders, ensuring timely deliveries, and effectively communicating with customers. These difficulties arise due to the need for a user-friendly digital platform. QuickBites was developed to address these issues by providing a solution streamlines operations and enhances the overall customer experience. By utilizing QuickBites, local fast-food restaurants can overcome these obstacles and provide a more efficient and satisfying service to their valued customers
Design Thinking Approach:
I implemented the Design Thinking framework to tackle the challenges experienced by local fast-food restaurants. It all began with the Empathizing phase, where I conducted comprehensive user research to gain a profound understanding of potential app users' needs and pain points. This crucial step allowed me to put myself in their shoes and gather valuable insights into their experiences. By empathizing with the end-users, I established a solid groundwork for the subsequent stages of the design process.
![Design Thinking Process](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/648342f1fd31c7c8e043f664_Frame%202.png)
Empathize:
It all began with the Empathizing phase, where I conducted comprehensive user research to gain a profound understanding of potential app users' needs and pain points. Firstly, I looked into similar competitors and gathered feedback from people who had used them. I also read through comments on the app store. Additionally, I conducted interviews with four different personas to gain a deeper understanding of their main concerns. This allowed me to gain valuable insights into people's opinions about fast food apps.
During reviewing comments about similar apps, I analyze these competitors:
- Burger king
- Pizza hut
- Boston pizza
- Papa John's
For an interview, I mainly asked these questions of my participants:
- What App do you use most for ordering food?
- Which one do you find easier to use for food ordering, an App or a phone call?
- What difficulty did you face most during using the app?
Define:
During the Define phase, my primary focus was distilling the research findings into precise user needs and goals. Based on Empathize phase findings, I write down my four personas' data and insights, including their pain points, goals, and needs. Also, I made empathy maps to define their problems, including understanding what they say, think, do, and feel. This helped me get valuable data to be used in the ideate phase.
![Persona](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/648349cde2c6e7158781c911_1.png)
![Persona](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/648349dbd16800180fe85a13_2.png)
![Persona](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/648349e8d210b5fccf39fb2e_3.png)
![Persona](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/648349f585b0f1ec867526eb_4.png)
Ideate:
I understand the primary users' problems and feature requests by this phase. So I gathered those features and made a value proposition map declaring different users' ideas and requests.
![Uncategorized Value propositions](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/64834c15070a7a01bc4e8421_Uncategorized%20Value%20propostions.png)
To better understand these complex ideas, I took the time to categorize them into distinct groups. In doing so, I removed redundant ideas irrelevant to my perspective and focused on the most important and valuable information. This allowed me to understand and apply the concepts more effectively in my work.
![Uncategorized Value propositions](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/64834d38cbadf50f8a2d0838_Uncategorized%20Value%20propostions.png)
Design:
During the Design Ideas phase, my main objective was converting the insights from research and ideation into tangible design concepts. This phase involved translating the identified user needs and goals into innovative and user-centered design ideas.
Firstly, based on users' ideas and goals and ideas from similar apps, I designed a full user flow to demonstrate the flow and information architecture of the app. This user flow changed several times during the project to be aligned with user feedback.
For viewing the full view of the user flow in Figma, you can tap here.
![User flow](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/6484ac8c2093324888c23408_dsd.png)
Once the user flow was finalized, I began creating mid-fidelity prototypes to bring the design to life. To ensure a seamless user experience, I've used material design version 3, which allowed me to customize the interface system with my app's unique colors and typography. After designing the user flow, I started creating mid-fidelity prototypes.
For viewing the full view of the mid-fidelity in Figma, you can tap here.
![Mid-fidelity](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/6484a94d1f5331b6fb00d452_Frame%205929.png)
![Mid-fidelity](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/6484a9f104a49cc6fca5066a_Frame%205930.png)
This mid-fidelity prototype helped me visualize my design concept and ideas at a minimum cost, as it didn't have final colors and pictures. So I could concentrate on making a good user experience for the users.
At this part of the project, I was thoroughly excited to design a high-fidelity prototype and test it with real users based on my previous design ideas.
So at the first point, I made a proper color and typography kit based on material design, and after that, I started my high-fidelity design.
![Typography](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/6484b5b6a7baf73f86ceeadb_Typography_Secondary%20font.jpg)
![Colors](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/6484b87e6bff1a3a6f3326df_Typography_Secondary%20font.jpg)
![High-fidelity](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/6484b98f3bdb661f62a57d57_Frame%205929.png)
![High-fidelity](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/6484b9a0aa6428f191acaaa5_Frame%205930.png)
The images below demonstrate a better understanding of the difference between mid-fidelity and high-fidelity prototype
![Mid-fidelity and High-fidelity](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/6485dd47adbde29bba9fc42d_Frame%206001.png)
![Mid-fidelity and High-fidelity](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/6485de88f4715910f54678d3_Frame%206002.png)
![Mid-fidelity and High-fidelity](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/6485df22d8da4bb3191ce61f_Frame%206003.png)
![Mid-fidelity and High-fidelity](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/6485df6ae17e150882b9c138_Frame%206004.png)
Test:
In the Test phase, my focus was on gathering feedback and insights from potential users to evaluate the effectiveness and usability of the design solutions. This phase was crucial in ensuring that the final product, QuickBites, met the needs and expectations of its intended users.
I conducted multiple rounds of usability testing with representative users, allowing them to interact with the interactive prototypes and provide feedback on their experience. Their valuable feedback helped me identify any usability issues, pain points, or areas of improvement in the design.
Based on the feedback I received, I refined and iterated on the design solutions, making necessary adjustments and improvements. This iterative approach ensured that the final design of QuickBites was informed by user insights and effectively addressed the identified problems.
By testing the design solutions, I was able to validate their usability, functionality, and overall user experience. The insights I gathered during the testing phase guided the final refinements and enhancements to the design, resulting in a user-friendly and intuitive delivery application that met the needs of both the local restaurants and the customers.
The Test phase was essential in ensuring that QuickBites was a well-rounded and user-centered solution, ready to transform the fast-food industry's digital landscape.
![Usability Testing](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/6485e10dadbde29bbaa28a06_2023-06-11%2018.27.52.jpg)
![Usability Testing](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/6485e1406ac65496731844b6_2023-06-11%2018.27.59.jpg)
![Thank you](https://cdn.prod.website-files.com/6445601a9382629db73ba90b/6485e4a7bfa0a739d8dae589_Frame%206005.png)
We deeply appreciate your dedication and the time you've spent exploring my UX case study.
If you have an interesting project and you think we can collaborate, or if you just need a sounding board, feel free to reach out to me at n.afsah.hejri@gmail.com
Stay tuned for more insightful content!