As a government employee, one of the benefits that impact on their daily basis are the previlege in buying groceries and other needs which can be obtained from regional cooperatives with a factory price. With this benefit, they often did their groceries shopping in regional cooperatives rather than the supermarket. To make it more benefecial, the goverment wanted to provide them with a more convenient way in their shopping process by using Tok-Tok platform. Tok-Tok is an e-commerce platform which provide variety of products (grocery, uniforms, electronics) from different suppliers. It only allows several suppliers to sell their products exclusively for government employees with a cheaper price. In October 2018, we had the opportunity to help ID Marco to redesign the Tok-Tok Platform to give the right e-commerce experience for government employee.
Image source: Tempo
Conduct a UX & UI research and development to learn about government employee online shopping behaviour and design a purchase journey experience based on our findings.
According to McKinsey, the ways most consumers makes purchasing decisions nowadays are defined with a process called the consumer decision journey. It is a 4 phase process which start with 1st phase when the consumers start to get to know about the product (exposure), 2nd phase they continue to comparing the same product with another brand to decide which one is better and which brand they need to buy, 3rd phase they start to decide which product they want to buy and proceed the purchasing journey, finally they finish the process with 4th phase (post-purchase experience) it happens when they start to build expectations after they finish the purchase process as a consideration whether they going to repurchase the product or not.
Consumer Decision Journey
Image source: McKinsey
In our case, we need to make sure that our users (consumers) choose TokTok as their trusted e-commerce shopping platform and having a great shopping experience with the purchase journey that TokTok offers, so they want to consider to repurchase their product needs in the near future. To make it happen, our design team decided to redesign the purchase journey with these goals:
Since we have a very specific target market (government employee), the first thing that we do is we conduct this research to understand their online shopping behaviour and learn their thoughts about User Experience on e-commerce websites. This research is conducted with Qualitative approach by doing in-depth user interview with list of questions. Some of the questions which asked during the interview are:
We map our findings from the user interview based on type of buyer, how they buy their products, what products they mostly buy and what features they think are very important on e-commerce platforms:
By conducting qualitative interview with government employee, these are the things which we can learn from the research:
To achieve these goals, our team decided to redesign every pages which used by users in purchasing journey. Based on the insights which we acquire in the user research, these are some of the pages we manage to redesign:
Now, let’s take a look on some interesting design that our team create throughout these pages.
We want to make sure that the users are well intrigued and educated with the product by providing them with the product images and full informations about the product. Hopefully our users are always “good to go” when they decide to put the product in the shopping cart. We divided the informations about the product in 5 sections:
Product description section contain the informations about Product Availability, Promo, and Differences between the normal and discount price (if there’s any).
Product review sections contain purchase review from another user purchase experience. One product may contain a vary review from user in terms of the quality or the delivery time, this can happen because the product can be sent by different suppliers depends on the product stock and availability.
Asides from product promotion, user can see what voucher promo is available while they purchasing. The informations which shows in this sections contains minimum purchase requirement, voucher amount, and the voucher code which user can apply in the checkout page.
Related product will be shown in the page based on other user shopping list routine. Our aim is simply to give our users other product options which can bring to cross selling impact for the suppliers. For example, if you open a white sugar product, the related product most likely will contain other groceries product such as cooking oil, salt, and butter because most of the times people put these product in the same shopping cart to complete their monthly shopping list.
Instead of buying product from different suppliers, most of the user will find it easier to purchase different product from the same supplier because of the fixed delivery price. Buying products from different suppliers will give additional delivery price to users because they will charged with two delivery price instead of one.
The checkout page contains all of the informations about the shopping cart, some of the informations such as total purchase, suppliers, and delivery options are divided in 4 sections:
This sections shows every product price which includes in the cart with the suppliers name who will deliver the product.
User can choose their delivery methods by their own, there are two delivery options which available at this time which are Premium (suppliers courier) and Regular (general courier). The premium delivery methods can ship the product to their address in 2 to 3 days while the regular delivery methods can be shipped in 3 to 5 days after the purchase.
Every promo code can be applied by inserting the code in the checkout page. There are three types of voucher which can be applied in every purchase which are Offline Voucher, Product Voucher, and Delivery Voucher.
Since the user can insert multiple address, they can choose which address they want to use whenever they purchase their product. The selected user address information which will be used as a shipment address by the suppliers.
After the user finished checking their products and choose the delivery options, they will proceed to the payment page. In this page, user have the options to pay the products with regular payment (cash) or TokTok point which they can acquire everytime they finished their purchase. We also give users clear amount if they purchasing from different suppliers, these informations are divided in 4 sections:
If the user didn’t have any TokTok points, they can also pay with regular payment with these methods:
At the end of the journey, it is very important to give our users clarity about the total amount they will pay from every product they want to buy, promo they applied in the shopping cart, and how many deliveries will it takes to delivery every product. To summarize all of the informations, we divide total amount from every suppliers who provide the product.
By offering these new purchase journey based on our research findings, we hope TokTok will give user a simple and transparant process while giving them a great shopping experience.
After we finished the project, these are the couple things which we can learn to develop future UX & UI Design project which heavily relies on Research:
Since the project is heavily rely on research, make sure there’s extra timeline if there’s any adjustment on the research schedule. Reschedule already happens twice while we want to conduct a research. The impact cause a major pushback to the project timeline.
Research final result is heavily depend on the Target Market. Make sure the target market is determined and valid with the research objective. When we conduct the first initial research, Our first respondant didn’t give us any inisghts. This happen because we have a less specific target market.
During the research, we didn’t expect our respondant find TokTok is not appealing for them in the first place. After that we realize that every assumptions during the research should be ask and proven. Even the smallest one.
When presenting the research data, it’s better to let the data speak for itself. Over explaining or hiding the data can cause a major thinking-shift. After presenting the data, we prefer to not overthink for certain things which we don’t have to.
We successfully designed 201 screen (desktop & mobile) in 8 months development time. This project became one of our highlighted project in 2018, ID Marco is always open for our recommendations based on the research makes learned a lot to get the right design insight and execute it to fulfill the user needs.
Quick question, do you know the difference beetwen UX and UI?Answer