Seckill
Design Competition: Live-commerce app new feature design
Client
Duration
Alibaba
10 Weeks
Team
4 Designers
Role
UX Designer Lead
Pay
with
1-Click
Personalized
Notification
In this project, we designed 2 features to improve customers experience in live-streaming shopping.
1. Pay with 1-Click - paying an item in the live-commerce streaming becomes lightning fast.
2. Personalized notification - You won’t miss your desired products even if you temporarily leave the streaming session because you will get notification from us.
background
What's Diantao and live-commerce?
About the design competition
My role
Streaming Section
Chatting
Product
In the Diantao X Zhiqun 2022 Design Competition, Diantao has invited more than 100 designers to make it better. Teams can select multiple dimensions to optimize the platform. I teamed up with a group of 4, then we came up with 2 solutions for 2 major pain points that we spotted through our research.
Diantao, Alibaba is a live-commerce shopping app. Sellers and influencers can promote their products in live streaming special sale. Product’s price is relatively low compared to normal times.
As the group leader, I arrange tasks for three designer team members. I participated in most UX research, including marketing research, user research, competitive analysis, etc. I led the team to brainstorm, evaluate, and come up with 2 solutions. I did all of the wireframing, prototype, flow chart, and mockups for the final solution.
the problem
1. How do we improve the checkout speed in the intense live shopping spree so buyers don't suffer from the lengthy checkout process?
Shopping in live streaming could be intense because plenty of people want to buy cheap products, which is limited. Consumers always need to beat others to purchase a product, and they feel anxious.
2. How can consumers get back on time for their desired product during the live-streaming session so they won't miss the live sales?
A streaming session can be very long, like 3-4 hrs. Consumers can't stay all the way to the end most of the time. They usually miss the schedule when they leave the steaming room.
Design Process
One of the biggest challenges of this project is to define the problem. We will have to find the problem that we want to solve through the research and choose a design path (UX Research for 4 weeks). The only prompt we got was to "Optimize the Diantao App."
The design path could be UI, UX design, or new feature design. We did heavy research to find the problem and opportunity.
Start date
UX Research (4 weeks)
Define problem
UX Design (6 weeks)
Solve problem
Research
Survey/interview
Persona/
User journey
Ideation
Design
But how did we decide to solve these 2 problem,
let get to the UX Research part.
UX Research
Define problem
general research
In order to find the problem, we want to understand the app deeply. This part showcases what research we did. It helps us to give the app a definition.
1. Industrial research
a. Live-commerce’s development background
b. Comparison between traditional
e-commerce and live-commerce
c. Data fact analysis
2. User research
a. Gender ratio
b. Geography distribution
c. Age distribution
3. Product competitive analysis
a. Strategic
b. Feature
c. User map
d. User interface
e. Pirate metrics (AARRR)
f. SWOT analysis
Research Content List
Users Characteristic
Gender ratio
Age distribution
Helps us to build persona
As we concluded from the user research.
Diantao’s majority users (74%) are under the age of 30. Users under 24 dominate the overall user group (45.5%). Female users share nearly 60% of the market.
Tik Tok owns different user distributions as there is no dominant age group. The ratio of male and female users is evenly distributed.
We therefore can assume that Diantao attracts younger female users and Tik Tok is more universal in the live-commerce market.
By iterating multiple times, we used the research above to create an "Elevator Pitch" to help us to understand and define the App in a more detailed way.
Diantao App Elevator Pitch
For consumers who
frequently visit the live shopping streaming and searching for good products
to pursue the needs of
buying cost-effective product and shopping efficiently.
Our app,
Diantao,
is
an online shopping platform mainly with live streaming shopping sessions.
It provides functions like
Watching and shoping with sellers and influencers in the live streaming,
browsing the hottest product in short videos
Unlike
Tiktok (Douyin),
our product
shares resources with Taobao (Alibaba).
We have a large number of live shopping stores,
professional and high-quality streamers,
comments written by hundreds of millions of customers.
survey and interview
Survey and interview helped us continue to dig into users' behavior so that we can build user models like personas and find design opportunities in the user journey
We had a data size of 51 participants in our survey. The survey has a range of 20-30 single/multiple-choice questions, depending on their own scenarios.
Quantitative - Survey
Question Samples
1. Personal info
a. Gender
b. Salary
c. Age
2. About live streaming
a. Frequency of watching
b. Type of live streaming
c. What platform
etc.
3. Buying products
a. Why buying?
b. What takes into consideration?
c. Write reviews for products?
d. Checkout immediately?
e. Why give up paying
etc.
4. Preference
a. Why watching
b. Preferred feature
c. How do you feel?
e. Ever use replay?
etc.
What did the survey told us? Here are some important takeaways.
1. About 62% of users place orders immediately when they see a desired product. The rest of them need more time to think about it.
2. 85% of users take price advantage into purchase consideration.
3. 69% of users think product genuine is important.
4. 50% users fail to place orders because items sold out before they pay.
We found the numbers above very interesting, which is why the upcoming interview is important. We will ask questions based on the survey results.
Quantitative - Survey
We interviewed 7 participants with 23 questions. The interviewee‘s age range is from 23 to 29. Salary range from 1500-5000 USD. Occupation: Teacher, Marketing Specialist, Architectural Designer, Educational Worker, etc.
But how do we utilize those interview results and modeling users?
We took several steps to summarize them into 2 personas.
Step 1: Share info
As a team we share and discuss not only how our interviewees feel, but also how we feel.
Step 2: Sorting
We derived 6 key behavioral variables (from interview questions) in order to split people into different groups. Group A and B.
Step 3: Empathy map
We created empathy maps to for each group and summarized their characteristic.
Step 4: Prepare for the personas and user journeys
Think of group A and B as 2 different person.
Create 2 personas base on their behavior. We named them and hope that they can represent a typical group of users.
Group A as Anna
A new grad professional
Consider budget and deals as the top priority
Group B as Bella
An experience professional
Looking for high quality product
Persona 1 - Low budget student
Anna
Consider budget and deals as the top priority/has enough time to watch
23 years old Middle School Teacher Salary: 2500-3000 USD/Month
"I am looking for great deals and low price products. Live shopping provides better prices than normal online shopping and satisfies my needs.
Scenarios and behavior
Anna is a new grad professional with an average salary in her town. In her free time, especially after work, She loves to watch short videos and shop in live streaming. She considers budget as the top priority when shopping. However, sometimes she pays impulsively in the live streaming room because products can go out fast. In pursuit of cost-effective products, it is best to find the products she likes quickly. Otherwise, it is easier to shop on a traditional website.
Pain point
· A live session sells many products, but not all of them are targets.
· Don't know and can't check the seller's reputation
· May miss desired product when temporarily leaving the live streaming
· Some products are still expensive and out of budget
· Some products sold out too fast
Anna's user journey
Persona 2 - High budget professional
Bella
Looking for high quality product/has limited free time
29 years old Marketing Manager Salary: 4500 USD/Month
"I know what I want and am chasing great quality products. I am also open to great things that I don't know, but I will have to check the review and rating."
Scenarios and behavior
Bella is an experienced professional who has a relatively great salary. She knows what she needs to buy most of the time. She has a higher standard of a product and will research the product for more detail. Sometimes she is not rushing to check out an item. Instead, she stored it in the shopping cart and came back later. It's important for her to know the reputation of the product and the seller.
Pain point
· When checking the shopping cart, the user will need to leave the live streaming
· Missing product sometime because of leaving for work
· There's no way to check the seller's rating
· Hard to make a comparison of the same type of product
· Need to optimize the shopping cart experience
User Journey
opportunities
We summarized pain points in the personal and user journey.
There were a lot of opportunities to design.
There's too many of them.
How do we choose the best opportunity to design?
brainstorm
We rate all of the opportunities in 4 aspects:
Business value (5 pts)
User value (5 pts)
Mutual Value of Business/User (5 pts)
Potential development (5 pts)
Here are the top 3
1 Build trust between users and live rooms
2 Optimize the fluency of the process of purchasing items from live streaming
3 Improve user's experience in allocating their time more reasonably
4 Build trust for sellers and their products
5 Satisfy users social needs and make products more reliable
6 Increase the user's attention to the live room related to the shopping goal
7 Increase users' attention to unordered favorite products
Brainstorming, and choose the MVP idea to design
Here is how we generate ideas from the opportunities for reference
Rewrite opportunities to POV and HMW
3 HMW Statement
Rewrite each HMW in 7 altervative forms
21 HMW Statement
Vote for the top 3 HMW statement
3 HMW Statement
brainstorm 5 ideas for each statement
15 ideas
66 ideas
expand 4 or more ideas for each idea
(Lotus Blossom Diagram)
20 ideas
Negative selection
Sorting
10 ideas
NUF Evaluation (User value 35%, business value 35%, time cost 20%, Novelty 10%)
2 ideas
Why the process looks that complicated?
Because we want to get as many idea as we can to give solutions that solves the most urgent problem with efficient design.
Here are the 2 problems that we tried to solve.
1. How do we improve the checkout speed in the intense live shopping spree, so buyers don't have to suffer from the lengthy checkout process?
Shopping in live streaming could be intense because plenty of people want to buy cheap products, which is limited. Consumers always need to beat others to purchase a product, and they feel anxious.
We want to solve this problem because:
1. Almost every interviewee has the same feeling when they are checking out
2. Interview data shows 50% of users fail to pay because products are sold out.
3. Solving this problem could increase sales for all sellers.
Consumers who shop a lot need an efficient way to make payments.
2. How can consumers get back on time for their desired product during the live-streaming session so they won't miss the live sales?
A streaming session can be very long, like 3-4 hrs. Consumers can't stay all the way to the end most of the time. They usually miss the schedule when they leave the steaming room.
We want to solve this problem because:
1. This problem appears in both of our personas, meaning different types of users think this is one of the most urgent problems to solve.
2. It's good for buyers to allocate their time so that they won't miss any product presentations. This could increase the chance of paying.
Consumers who have clear targets need to know when the product is on sale.
Ideation and design
UX Design
solution
Solution 1: Sec-kill Payment (Pay with 1-Click)
Solving challenge 1: How do we improve the checkout speed in the intense live shopping spree?
Give consumers an option to place an order with 1-Click, without typing a password and selecting an address. No need to transfer to the Cart and checkout page. (traditional payment method requires all those processes)
Flow Chart
Checkout process before
1. Click “Buy”
2. Choose product color
3. Checkout page
3. Confirm shipping info
4. Type in password
5. Place order
Saves more than 10s
on checkout
Checkout process now
1. Click “Buy”
2. Choose product color
3. Pay
Design Rationale
We tried not to invent anything that the Alibaba system does't have. Instead, we want to utilize what the company already has and make the development process easier. So here are the reasons.
1. "Pay with 1-Click" is very similar to Alipay, Alibaba's 免密支付 (pay without password). It's the technology that the company already has. So the feature can be easily used as an API.
2. People who shop impulsively can take less time to place an order, which can potentially increase the overall sales of the app (Revenue wise).
Design Options
We are adding a button call "一键付款 (Pay with 1-Click)" to the product page. Tap the button and the order will be place immediately. But how do we design the button and where should it placed?
Option 1
"Pay with 1-Click" with Diantao's theme color.
Option 2
" Pay with 1-Click" with Alipay's theme color.
Option 3
Change the "Add to cart" button to an icon.
For each option, we chose the best combination to see how it looks.
Option 1
Option 2
Option 3
Option 2 Voted the best because
1. Alipay's theme color Blue makes the button different than the previous 立即购买 "Buy now" so that people can know the difference.
2. We keep the original combination of "Add to cart" and "Buy now." Adding a new button on the side will not ruin people's cognition of the app.
Here is the comparison.
Before
After
Solution 2: Personalized Notification
Solving challenge 2: How can consumers get back on time for their desired product during the live-streaming session?
Check the product schedule, then set a reminder for the desired product. The app will notify you when to come back to the live streaming. Buyers don't have to wait for a long time for the product.
Flow Chart
Design Options
In the "Product Schedule List" page, we added "Remind me" button. Buyers can tap that button for every product they want to see. The notification will be sent right after the previous product ends.
Option 1
Blue (Theme color of the page) as the "Remind me" button.
Option 2
Red (Theme color of Diantao) as the "Remind me" button.
Option 1 Voted the best because
1. It keeps the original style of the page.
2. Diantao's color red as the "Reminder Set" makes it clear for a buyer to see what they choose to be reminded
Here is the final result for setting a reminder.
Tap "Remind me" to set a reminder
Tap "Reminder Set" to cancel
Final Design Presentation
Pay with 1-Click
Paying an item in the live streaming becomes lightning fast.
Preset your address and payment.
Beat other buyers by "1-Click."
Step 1
Tap the product
Step 2
Check info and "Pay with 1-Click"
Done!
Save time on checkout.
More than 2x faster than the traditional way.
Originally, the checkout process requires you to select an address and payment method. A buyer who is afraid of making mistakes will double-check everything and this slows the checkout process. "Pay with 1-Click" helps you to place an order without checking repeated information. You can set up a default address and payment so that checkout can be smooth as a simple tap.
Pay with 1-Click (After)
Traditional (Before)
V.S.
Personalized Notification
You won’t miss your desired products even if you temporarily leave the streaming session.
Set a reminder,and we will notify you to come back.
Step 1
Tap Remind me
Step 2
Wait until the notification pops up
A streaming session can be very long, like 3-4 hrs. Consumers can't stay all the way to the end most of the time. They usually miss the schedule when they leave the steaming room. They don't know when the product starts and on sale.
Now, tap the "Set reminder" Button and your are free to go.
Notification will be sent once the previous product ends selling.
Demo
Reflection
Although we had very limited time for this project, we still want to learn more from it.
Pay with 1-Click
Personalized Notification
Measurement of success
Putting these 2 product into the grey scale (15% user) and test the change.
1. For buyers who has place order before and after the product launch, see if the average checkout speed increase by at least 10%.
2. For the same product in a store, see if the sold out speed increase by at least 10%.
3. For the app overall, compare the before and after total sales.
1. Compare the retention rate for all stores.
2. For stores that has same product every live session, compare the purchase rate before and after.
Risk of failure/Trade off
There are some factors that may cause the project to fail. There might also be some side effect.
1. Is it easy enough for people to set up the feature in the very first time?
2. Is it fair for buyers who don't want to use the feature? Items sold out faster than before so users who don't use it has no advantage in the checkout.
1. Will the retention rate go down because users know when to come back and they just don't watch the live?
2. Did we send the notification on the right time? Should we send it earlier? or later?
3. What if seller don't like to post their product schedule?
4. What if users don't even check the product list?
What can we do better
If we redo the product, what can we improve?
1. We could iterate the design by inviting frequent users to test our product.
2. We could test with more users and see if we found the real needs.