JAJANKU

Tata Feraro Mukarram

UX Researcher

UX Designer

Product Designer

Figma

Google Sheets

Notion

Note: This project is based on my Coursera & Google certification format. I learned some new things by participating in this course, and this portfolio is also in progress as well.

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!

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.

Likes

Views

103