Challenge Chapter 7

PM Wave 12 X UI/UX Wave 19

CARTPEDIA
TOKOGROUP

PM
Arum Permata Sari PM - 211200007
Ditra Ahmad Nugraha PM - 211200034

UX Researcher
Nopitasari UI UX - 211200022
UX Designer
Petrus Pendik Subagyo UI UX - 211200038
Yohanes Giovani Agusta UI UX - 211200002
 DISCOVERY
1 Context 5 Data Validation

2 User Persona 6 OKR

3 Customer Journey Map 7 Prioritization

4 Problem Statement 8 Solution

 CONTEXT

During the pandemic, there is an increasing habit of adding items

into an online cart but exiting the app without making a
purchase, also known as cart abandonment.

Indonesian consumers admit online shopping

73% is easier than offline

5,56 spent by Indonesians opening online shopping

billion hours applications in 2021

68.8% users abandon their cart

Source : Ipsos Global Trends 2021, databoks.katadata.co.id, Baymard Institute

 USER PERSONA

Nabila always plans finances every month before payday. She likes to add items she
NABILA needs and wants into the cart to mark the item and store. Due to her habit, she has a
hard time finding which items to checkout on payday because the cart is mixed up
24 years old
with many items.
Accounting
Single Frustration Personality Like
Jakarta Extrovert
Too many choices of Ambitious Application that has
items Easily adaptable a feature to search
Has to scroll to find Bold in the cart
the goods Application that has
There is no feature a feature to group
to search goods in goods inside the
Doesn't Like
the cart cart
Cart is full
There is no feature Ease to use the e-
Scrolling to find goods in the
to group goods in commerce mobile
cart
cart application
Searching for goods in the
cart is not available

P Nabila needs an e-commerce application that provides a feature to group goods

O inside the cart, so that she does not find it difficult when she needs to checkout
V the item in the cart.
CUSTOMER JOURNEY MAP

Knowing the item was

Choosing items to be paid
Goal Adding items into the cart successfully added to the Seeing what items are in the cart
for/checkout
cart

Touch Notification of an item

Items page Cart page Cart page
Point successfully added to cart

Channel Tokopedia (iOS) Tokopedia (iOS) Tokopedia (iOS) Tokopedia (iOS)

1. Scrolling up and down to see items 1. Page scrolling

1. Browsing items 1. Viewing other products
that have been added into the cart 2. Clicking the checkbox to
Process 2. Selecting an item type from the same store
2. Choosing items to be moved to continue to the checkout
3. Adding items into the cart 2. Clicking view cart
Wishlist or removed from the cart page

Feeling Happy Happy Shocked Frustration

1. Items that need to be

1. Forgets that she has added
The price listed at the bought are mixed up by
something in the cart
Pain beginning is different when Item recommendations do items that want to be
2. Has to scroll the page to get the
Point(s) entering the item depending not match bought
desired item
on the type 2. Cart can only be managed
3. Items are no longer discounted
by buying or deleting

1. Cart category
2. Add a drag maneuver to minimize
1. Re-arrange the item page scrolling
Potential 1. Add a price range at the 1. Search product inside the
recommendations 3. Set reminder for when each product
Solution(s) beginning cart
algorithm when is paid for
4. Set reminder when items are at a
discount
PROBLEM STATEMENT

"There are more items I want to

put in the cart, but my cart has
already exceeded the 20 stores
Based on our research, some limit. I'm done exerting energy to
Tokopedia users have difficulties delete items in the cart"

in their cart such as:

their cart is already full

forgetting that they have added "I need a reminder to checkout
items I should buy"
the item into the cart
struggling to find the item to be
paid for
"Scrolling through this cart full of
items is a lot of work!
 DATA VALIDATION

We took a different approach in EPIC 2 using quantitative

research to have a better representation and visualization of
the data

From 30 respondents, 76% of

them said that they added items
into the cart because they wanted
to mark the store

From 30 respondents, 73.3% of

them said that they could not add
new items from different stores
because they had reached the
limit
 OKR

Objective Key Result Initiative

The most e-commerce Achieve 20% revenue Add a new

transactions for growth in the second feature to
Indonesians in 2022 semester in 2022 reduce cart
abandonment
 PRIORITIZATION

Justifications

Based on the research from Number of Daily Active All of the durations have the
Kredivo and Katadata Insight Users (DAU) is derived from same number because all of
Center, users were mostly the SnapCart research in these features are potential
men and coincidentally men September 2021. On the solutions of this EPIC and
also had the higher average Crazyegg website, average within the same timeframe.
transaction value. sessions with add to cart is
used to enhance the validity.

After the response from our The open rate from First Insight back in 2018
questionnaire, feature 1 abandoned cart emails was showed that a larger portion
solves the root cause of the stated on Moosend in 2021. of respondents prioritize
problem and have a larger Emails here are assumed to quality rather than price. The
impact on the profit loss or be similar as notifications on % of respondents who
recovered (not multiplied by an app. The open rate is choose price is used as the
any constant or multiplier). used as the multiplier. multiplier.
 PRIORITIZATION

Cost of Delay

Profit Loss Duration CD3

No Feature Prioritization Epic
(in Billion IDR) (in Weeks) (in Billion)

Cart
1 10.89 2 5.45 1 v2.174.0
Category

Checkout
2 Reminder 4.90 2 2.45 2 v2.175.0
(for cart)

Discount
3 Reminder 4.14 2 2.07 3 v2.175.0
(for cart)
 SOLUTION

We provide a new feature named cart category which enables users to :

Create up to Group items into Search for items

5 new carts particular carts in the cart

Why 5 carts? Because of 5 different content categories to increase sales

 DELIVERY
1 MVP and Roadmap 6 Information Architecture

2 User Story 7 Wireframe

3 Story Board 8 Prototype

4 POV dan HMW 9 Design System

5 Flowchart 10 Usability Testing

 MVP

Scope
Cart Tokopedia

Platform
iOS

Epic
Cart category
Create up to 5 new carts
Group items into particular carts
Search for items in the cart

Definition of Done
Production v2.174.0
ROADMAP
 USER STORY

As a buyer, I want to categorize my cart items, so that I can easily manage my cart

User Acceptance Criteria

Users are going to have “Unlisted” as the default cart category (replacing the existing cart),
it can be renamed but can not be deleted
Users can create up to 5 new cart categories
Users can add or move items into a new cart category with a limit of 10 stores and 20
different items in each cart category
Users can buy all of the items per cart category in one click
Users can delete the cart category and all of the items inside are deleted as well
Users can name each cart category with a maximum of 20 characters and must not be the
same as the other cart categories
Users can choose which cart category they want to add their new items to
Users can choose any cart category as the main cart and display it on the top cart page
Users can search for items on the cart page

Scenario of the given, when, and then can be seen here

 STORYBOARD

Ardhi is a college student who wants to buy a

new laptop

I need a new laptop to help me with my Found it!! I'll add it to my cart first.
study r
Once my savings are enough, I'll
te
h
la buy it right away
n t
o
m
ne
O

Cart Category

Oh darn, my cart is full. This is going to

This feature really helped!!
take some time! Wait a second, there is
I'll checkout and pay via cash on Hooray!
a new feature on Tokopedia called Cart
delivery My laptop has arrived
Category
POV and HMW

User Users aged 18 to 35 years old

P
O Need Ease of finding items in the cart

V Insight Feature to group and search for items in the cart

H How might we help them sort out the items that have already been added in the cart?

M How might we help them provide ease of payment in each cart category?

W How might we help them find items easily in the cart?

 FLOW CHART

Cart Category List

Adding the Cart Category

Renaming the Cart Category

 FLOW CHART

Deleting the Cart Category

Moving Items to another Cart Category

Searching an Item in the Cart Category

 FLOW CHART

Adding an Item to the Cart Category

Changing the Main Cart Category from Default

INFORMATION ARCHITECTURE

Tokopedia Apps

Home Transaction Items

Cart Category Cart Category List Cart

Create Cart Category

Change Cart Category

Delete Cart Category

Move Items

Search Items
DESIGN PROCESS

Empathize Define Ideate Design Testing

WIREFRAME
WIREFRAME
PROTOTYPE

Onboarding and Main Menu

PROTOTYPE

Home and Search Checkout Item Menu

PRE & POST DESIGN Cart Category List

Tokopedia sets limitations that are adjusted each

cart category, which is a max of 5 cart categories
with 10 stores and 20 different items
PRE & POST DESIGN Cart Category List

Items are now already grouped in each of their

cart category
PRE & POST DESIGN Adding the Cart Category

Cart category limitations and name regulations are listed

 POST DESIGN FLOW Adding the Cart Category

Click the cart Click "List Click "Tambah Type in the name
icon Kategori Kategori for the new cart
Keranjang" Keranjang" category and
click "Tambah"
PRE & POST DESIGN Renaming the Cart Category

Cart category limitations and name regulations are

all listed as well
 POST DESIGN FLOW Renaming the Cart Category

Click the cart Click "List Click the Rename the cart
icon Kategori menu "Ubah" category and
Keranjang" click "Ubah" on
the pop up
PRE & POST DESIGN Deleting the Cart Category

Button changes and consequential

information of deleting a cart category
POST DESIGN FLOW Deleting the Cart Category

Click the three Choose "Hapus Confirm to

dots icon on Kategori delete
the side Keranjang"
PRE & POST DESIGN Moving Items to another Cart Category

Move an item by clicking "Pindah Kategori Keranjang" on the

bottom left and move multiple items by clicking "Pindah" on the
top right
POST DESIGN FLOW Moving Items to another Cart Category

Tick the item Choose "Pindah A pop up appears, we

that wants to Kategori can click or scroll
be moved Keranjang" sideways to where the
item will be moved
NEW SUB FEATURE Searching an Item in the Cart Category

Click on the search tab Type in e.g. MS Search item result

GLOW
NEW SUB FEATURE Adding an Item to the Cart Category

Click "+ Keranjang" Choose the desired Successful pop up

cart category appears
NEW SUB FEATURE Changing the Main Cart Category from Default

Click the three Choose "Jadikan The display of the

dots icon on Keranjang main cart category
the side Utama" changes
DESIGN SYSTEM

Primary colors Font colors

#FDFCFF #000000

#42B549 #EF54B3 #C7D0D8

DESIGN SYSTEM

Button Bars

List

Text
USABILITY TESTING OVERVIEW

We conducted Usability Testing with 5 different background users. We list the results
in Miro which include each conclusion from the users.

GOAL TESTING NON GOAL TESTING KEY QUESTION

To get insight from our

proposed feature, we ask
users whether the feature
helps or does not yield any Sign up process
Did the feature help our
effects to in solving their Log in process
users?
problem and influences or Payment process
does not influence them to
increase shopping activities
on our application
USABILITY TESTING PLAN

TARGET

People aged 18 to 35 years old and familiar with e-commerce and online shopping

GOAL

Buy the desired item using an e-commerce application

PLAN

Interview the respondents with predetermined criteria

BEHAVIOR

People who like online shopping to fulfill their own needs

People who like online shopping because it is easy to use, cheap, and many options

PLAN

Expectations of users from the e- Request them to explore the app

commerce app Attempt to explore the cart category
Needs and desire of users towards the app feature
Enter the app Ask for opinions
USABILITY TESTING PLAN SCENARIO

1 User logs in to the Tokopedia app

2 Discovers available features on Tokopedia

3 Chooses an item

4 Tries to choose a cart category

5 Tries to add the item into the chosen cart category

6 Tries to organize the chosen items

7 Attempts to make a new cart category

8 Finish
USABILITY TESTING FEEDBACK

Users thought that the flow was

easy to comprehend and
implement. 3 respondents
scored 4 out of 5 and one
respondent gave a maximum
score.

Users thought the the design

was decent, validated by 4
respondents scoring a 4 and one
respondent scoring a 5.
USABILITY TESTING FEEDBACK

4 of 5 users expressed that this

feature helped them find or
search for items in their cart.

4 of 5 users expressed that this

feature would persuade them to
do more online shopping
activities on Tokopedia.
USABILITY TESTING FEEDBACK

Aspects that must be improved according to Users :

USABILITY TESTING FEEDBACK

BEHAVIOR PLUS MINUS

Users were accustomed to

User flow was easy to
using the search bar to search Lack of visualization
comprehend
for items

Users were accustomed to click

Design display was decent Display was not simplistic
all of the menu

The layout can be improved

Users were accustomed to Feature helpe users to search
because some of them do no
directly click the cart icon for items in their cart
suit the app

Users were enthused to Increase the number of visits

Display was not smooth to the
discover the new cart category or the usage of Tokopedia by
users' liking
feature users

Findings: From the feedback above, we can conclude that the improved design has
improvements compared to the first design/prototype. It is also noted that there are a few
aspects such as the display smoothness, suitable layouts, and the design cleanliness as the
highest prioritized aspects to improve. These improvements will immensely help the users in
organizing and searching for items in their cart.
 INSIGHT

From the UT that we have conducted, we asked for the users' opinions on which
design (first or improved) was better or more convenient to use. Most of the users
responded that they were more pleased with the improved design because of its ease
of use and decent design. The insights that we gained are :

REVIEW IMPROVEMENTS

Shopping and usage intensity of Tokopedia Application could be run more smoothly and
will likely increase due to the user being should be more responsive
able to organize their own cart more
proficiently
Display of the feature could be further
optimized
Online shopping activities will tend to
increase as well because this feature will
help users in finding and finally buying Improve the design to increase the appeal
their items. factor and convenience of users

This feature will also lessen related cart

problems that the users face on a daily
basis
 SUS
INSIGHT
SCORE

1 points 2 points 3 points 4 points 5 points

GOOD
SUS Score
4.5
 GO TO MARKET
1 Market Size 4 Metrics

2 Value Proposition 5 Competitor Analysis

3 Marketing Strategy
MARKET SIZE

TAM 100M+ Those who already have

items in the cart are the
All existing users Tokopedia existing users

SAM 68M+ Based on Baymard, 68.8%

users abandon their cart
Users who abandon their cart

Based on Baymard, 17%

SOM 12M+ users said a complicated
Users who checkout process made
experienced a them abandon their cart
complicated
checkout process
VALUE PROPOSITION

Value Tools to help you find your items

Proposition easily in the cart

We bring the best user experience

Positioning for customers to reduce stress
when they're seeing their cart

Messaging Organize your cart

MARKETING STRATEGY

Below The Line

Send an email as a reminder to proceed to checkout

Add badge "New" besides "List Kategori Keranjang"

Add "+ Keranjang" flow to choose the desired cart category

METRICS

Click Through Rate

Acquisition
Call to Action

Number of first new cart category created

Activation
Number of first searched item in cart

Feature Usage
Retention

Average Order Value per user

Revenue
Customer Lifetime Value

Net Promoter Score

Referral
COMPETITOR ANALYSIS

Competitor

Cart

Favorite / Wishlist

Cart category

Search for items in cart

 CONCLUSION
An issue we want to solve is cart abandonment.

With the cart category, we hope that users can manage the
contents of their cart so that the checkout process runs
smoothly and can still encourage users to buy. As a result,
payments will also be made quickly.

This will be evidenced by the increase in Average Order

Value per user.
 LINKS
Miro Figma

Trello Research Forms

UT Forms UT Feedback
 PORTOFOLIO
https://www.behance.net/nopitasari26

https://dribbble.com/givantarozz

https://www.behance.net/petrussubagiy
PM Wave 12 X UI/UX Wave 19

THANK YOU
TOKOGROUP