JAJANKU
Tata Feraro Mukarram
Like this project
Posted Apr 15, 2022
A mobile-ordering app for street food vendor, this case study is a part of Google UX Design certification on coursera.
Project Overview
The product
An ordering app for street food vendors to help the user get their street food without facing their current challenges
The problem
For some people, it's hard to get food with their full schedule, and for some people, street food can be the answer for a person who needs fast and cheap food around them, and struggles can happen anytime such as long queues, inconsistent open time, money changes and many more.
The goal
The goals are to solve and provide the problem that users face by designing an easy-to-use app to order something from the local street food vendors so that the users don't have to worry about the struggles and pains they face often when ordering street food through the vendor's location.
Responsibilities
UX research, Wireframing, Prototyping, UI Design.
Empathize - Understanding the user
User research
I did primary qualitative research by interviewing 4 potential users to get more information and help me empathize with their pain points, expectation & motivation. I revealed many things with my research method and it open my mind to solving their problem.
Interview Goals
I want to understand common challenges people face trying to order food from a Street Food Vendor
I want to identify frustrations or obstacles that people experienced during the process of ordering from a Street Food Vendor
I want to identify the chance of improvements from common behavior based on daily pain points while ordering from a Street food Vendor
Target Participants Characteristics
Ages 18-62
Lives in a Metropolitan or Suburban area
People who ordered food from street food vendors at least once a week
Participants of different genders
Include participants with different abilities if possible
Pain points
Waiting time to prepare the food, sometimes it takes too long with a long queue as well. Also, there is no place to wait sometimes. The queue is also getting cut by someone else.
The street vendor doesn’t have a specified time to open and sometimes they are moved to other places.
The Vendor doesn’t have exchange money sometimes, which makes me should buy their other item as an exchange.
Custom order sometime is not right, the vendor forgets to add or customize their customer’s order.
Worried about the ingredients used in the snack, at least the halalness of the products.
Define
Problem statement
Adams Blake is a Medical Doctor who needs fast, easy, and cheap food because he needs to stay productive to finish and get to his job on time.
User persona
Based on this persona, we can find their goals, frustrations, and motivation. So I'm trying to compile those all findings as the foundation of their needs.
User journey map
The goal is to know the user’s needs and pain points, empathize with the user’s challenge, and provide improvement opportunities, helping users finish their tasks easily.
Based on this User journey map, I found a lot of common issues that can be fixed and make improvements with ideation to solve those problems.
I used "How Might We" to reveal what can be improved, such as:
How might we tell our users that sometimes what they are looking for are close to them?
How might we help our users to not take a long queue and be burnt by the sun?
How might we help our users get their exchange better?
How might we help our users find their desired products?
These "How Might We" are being used for the ideation process to achieve my goal on this project.
Ideate - Starting the design
Wireframes
Paper Wireframe
I did Crazy 8 and How Might We methods to define and get ideas from possible solutions and compiled my ideas into wireframes.
Ideation for better home wireframe
Combining the best possible ideas into a wireframe
I did a paper wireframe first to spark my brain's creativity in a fast way, this also makes me easily iterate my design with better solutions.
Another wireframe screens
Digital Wireframe
After finishing the paper wireframe, I also translate those wireframes into digital wireframes using Figma.
Digital Wireframe for ordering scenario
Low Fidelity
Low-Fidelity Prototype
After finishing the wireframe, I also created a Low-Fidelity prototype to help me find usability errors, bad flow & interactions, I did several iterations and improvements with it. After I did the Usability Study with the candidates that fit with the persona, again, I did some iterations with my designs, noting all that users think, and users' expressions to get what users mean, I hope I can avoid biases and provide my current best solutions on it. please take a look at the new High Fidelity Design with its prototype.
Improvement
Iteration
As I said, I did several iterations; this is one example. I made changes to the delivery and pickup method layout, user can choose and add locations based on the "Choose from map" button.
Version History
With this solution, I think it will help users choose where they will get their food easily and now users can freely choose their methods.
High Fidelity
I also did several changes to the solution based on the user persona and some changes to the color scheme.
I put the view all button on the nearby Street Food Vendor, and the user now can take a look at nearby street food vendors, some users said they only know vendors that far from their home because of their workplace, activity, and several other reasons, the street food vendor is also moving to a new place to get new customer, so this solution will give the information to the users for the locations of the street food vendor and also did some improvements by adding some filter and sort on it.
Helping the user make the right choices
According to the interview, some of the frustrations come from the fact they worried about the ingredients and the halalness of the products. I solved it by helping them to make the right choice with halal food. Next to the street food vendor's information, I will show pills that hint if these street food products are for them or not.
Simpler step
I improved this part to get the best steps for the user, and this is the final solution after several brainstorming and ideations that I showed you above
Payment method
Based on the information from the interview, I understand that nowadays the young generation prefers to make a transaction using their e-wallet to have a faster and simpler step, and these payment methods are provided to help the user with their problem with exchange and faster transaction.
Getting their order
There are 2 methods to get their order, first with delivery, a driver will deliver the order from the street food location, and a courier from the Jajan App will take the order and deliver it to the user
The second one is having their order by coming over to the street food vendor's location, the user can see the map for the location, and they need to show their code and get confirmed by the street food vendor for their order.
Design System
I am in the process of documenting the design system, and those will be on here soon.
Lesson learned
I learned that users are more prefer the current progress such as real-time transaction to bring back old memories and this thing indicate that not all of the progress should get replaced by a new method, but this case study provides the solutions for the current pain points and user needs.
I know this case study needs more findings to get a better experience. I also planned to have a Usability test soon and expose the potential improvements for my current design solution.
I also really appreciate it if you can give me a suggestion for future improvement because I will always try to learn from my mistakes. Feel free to contact me at tatafmukarram@gmail.com. Thank you so much!