Managing your plastic resin orders

Problem statement

Tokoplas has redesigned its website. However, the core features on the mobile app (browsing, checkout, and order tracking) remain less intuitive compared to the website version. This has led to a low number of MAU as customers are not fully benefiting from the app's features.

Starting point

Before starting the project, I analyzed the existing app design and found that it suffered from poor visual hierarchy, inefficient use of white space, and usability issues, making the information difficult to digest.

Key pain points

To gain deeper insights into the project, we conducted user interviews and usability tests with 6 participants. We focused on understanding their knowledge of the core features and their experiences with the existing app.

Key pain points of the existing app:

• Complicated and unintuitive checkout process
• Confusing product browsing navigation
• Difficulty in checking order history and tracking delivery status
• Lack of rewards and appreciation for loyal customers

Key motivations

From the interviews conducted, we identified key motivations that drive users to use the Tokoplas app. These insights guided the design of the new app.

Defining goals

We also collected goals from business and product stakeholders to align with the company's vision, while gathering user goals by analyzing research data.

Design opportunity

From the research, data collected, and goals carried out, we identified opportunities in our design using the HMW framework:

How Might We

• Simplify the checkout process to increase conversions?
• Improve the site navigation to enhance the browsing experience?
• Provide a more convenient way for customers to track their orders?
• Reward loyal customers so that they feel appreciated?

Breaking up the checkout process

The checkout process is now streamlined into 3 steps to minimize scrolling and simplify user actions, reducing information overload as a result.

Adding visual feedback to enhance product discovery

The header now clearly displays the current category level (e.g. PE > HDPE > Film). Numbers of filters applied is indicated with the number inside green circle while current filter state is shown with visual confirmation of active product filters. Additionally, the total number of products is displayed based on the applied filters.

Simplifying order tracking

Users can now view order history directly from the Order History menu, instead of going to the Account menu first. The added search bar and date filter enhance flexibility in checking orders based on preferences. Each delivery status has unique color code to improve clarity of the status and reduce cognitive load.

Introducing loyalty program

Loyal users will earn rewards and progress through tiered benefits.

Tokoplas offers a loyalty program with five tiers: Regular, Bronze, Silver, Gold, and Platinum. Each tier provides unique benefits such as discounts, free shipping, and exclusive vouchers. Users earn Tokoplas Coins by making transactions on the platform. These coins can be redeemed for rewards in the Rewards Store. The Coins Activities page allows users to track their active coins, check their value in IDR, view expiring coins, and review their transaction history.

Impact

• +6% in average MAU from 10% to 16% in the first 3 months after the redesign
• +1.9% in average conversion rate from 0.3% to 2.2% in the first 3 months after the redesign
• 4.6/5 user satisfaction rating based on 104 reviews from Google Play Store
• 4.6/5 user satisfaction rating based on 27 reviews from App Store

Learning

• Each department has its own expectations and goals for the redesign. It's crucial to communicate effectively with key stakeholders in each department to align expectations and goals.
• There is still ample room for improvement in the loyalty program. For example, the coin value should be more transparent and reflect its actual IDR value to simplify user understanding. We're committed to continuous learning and improvement.