HSE HELLO App
Enhanced Live Shopping Player
HELLO is a live shopping app by HSE. In this project, I redesigned the livestream player, guided by feedback from viewers, creators, and stakeholders. The new player enhances the live shopping experience, allowing viewers to watch livestreams, engage with creators, explore products, and place orders seamlessly.
HSE HELLO App
Enhanced Live Shopping Player
HELLO is a live shopping app by HSE. In this project, I redesigned the livestream player, guided by feedback from viewers, creators, and stakeholders. The new player enhances the live shopping experience, allowing viewers to watch livestreams, engage with creators, explore products, and place orders seamlessly.
HSE HELLO App
Enhanced Live Shopping Player
HELLO is a live shopping app by HSE. In this project, I redesigned the livestream player, guided by feedback from viewers, creators, and stakeholders. The new player enhances the live shopping experience, allowing viewers to watch livestreams, engage with creators, explore products, and place orders seamlessly.
Key metrics
Add to cart rate
Average watching time
Engagement rate
Follower growth rate
Key metrics
Add to cart rate
Average watching time
Engagement rate
Follower growth rate
Key metrics
Add to cart rate
Average watching time
Engagement rate
Follower growth rate
Year
2023
Services
User research
Wireframe
Interaction design
Design system
Prototype
Year
2023
Services
User research
Wireframe
Interaction design
Design system
Prototype
Year
2023
Services
User research
Wireframe
Interaction design
Design system
Prototype
Problem
Streamers and viewers lack space to focus on content.
Main buttons are misplaced with huge comment field.
The checkout is clunky and lacks voucher redemption.
Viewers can't see the number of watchers or likes.
Detailed mini interactions are missing.
Proposal
Reduce highlighted products from 3 to 1.
Move the highlighted product to the bottom-right corner.
Arrange buttons horizontally next to the comment field.
Enable voucher & variation picker during checkout.
Display real-time viewer and like counts.
Before
Before
New lay out
New lay out
After
After
From title to actions
Initially, users see the stream title displayed for 3 seconds. It then transitions to action buttons, with the product button highlighting the number of products.
From title to actions
Initially, users see the stream title displayed for 3 seconds. It then transitions to action buttons, with the product button highlighting the number of products.
From title to actions
Initially, users see the stream title displayed for 3 seconds. It then transitions to action buttons, with the product button highlighting the number of products.
Follow the creator
Users see the live viewer count below the creator's name. When they click the follow button, a check icon briefly appears and fades away after 3 seconds.
Follow the creator
Users see the live viewer count below the creator's name. When they click the follow button, a check icon briefly appears and fades away after 3 seconds.
Follow the creator
Users see the live viewer count below the creator's name. When they click the follow button, a check icon briefly appears and fades away after 3 seconds.
Long-named creator
The creator section has a maximum width, with long names fading out and scrolling from right to left.
Long-named creator
The creator section has a maximum width, with long names fading out and scrolling from right to left.
Long-named creator
The creator section has a maximum width, with long names fading out and scrolling from right to left.
Activity line and messages
The activity line displays who joins or follows the creator, with a scrollable messages area below it.
Activity line and messages
The activity line displays who joins or follows the creator, with a scrollable messages area below it.
Activity line and messages
The activity line displays who joins or follows the creator, with a scrollable messages area below it.
New messages
When users scroll up to view earlier messages and new ones arrive, a hint button prompts them to return. Clicking it scrolls directly to the latest message.
New messages
When users scroll up to view earlier messages and new ones arrive, a hint button prompts them to return. Clicking it scrolls directly to the latest message.
New messages
When users scroll up to view earlier messages and new ones arrive, a hint button prompts them to return. Clicking it scrolls directly to the latest message.
Highlighted product
When the creator activates a highlighted product, it pops out from the product button.
Highlighted product
When the creator activates a highlighted product, it pops out from the product button.
Highlighted product
When the creator activates a highlighted product, it pops out from the product button.
Send messages
Users can send messages of up to 60 characters.
Send messages
Users can send messages of up to 60 characters.
Send messages
Users can send messages of up to 60 characters.
Clear screen
Users can click the clear screen button to hide all interaction buttons and focus on the live stream content.
Clear screen
Users can click the clear screen button to hide all interaction buttons and focus on the live stream content.
Clear screen
Users can click the clear screen button to hide all interaction buttons and focus on the live stream content.
Product drawer
The product button displays the quantity of items in the livestream. Clicking it reveals a list of products along with voucher information.
Product drawer
The product button displays the quantity of items in the livestream. Clicking it reveals a list of products along with voucher information.
Product drawer
The product button displays the quantity of items in the livestream. Clicking it reveals a list of products along with voucher information.
