How might we raise recycling awareness while users shop online?
The Problem - Adding new information to existing user interfaces
The government requires e-commerce to display an electrical recycling statement. However, how to add the statement to a flow?
The Goal - Preventing information overload
Business Goal - Increasing recycling awareness
The government wants to increase recycling awareness, so they require e-commerce to add an electrical recycling function into the shopping flow.
Design Goal - Keeping it simple without interrupting the users
I have to add the electrical recycling function to purchasing flow to let users know. However, I need to help users focus on purchasing items without interrupting them.
01. / APP USER INTERFACE DESIGN
Before
After
Design Method
Tier 1 (The top of the floating page)
Name of the product, product picture, and retail price(+)I locked the first tier and put the remaining information into a scrollable page below it. Besides making the process very clear, this also provides a convenient space to add additional details without disturbing the buying experience.
Tier 2 (The bottom of the floating page)
Shipping method and order quantity Information about recycling large appliances and the additional information I want to add to the floating layer.
APP UI DESIGN
I achieved my goals by adding the additional text and restructuring the tiers on the floating layer. By doing this, I made the buying process much clear to the user and also made it convenient for Momo to add product information as necessary.
02. / MOBILE WEB USER INTERFACE DESIGN
After
Mobile Web DESIGN
The method I used to enhance the mobile app is similar. I essentially wanted to make sure that the user experience for both platforms was identical, so that users could switch between platforms seamlessly without having to feel frustrated and waste time relearning how to order products.
Before
03. / PC-WEB USER INTERFACE DESIGN
Before
After
WEB UI DESIGN
I added additional text and changed the font spacing and height for the floating layer, as well as making the font on buttons uniform. This instantly made for a floating layer that was aesthetically pleasing and highly readable.
