UI/UX Case Study — Redesign Gofood.

Imansyah Muhamad Putera
8 min readDec 12, 2020
Designed by Iman

This case study is a final project for UI/UX Course at Purwadhika Startup and Coding School. The project was evaluated on 19 November 2020.

I did the research phase with my assigned teammates and, we were mentored by a lecturer throughout the course. (We worked individually after finishing the research phase)

So, this case study is not affiliated with or endorsed by GoFood/Gojek.

Product Description

We kickstarted the year 2010 with revolution on wheels. 20 drivers, 3 services, 1 call centre, That old classic logo with the bike reflected what we did best — paint the town green with motorcycle taxis, also called Ojek in Indonesia.

Today, the two wheelers have taken us miles ahead and how! With 30+ products across 6 categories also gofood, Gojek is many things to many people.

THE CHALLENGE

Redesign the flow of menu selections, promos and orders until the GoFood application

Our research team, we call “Wu Tang Clan”.
We create this thing based on Design Thingking.

Stage 1 — Empathise

Therefore, we decided to do the research in three ways:

  • An online survey, via Google Forms.
  • In-depth interview, via Zoom.
  • Comparative analysis, compare the app with its competitor.

By doing these, we uncovered users’ motivation, behaviour, preferences,and similar apps they use.

Online Survey

Through Google Form, we reached 82 respondents. We gathered quantitative data from them, and here’s what I learned:

  • 40% of respondents usually take 10 minutes to choose the food to order.
  • 38.7% of respondents gave input to add a credit card feature in payment gofood.
  • 63.2% of respondents stated that the payment invoice in good is very clear and transparent.
  • 73.7% of respondents stated that the latest Gofood display is better than before (in terms of UI Design and Flow).
  • 89.6% of our respondents stated that they also like to use another application, namely GrabFood.
  • 41.3% of respondents usually use gofood 4 to 6 times a month.
  • 49.1% of respondents, usually still figuring out what to order, and the remaining 41.7% already knew.

Stage 2 — Define

To define the users, my teammates and I simplified the information we got from the first stage. We did this by doing these steps:

  • Categorize the patterns using Affinity Mapping.
  • Narrow the Top Findings.
  • Then create our individual User Persona and User Journey Map.
  • Get to the problem statements with the ‘How Might We’ method.

By doing these, I examined what problems seemed significant. Then I described what kind of users experiences the problems.

Top Finding

After doing Affinity Mapping, my teammates and I narrowed the findings even further. We got many findings from the earlier phase, but here are the top findings.

User Persona

User Persona
User Flow

User Flow Task

User Flow Task

Top HMW

Top HMW (How Might We?)

Stage 3 — Ideate

Decision Matrix.

Dietary Filter

The second feature I made is “Dietary Filter”. My goal is to make this feature, so that users can choose several filters such as Vegan, Vegetarian, allergy friendly and others. for those who are on a diet, I believe this is very helpful for his diet program.

Total Calories Count

The first feature that I created that is “calorie count”. in this feature I am inspired by several applications that are out there. My goal is to make this feature, so that users can see and calculate how many calories of food they will enjoy later. for those who are on a diet, I believe this is very helpful in his diet program.

Stage 4 — Prototype

Wireframe

As for the lo-fi wireframes, I eliminated the wireframes for the “Add to Favourites” Prompt. And I added a new wireframe called ‘Dietary Filter and Calorie count’. So here’s the final version of the wireframes.

Click this link to get experience of Gofood! >> !Click me please!

Please follow these steps if you try the prototype:

First Flow

  1. On Gojek Home, tap the GoFood button to get into GoFood Home Page.
  2. Find and get into the ‘Terdekat’ category (means ‘Near me’) from the Category Selection.
  3. Find and get into Abuba Steak.
  4. Order a ‘Sirloin Steak Premium’
  5. Tap the ‘Add Button’ button (means ‘Add order’).
  6. Tap the green Cart Button below the red Menu Button to go to the Cart Page.
  7. Tap the ‘Order’ button (means ‘Order’), the loading animation will be played.
  8. Go back until you reach GoFood Home Page again.
  9. Congratulations, you did all the tasks!

Second Flow

  1. On Gojek Home, tap the GoFood button to get into GoFood Home Page.
  2. Find and get into the Healthy category from the Category Selection.
  3. Find and get into icon Filter on the top left.
  4. Choose ‘Vegetarian’
  5. Tap the ‘Apply Filter’ button.
  6. find and get into Geranium.
  7. Order a ‘Salad caesar’
  8. Tap the ‘Add Button’ button (means ‘Add order’).
  9. Tap the green Cart Button below the red Menu Button to go to the Cart Page.
  10. Tap the ‘Order’ button (means ‘Order’), the loading animation will be played.
  11. Go back until you reach GoFood Home Page again.
  12. Congratulations, you did all the tasks!
  13. Congratulations, you did all the tasks!

Stage 5 — Testing

Usability Testing

I managed to gather 28 testers for Usability Testing (UT):

  • 25 testers via maze.design for the Unmoderated UT.
  • 3 testers via zoom and meeting face to face for the Moderated UT.
Unmoderated UT Result — Maze Usability Report.
Moderated UT Result — User Completion Table.

From UT in Maze, the ratings are on a scale of 1 to 3 for each user task. 1 means ‘failed’, 2 means ‘partial succeed’, and 3 means ‘succeed’. There are 2 testers who struggled to finish the final task.

Again, they struggled to finish the final task. So I traced it down, see how the results are connected with their feedback. So I could get definitive answers.

From the report, I learned that most of the testers had no difficulties, only that some of the testers were not very familiar with a certain area. but overall, all good results.

Testing Stories

Conclusion & What have I learned

From this project, I learned a lot of things. At the same time, I still need to learn more about UI/UX Design. But here are the things that I can highlight:

  • Keep trying to be creative, never feel bored to learn, find out more about design and theory. and certainly still trying to design to solve the problems that exist around, small and large scope problems..
  • Always pay close attention to the entire target users’ behaviour. Because each user must have different preferences for what kind of design is suitable for them.
  • classic or not, timing is also important for this. So I really study design time, the designers call it the “Design Sprint”. From there, I learned how to manage the time given by stakeholders or teachers to complete the targets and goals that have been made.

Finally! thank you for reading up to this point. This project was a great experience for me, Big thanks to Kenneth Mahakim! I’m so grateful to have him as a mentor and evaluated me with Khrisnawan Adhie & Kuncoro Jatikusumo. Thanks and kudos to my teammates 👉🏻 Sry Rashida, Jaspreet Singh Johal & Prima Kuntoro. Also thanks to my classmates from the JC UI/UX Design Class Batch 4 in Purwadhika Startup School.

I’d love to hear any feedback from you. You can reach me on LinkedIn or via Gmail (imansyahmp@gmail.com)

#IBelieveWeKenn 😎👊

Did you know? 🤔

You can give up to 50 Claps for an article? Tap and hold the clap button for a few seconds and BOOM! Try it out👇🏻👇🏻👇🏻.

--

--