Improving Astro: Paket Masak & Order Tracking | UI/UX Case Study

8 min readMar 31, 2022

This case study was created to fulfill the final assignment at Binar Academy UI/UX Research and Design Bootcamp.

Along with my team, we decided explored opportunities and implemented a few improvement ideas to beloved quick-commerce, ASTRO.

Team:

Product Manager: Davin Pranoto & Rajib Kurniawan

UI/UX Designer: Hilman Wardhana, Hima Ichwana, & Shella Melati P.

(Disclaimer: this study is made for learning purposes and does not represent any views from ASTRO).

Background

There has been quite a significant shift in people’s lifestyles due to Covid-19 pandemic.

Limitations of out-of-home activities, reduced operating hours of restaurants and public places, and a new working arrangement to working from home.

People now spend most of their days at home. The habit of online groceries and having home-cooked meals are also significantly increasing.

Astro as one of the leading quick commerce platforms has started to become the go to app for groceries purchases. Convenience has become the key strength for Astro through its promise to deliver your goods in just 15 minutes.

In this study, we are exploring opportunities to improve users’ satisfaction and experience in using the platform.

Stage 0. Set the stage

Planning

Board tasking

We used Trello and Miro as our collaborative tools

In this stage, we were expected to set the goal and map out challenges in the sprint. In order to achieve that, firstly we tried to empathize with the user so that we understand their problems, needs, and aspirations.

At the start of the project, we were intending to improve the “Paket Masak” feature within the platform. However, we were not limiting ourselves to explore and understand other potential users’ pain points.

Therefore, in our research we were also gathering insights aside from “Paket Masak ‘’ feature to understand pain points and other opportunities from users.

Our Product Manager also has some feature ideas prior to research, so we would like to measure the acceptance to the user.

We conducted an online survey, user review, and in-depth interview in an effort to achieve all objectives above.

Online survey result

The survey questions were divided into three main sections: demographic, shopping and cooking habits, features acceptance and aspiration. We succeeded in gathering 14 responses.

User review result

In-depth interview result

We interviewed three Astro users who filled the survey and were willing to be interviewed.

The insights we got were classified according to similarity (affinity mapping) in order to analyze it easily.

Research result summary

After analyzing lots of insight that we got from researching, we classified the problems and opportunities into three groups as seen in the picture below.

User persona

User persona was created based on our research result. User Persona is a representation of the target user of the product. It contains user descriptions such as age, gender, occupation, education, interests, etc. which are useful for providing insight into the user character. User personas are used to combine the needs, wants, and pain points of several people with the same traits.

Stage 1. Understand

In this stage we tried to create shared understanding with all team members to unite goals and find common solutions.

We created a User Journey Map and a Point of View (POV) to understand the user better and to make sure all members were on the same page.

After we understood the problem space, we tried to generate solutions by constructing How Might We (HMW). HMW helps the team to generate solutions while still focused on the right problems.

Stage 2. Define

We chose one HMW in each problem. After that, we tried to define the initiative from the selected HMWs.

We used R.I.C.E scoring to decide our priority. Based on the scoring, the main priority was order tracking, followed by recipe page for “Paket Masak”, and last product availability.

We decided to solve the order tracking problem in the first sprint and the recipe page-paket masak in the second sprint.

After deciding the problem we would like to solve, our team conducted Crazy 8 to gather ideas as much as possible. Then we voted for the best ideas to be implemented as our solutions.

Stage 3. Decide

In this stage, we collected voted sketches from crazy 8 sessions and determined the best possible ideas. From the selected ideas, we created a storyboard to determine how the prototype would be tested on the user.

Then, we constructed sitemap and flowchart.

Flowchart for recipe page-paket masak and order tracking

The last step was to build the wireframes.

Stage 4. Prototype

Building a prototype was started in this stage. First we made the hi-fi design and then connected each button and screen to construct a clickable prototype.

Recipe page — paket masak

Astro interface of “Paket Masak” before revamp.

Our interpretation of recipe page of paket masak in Astro.

What’s new?

User now can see a full list of recipe references based on daily recommendation and types of cuisine (Indonesian, Western, Asian, etc.)
User can gather information including; preparation time, calories information, and difficulty level of preparing the meal
Complete information on recipe’s ingredients and cooking instructions in the format of text and video.
One click purchase

Opportunities to improve customers’ shopping experience through

Go to app to review available recipes to plan dinner
Easy to navigate through different available options
Seamless purchasing experience in just one click

2. Order tracking

Astro interface of “Status Pesanan” before revamp.

Our interpretation of order tracking in Astro.

What’s new?

User can access driver’s location real time
User will automatically be notified when there is delay in delivery time
User can now give tips and rate driver’s service quality

Try the prototype here!

Stage 5. Validate

Validation is needed to identify what has been good and needs to be improved from the design. We conducted usability testing with five participants to test our design.

But, before we dived in and have testing with real user, we did design testing by shared our Hi-Fi design and prototype to UI/UX classmates and facilitator for the purpose of improvement prior to usability testing. We tweaked our design according to the feedbacks we got.

Usability testing plan

In order to conduct usability testing, we made usability testing plan in first place. The usability testing plan consisted of respondent criteria, tasks and scenario for the test, and guidelines on how should we facilitate the testing.

Usability testing result

Maze analysis

Almost all task which tested in Maze scored > 85, indicating that the respondents can complete the task well.

Two tasks, “Mengakses Informasi Pesanan” task and “Memberi Tip dan Ulasan” task, performed below par.

Maze report of “Mengakses Informasi Pesanan” task

Misclick rate and average duration spend on task were high in “Mengakses Informasi Pesanan” task. This was because some respondents did not understand that “Informasi Pemesanan” can be accessed on the card driver. Some respondents were also confused by the given scenario.

Maze report of “Memberi Tip dan Ulasan” task

In “Memberi Tip dan Ulasan” task, one respondent could not complete the task (give up). The respondent misinterpreted the task scenario, got lost and stuck in the checkout screen.

2. System Usability Score (SUS)

SUS was conducted to find out the performance of the prototype according to the respondents. The SUS was filled in by the respondent at the end of the test.

Based on our calculation, the SUS score is 81,5 (excellent).

SUS score of each respondent and overall score

3. Feedback grid

We asked serial questions before, during, and after the usability testing to gather feedbacks and information. We sorted the feedbacks in grid system with four categories: Worked, Changed, Questions, and Ideas.