Interested in what we do?
Let’s have a talk, and see how together we can take your brand to the next level.
Blogs · UX
Redesigning E-Commerce Purchase Journey with UX Research
Nowadays, E-commerce platform has become a main options for most of people to buy their product needs. Last year we had the opportunitiy to help ID Marco to redesign a e-commerce platform specifically created for government employee which called TokTok.id.
As a government employee (PNS), they have the benefits to do groceries shopping with a factory product price through the regional cooperatives (KOPERASI). To facilitate them with online shopping experience, KORPRI launched TokTok.id as an e-commerce platform where government employee can purchase the products online. Now every governement employees can directly order products from the suppliers and will be delivered straight to their doorsteps. Last year, we had the opportunitiy to help ID Marco to redesign the Tok-Tok Platform to give the right e-commerce purchase journey experience for government employee.
Government Employee
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.
In Indonesia, some of the e-commerce like Tokopedia, Bukalapak, and Shopee are became a “go-to” online shopping platform for many users because of the online shopping experience that they offers. Not only because of the quality of the product and their services, these e-commerce are succesfully delivered the right Design for the users. According to an article in UX Planet, there are four UX key aspects which will determine the user purchase journey experience in e-commerce:
To make sure we fulfilled all of the key aspects, our design team decided to redesign the purchase journey with these goals:
In the previous article, already write how important the User Research need to be conducted before our team decide to start the design process. Most of the times we thought we understand user needs and how they will use the design, but the actual scenario are likely will be much more like this:
Source: Springboard
To get the actual insight about our user needs, we conduct a user research to understand about government employee 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:
User Research
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:
Key Findings
By conducting qualitative interview with government employee, these are the things which we can learn from the research:
After we summarize our key findings from the research, we can learn who are our buyers and what kind of experience that they really need. Our design team starts to design the platform by putting their design output as an answer to the users needs and the business goals which we want to achieve with this platform.
Source: Slide Model
These are some of the pages which our team manage to redesign to improve their purchase:
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 Page
Product description section contain the informations about Product Availability, Promo, and Differences between the normal and discount price (if there’s any).
Product Description
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.
Product Review
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.
Promo Information
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.
Related Products
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.
Supplier Products
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:
Checkout Page
This sections shows every product price which includes in the cart with the suppliers name who will deliver the product.
Shopping Cart Details
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.
Delivery Options
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.
Promo Code
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.
User Address
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 2 sections:
Payment Page
We give user options to accomplish the payment process with these methods:
Payment Method
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.
Grand Total
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.
ID Marco
Our Team
