Tokoplas App Redesign

Project Overview

Problem

Tokoplas has already redesigned their website. However, the overall navigation flow and branding are inconsistent while some features are still lacking compared to the website version. As such, customers do not feel the benefits in using the Tokoplas app.

Outcome

Enable user to use and invest more on Tokoplas app by making them feel efficient, appreciated, and delighted by the new app version.

Solution

We do a major revamp on the product listing, checkout, and order history pages so that users can easily browse for products, make purchase, and track order status. Also adding some new features and functions for certain pages so users can truly experience the benefits of using Tokoplas app.

Goal

We want to innovate and improve Tokoplas app in order to increase conversion, retention, and user satisfaction rate.

Starting Point

This is the design before we started the project. What I found when I visit the current app design were the information is difficult to digest because of the poor visual hierarchy, inefficient use of white space, and lack of usability.

To understand more about this project, we conducted user interviews and usability testing with a focus on general knowledge of the core features and usability of the current design.

User Pain Points

From the interviews and usability testing that has been conducted, we found a number of user pain points such as:

• Lengthy and unintuitive checkout process.
• Confusing navigation when browsing for products to purchase.
• Hard to check order history and delivery status due to its placement.
• Lack of appreciation for being a loyal customer.

User Motivations in Tokoplas App

From the interviews conducted, we got several user motivations that drive users to use the Tokoplas app as opposed to the website version. This is one of our bases in designing the new Tokoplas app.

Gathering Intentions

We also collect intentions from business and product stakeholders so that we can align with the company's vision, while we get the user's intention by analysing research data.

Design Opportunity

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

How Might We

• Make the checkout process easier and clearer?
• Make the product browsing experience more seamless?
• Provide easy access to check order history and delivery status?
• Reward loyal customers so that they feel appreciated?
• Create a consistent branding and experience across the app?

Breaking up the checkout process into digestible chunks

We broke up the checkout process from 2 to 3 steps to minimize user scrolling. Now each step has only one main action to complete to make it easier for users to achieve their goal and reduce information overload. We also added breadcrumbs to give users a clear sense of progression of their checkout process.

Visual feedback for improving product browsing experience

Many users have difficulty getting clear information about what categories level they are at, what filters are being applied, how many products are displayed. So, I made improvements to Tokoplas product listing page with the focus on letting users know about their categories level, filters, and products displayed.

In this design, users are able to clearly see the categories level they are at directly in the header (PE > HDPE > Film). How many filters applied are indicated with the number inside green circle and current filter state is shown with visual confirmation of active product filters. Users can also see the total products that will be displayed when choosing filters to apply.

Make it easier to check order history and delivery status

Users can easily see all the list of order history by tapping the Order History menu in the bottom navigation bar rather than going inside the Account menu. Search bar and date filter are added to give users flexibility in checking orders based on their needs. Each delivery status has unique color code to help users to quickly identify the delivery status and minimize memory load.

Introducing loyalty program

Through this loyalty program, we want to reward our users with valuable benefit to increase retention rate. Each user will feel the difference between tiers through the different color of the tier card at each level. Users can see the total coins owned and which will expire more clearly. Users can also view their progress to move to the next tier, and most importantly, they can see the rewards they can redeem directly on the landing page.

There are 5 tiers of loyalty level starting from regular, bronze, silver, gold, to platinum. The benefits they can get are like discounts, free shipping, extended coin expiration period, and exclusive vouchers. This benefits varies based on their tier. They can see the details of the benefits on the Loyalty Details page.

Users can get Tokoplas Coins by making transactions at Tokoplas platforms. The coins earned by the user can be collected to be exchanged for a reward on the Rewards Store section. Now on the Coins Activities page, users can see their active coins, conversion of Tokoplas Coins values to IDR, coins that will expire, and their coin transaction history. We also provide notifications via push notifications to remind them when a coin will expire in the near future.

Takeaways

The previous design didn't have tracker we can track to gather the statistical significance to validate the success of the new design. However, we're continuing to get feedback from users and iterate on the designs to improve the user experience.

Outcomes

• Achieved a 4.7/5 customer satisfaction rate based on 85 reviews from Google Play Store.
• Achieved a 4.9/5 customer satisfaction rate based on 25 ratings from App Store.

Learnings

• Each department has their own expecation and goal with the redesign. It's crucial for us to be communicative and ask the right questions to key stakeholders in each department so we can properly manage their expectations and goals.
• There are still many opportunity that we can cover in terms of the loyalty program and we're always learning to make better improvement in the future.