Timeline
January - June 2022
Introduction
Speed up user’s integration time by 40% - 50% on Tokopedia Digital Solution’s new UI/UX Design
My Role
Platform
https://www.tokopedia.com/partner
I became the PIC (Person in charge) for the project, with these several responsibilities :
1. Revamp of the whole website, including the home page and also sub home page
2. Strategizing the User Experience and also User Interface related with the way supplier and distributor register in our
platform.
3. Creating the user experience for login and sign up journey, doing integration between Tokopedia Digital Solution’s
platform and also user’s account in marketplace.
In this project, I collaborated with 3 product designers (Kamila, Yoga , and Fahmi) during the early ideation stage, 3 product management leaders ( Iman Cinderamata, Hartono, Novella) and 1 product manager (Shabirin) throughout the entire project. For usability testing, I collaboarted with 2 researchers (Satkar Ulama, and Maria Asumpta) during the entire evaluative research process.
Problems
1. The old landing page was outdated
The website is expected to be accessible for both supplier and distributor. But the problem is, the information exist in
the old website doesn’t represent that both of users could register in this platform. So, the challenge was how to
communicate both supplier and distributor that they could become supplier and distributor in Tokopedia.
2. The registration of supplier and distributor’s in Tokopedia is still manual.
The old website just have CTA “Register now”, and it will be directed to google form which it will become more
painful for BD team to do the data sorting in google sheet because of the human error.
3. The experience of login journey still doesn’t exist in the platform.
After users registered as supplier and distributor in Tokopedia, they will be given the access into a dashboard to monitor
the transaction activities. If users have access to login and access the dashboard directly, it will increase the user’s
retention rate.
4. The existing website convertion rate metrics could be improved.
The old website doesn’t tell clearly the mechanism to become supplier and distributor in Tokopedia. They also have
problem regarding the terminology of “Partner”and “Client” (the terminology used before supplier and distributor), so
that it was really hard for users to digest the meaning behind that terminology.
Goals
This project has a goal to improve the integration experience and help the B2B2C clients to start their business as soon as possible. Therefore, integration time become the priority metrics to determine success.
However, the clients waiting time for testing preparation is also important metric that we also want to track as it will support both clients and Nakama during the integration process. Here are the success metrics :
Speed up the integration time by 40 - 50 % (40 - 60 working days)
Reduce client’s waiting time by 80% (20 working days)
Increasing the user’s convertion rate (the amount of supplier and distributor who register in our platform).
Impact
Yeay, we launched the landing page on June 2022 ! For confidentiality reasons, I don’t disclose all of the data. So far, the performance of the live website could speed up the integration time by 40 - 50%. The moment it goes live, we immediately saw a reduce of clients working time by 80% from our landing page, compared to the old website.
This improvement is expected to onboard 8 - 10 clients per month, which means that the number will contribute to Tokopedia’s client growth.
Early Ideation
My Role
Product Designer
Tokopedia digital solution is a platform that helps to connect between supplier (the one who supply digital goods in Tokopedia) and distributor (the one who order digital goods from Tokopedia) , so that Tokopedia helps both parties to grow their business. In the new website’s user interface, we set out to solve problems below within 6 months. The results were amazing.
I lead a brainstorming session together with the product managers and designers to gathered inspiration on how other brands craft their landing page, and shared what we like about them.
Then, we did a quick solution sketching together to end the session. In the brainstorming session, we also dicussed about the terminology and informations improvement, here we gathered the ideas together on how it should be improved before we test it to users.
After that, I tried to make the new user flow and information architecture from what we’ve discussed before I jumped out into wireframing process. After I create user flow and IA, I did alignment with stakeholders to ensure that it meets requirement.
This is how the early wireframes looked like. On the left, we mapped out the purpose of each section, aligning with our design principles. The primary goal is to convince users to become supplier and distributor through the website. We then turn these early ideas into high fidelity designs. Experimented with different shapes and layouts to see which exploration does work.
Here's the outcome after several iterations and explorations, though this is not the final design. We needed a design that is solid enough to kickstart the user test, so we can learn what people really think about the landing page.
Usability Testing
I conducted user tests with 5 partners (both supplier and distributor) outside Tokopedia with in-depth interview session. I wrapped UT question and then reviewed by researchers to craft more accurate questions. Here are the UT plan :
Background and Objective
The objective to revamp the platform is to increase the number of potential supplier and distributor who register into our platform, that’s why we tried to make the experience become easier and faster. And also we tried to make the terminology exist in the platform to become easier to be digested by users, so that in the objective of the session was to validate the design in the terms of UI/UX and also terminology.
Respondent Criteria
Distributor
Supplier
Key Information Area to be Tested
UT for home page and sub home page
UT for supplier and distributor’s registration
UT for login into platform
Timeline
After hearing that there are several improvements regarding our design, I decided to re-design the platform based on UT result. Here are the usability testing result :
A. Home page/ Main Landing Page
Provide clearer product naming
Add testimony section
Specify FAQ content
B. Sub Home Page - Solusi Supplier and Distributor
Add testimony section
Add dashboard illustration
Improve illustration on section “Beragam produk digital” and “Langkah mudah”
C. Onboarding Journey - Login with Tokopedia Account
Improve login title copy to make sure that users do not using their personal account.
D. Onboarding Journey - Registration Section
There are several improvements regarding this section :
Add stepper
Add company’s phone number and make it mandatory
Add registration status on home page
Add tooltip on email field
Add CTA “Hubungi kami” after SLA breached
Providing a clear entry point to the dashboard
Final Designs
Before and After
Before the redesign, there was lack of focus on what Tokopedia Digital Solution’s offered. The website was cluttered and no login experience for users. It does not do justice to the platform's unique value proposition. Here's a detailed walkthrough of what I improved post-testing.
A. Home Page Final DesignBefore and After
1. Home page - Login Journey Improvement
CTA “Log in” can be seen throughout the landing page. Before in the old version, users can’t login into account, but now users can do it. The purpose is to add an entry point for users to access the dashboard that will be useful to monitor the transaction’s activities for supplier and distributors.
2. Home page - Adding Supplier and Distributor’s Section
In this section, we emphasize the role differences between supplier and distributor. We do this because we want to let user’s know what they can do as a supplier and what can they do as distributor. If they already know the differences, then we expect it will help them to make decision.
3. Home page - “How it works” mechanism
The old design doesn’t have this section. We expect by adding “How it works” section, it will help users to understand a little bit more about the process of being a supplier or distributor in our platform.
4. Home page - Adding Frequently Asked Question Section
Adding this section is really important since the registration and integration process between supplier and distributor is quite complicated, so we expect that this section could help them to understand more about the registration process.
B. Sub Home Page Final Design
There are several improvements about sub home page’s final design :
Giving a clear communication about how these products help them as a supplier or distributor
In “Solusi Supplier” sub home page, we add our unique selling preposition that will help users to increase convertion rate in our platform, and also we explain how does it work if they become our supplier.
In “Solusi Distributor” sub home page, before it being revamped it was too texty and outdated. So I changed the add more informations such as what’s the benefit to become a distributor for them and explaining “how it works?” when they already become our distributor to make it clear that users understand what they will do once they join Tokopedia Digital Solution.
C. Login with Tokopedia Account Final Design
In the old website version, we didn’t add the “Log in” CTA, while in the new version we add Log in CTA as the entry point for users to access the dashboard, because in the next phase of ultimate version we will try to do integration between Tokopedia Digital Solution and also supplier/distributor’s dashboard.
D. Registration Section Final Design
Finally, I improved the final design, because the old design was too crowded on the page with too much illustrations and text, while in the new version I tried to simplify the user interface by make it looks clearer, simple and minimalist so that it could be easier to be filled by users.
Future Steps
Here are our future plans for Tokopedia Digital Solution :
Continue to convert supplier and distributor to the platform
After launching, we saw that our metrics still show a large number of people browsing https://www.tokopedia.com/partner[**.**](http://myfave.com/deals) This is due to many of our visitors landing on home page and sub home page finding their needs.To maintain and update the platform
We wil ensure that the information offered will keep up to date based on the user’s needs.To enhance integration
We wil ensure that the information offered will keep up to date based on the user’s needs.
I really enjoyed the process from ideation, design, testing to development of this project. Couldn't have done so without the amazing team at Tokopedia! Thank you for reading through, I hope you enjoyed learning about my design and thought process. :)