UI/UX Design
Hover experience
Restructure the information to help everyone understands sustainability plan
Restructure the information to help everyone understands sustainability plan
Melio, 2021
Define Problem
Competitor Research
Wireframe&Mockup
Prototype
Usability Testing
CEO
CTO
Product Manager
Full-Stack Engineer
Sustainability Specialist
Figma
Google docs
Melio is a company helps people make climate-friendly decision easier through
web extension. In this project, I turn the sophisticated information into clearer and
easier to understand content.
Original design
Avoid using Jargon, and communicate our
information with 3 phases.
Phase 1: Give a hint is this product recommended or not
Phase 2: Use simple and intuitive language
Phase 3: Detail explanation
At first, I had zero knowledge about what these certifications and targets are, so I had a chance to work with Sustainability Specialist to understand why this information is important and what is users really need while they make purchase.
Furthermore, I tried varying layout and discuss with PM, Sustainability Specialist and Tech Lead to find out which one display clearer information and easy to read.
Separating product and company factors
Rating every products with 3 fixed factors
Rating products with scores
Rating items with product and company sustainability
Only show relative 2 items, others hide in "see more" interaction
Different visual layout
I was responsible for the interface design, user experience, information display and the interaction design. This outcomes brings an easier understanding information structure, and fluent usage experience.
