GRAVEL

Zero Touch. Gravel Material Checkout Experience

Zero Touch. Gravel Material Checkout Experience

Gravel Material is one of the services within the Gravel app that provides an e-commerce platform for construction materials

Gravel Material is one of the services within the Gravel app that provides an e-commerce platform for construction materials

ORDER COUNT

~20 %

GROSS ORDER VALUE

+1 B IDR / month

What triggers this project?

What triggers this project?

MVP RESULT

When the MVP of Gravel Material was launched, the initial concept was a catalog of materials, allowing Gravel users to browse the items they wanted to purchase. However, the transaction process was still handled manually by Gravel's operations team via chat.


A major limitation of this MVP was the significant amount of human involvement in the user journey, leading to many new pain points that left users dissatisfied with the product. This project was created to minimize human intervention in the Gravel Material flow and deliver a more seamless shopping experience for Gravel users..

When the MVP of Gravel Material was launched, the initial concept was a catalog of materials, allowing Gravel users to browse the items they wanted to purchase. However, the transaction process was still handled manually by Gravel's operations team via chat.


A major limitation of this MVP was the significant amount of human involvement in the user journey, leading to many new pain points that left users dissatisfied with the product. This project was created to minimize human intervention in the Gravel Material flow and deliver a more seamless shopping experience for Gravel users..

POST-MVP RESEARCH

Based on the research, Gravel Material is able to meet the material needs of users from other Gravel services (such as Gravel Maintenance and Construction). But, we also identified pain points from the usability testing (UT) that was conducted:


  • Users found the checkout flow on Gravel Material unfamiliar, as it differs from typical e-commerce platforms.

  • When entering the chat page, users were unsure of what to expect from the open chat window, which led them to abandon their orders.

  • Users had to engage in back-and-forth conversations with the internal Gravel team to complete their orders, which they found painful.

OBJECTIVE

Create a seamless and straight-forward flow for user to checkout the products while removing unnecessarily human touch with the apps system

Create a seamless and straight-forward flow for user to checkout the products while removing unnecessarily human touch with the apps system

What was the most challenging part of this project?

What was the most challenging part of this project?

CHALLENGE

It is crucial to communicate with the operations team to facilitate the transition of the new flow to the ongoing BAU (Business As Usual).

CHALLENGE

It is important to consider how the design can make users feel comfortable when the algorithm that the engineers will create is implemented.

CHALLENGE

The checkout process for Gravel Material is quite different from typical e-commerce services.

The Design Solution

The Design Solution

REVAMPED USER FLOW

From the statements above, collaborately with Product Manager, Product Research, and also Engineers in Tribe Gravel Material, we brainstormed ideas to address some of these pain points and as designer giving the design solution for this project, including:

Order Delivery Page

This page consists of several sections which are commonly found in e-commerce platforms, including:


Detail Penerima : Users need to specify who will receive the material delivery, as they may not always be at the project site when the materials arrive or might have a partner, such as a foreman, managing the delivery.


Catatan : We provide users with the flexibility to add special instructions for their delivery.

Delivery Address : This field is automatically populated based on the user's geolocation when they open the app. Why? Because, according to our findings, users typically order materials while at the construction site (for contractors) or at home (for homeowners).

Order Matching Page

What if the matching

failed?

This page is where the system takes over the tasks previously handled by human intervention.


Why using Animation? We want to maintain user expectation that actually we trying to find the best store near them by system


Compare to let them waiting in chatroom like MVP version flow we want user to know they waiting for something that currently being progressed.

If failed, our team ready to serve the user.

We also anticipated this things, since we believe the system maybe had flaws and not run as we expected.


So if the matching failed we will ask help for our operational team to move forward with manual things.

Order Summary Page

This page summary all the order details like delivery and matched/unmatched product after the store matching.


This pattern showed in all e-commerce platform for the order last confirmation before they paid the order.


We also add the tips “Produk dari Mitra Gravel Terpercaya” for gaining their trust about the product we server for them

Payment Page

At the end we collaborate with Xendit to generate the payment link inside the app. In the design we put the space for Xendit Payment UI.


And at the end of the payment we will let the user know them they payment success by giving the the success page with several action option.

TESTING

We do some usability testing with this new flow with 5 participants


What task we assigned for them? Starting from cart page please checkout the product until you done paying the order. This testing resulted in 80% of participants successfully completing the flow without difficulty. When we asked about the familiarity of the process compared to other e-commerce apps they use, five of them said it was familiar and easy to understand.


So, based on this testing result we go through this project to development and released soon! 🥂

We do some usability testing with this new flow with 5 participants


What task we assigned for them? Starting from cart page please checkout the product until you done paying the order. This testing resulted in 80% of participants successfully completing the flow without difficulty. When we asked about the familiarity of the process compared to other e-commerce apps they use, five of them said it was familiar and easy to understand.


So, based on this testing result we go through this project to development and released soon! 🥂

Post-released Output

Post-released Output

After 1 month of the feature released we get several impact, insight and learning about this project, which is:

IMPACT

~20%

ORDER COUNT

+1 B IDR / month

GROSS ORDER VALUE

LEARNING & INSIGHT

INSIGHT

We gather additional IDR ~1B monthly GOV from Gravel Material and become the most success service in Gravel, BUT only 30% generated from success matching and the rest was the manual matching conversion.

What we know and learn about this?


  • The failed matching that make the order go through manual process was highly occured because our system still lack of SKU and store quantity. We learn that beside the seamless flow there’s an operational thing we need to be consider about it, the readiness in our end (Gravel) also matters to make this works.


  • The bright side was, we actually slightly reduce our manual team effort for handling the manual matching by handling 30% of the order with our system matching.


  • And not removing all of the human touch flow (our safety net) really help us to secure failed matching because of the system limitation

INSIGHT

We got several complaints from user about inconsistency price when they in the cart and after the order matched.

What we know and learn about this?


  • Even we already put the copy “Estimasi Harga” in cart to let them know about it can be different when the order matched, user seems not aware about this and as a Designer I learn that for this kind of persona we need to be more and more clear and prominent/standout designing the sensitive information such as price.

End of the project!

End of the project!

We reach the end of this project and there’s a lot of room for improvement in Gravel Material. All the finding and learning in post-released was really exciting for me personally and a lot of things I learned when doing this project.


Hope you also find something interesting and insightful in this whole project showcase!


Thanks for reading all of this and till this point.

We reach the end of this project and there’s a lot of room for improvement in Gravel Material. All the finding and learning in post-released was really exciting for me personally and a lot of things I learned when doing this project.


Hope you also find something interesting and insightful in this whole project showcase!


Thanks for reading all of this and till this point.