View Detail
TOP VALUE
Project Overview
Topvalue Corporate Co., Ltd. is a Thailand-based e-commerce platform positioned as a full-scale online department store. The website, topvalue.com, aggregates a wide variety of products across multiple categories, enabling customers to browse, compare, and purchase products online at competitive prices. 🛍️
This project focuses on redesigning the Topvalue application to improve overall usability and visual consistency. The existing app had multiple UX and UI inconsistencies across screens, which affected user experience and brand perception. The goal was to refine key user flows while working within the existing design system.
Timeline
2 Months
June 2023 - Aug 2023
My Role
UX/UI Designer
UX Research, UX improvements and feature implementation
Analyzed existing UX/UI issues across core screens
Redesigned key user flows and interfaces
Extended the existing design system with new UI patterns
Ensured visual consistency and usability improvements
Collaborated with developers for implementation feasibility
Prototype
Empathize
Research & Insights
Through interface audits, usability reviews, and flow analysis, several key issues were identified:
01
Inconsistent UI patterns across similar screens
02
Lack of visual hierarchy causing user confusion
03
Navigation patterns that required too many steps
04
UI components not aligned with current user expectations
User Personal
Problems
Problem 01
Inconsistent UI and visual styles across screens
Confusion about next actions in certain user flows
Problem 02
Unclear feature and product information
Too many steps in navigation, causing frustration
Define & Ideate
UX Strategy & Key Decisions
The UX process focused on improving clarity and efficiency:
01
dentified critical user flows with the highest impac
02
Simplified navigation and reduced unnecessary steps
03
Standardized interaction patterns for better learnability
04
Balanced business requirements with user needs
User Journey
Goal Statements
Goal 01
Purchase products online quickly and easily
Clearly compare products and prices
Goal 02
Feel confident about product authenticity and reliability
Avoid complicated or time-consuming steps
Prototype & Test
Low - Mid Wireframes
I started with Low-Mod Wireframes to explore different layout structures and navigation patterns. These wireframes focused on designing the Homepage, Product List, Product Detail, Cart, and Checkout to be simple, intuitive, and fast—ensuring a smooth and frictionless user experience.
Typography & Color Theme
High-Wireframes
Refined layouts using clearer spacing and alignment
Improved typography and visual hierarchy
Introduced new UI components that extend the existing design system
Ensured all designs followed brand guidelines and design standards The focus was on improving aesthetics without sacrificing usability.
Before → After Transformation
Homepage
The original homepage suffered from visual density and inconsistent hierarchy, which reduced content clarity and promotional focus.
The redesign introduced a structured spacing system, improved visual hierarchy, and modernized UI components to enhance scan-ability and reduce cognitive load.
As a result, the homepage now delivers clearer content prioritization, stronger promotional visibility, and a more scalable design foundation.
Category Menu
The previous grid-based category layout created visual overload and lacked hierarchical clarity.
The redesigned structured accordion improves scalability, reduces cognitive load, and enhances navigation clarity for complex product
Product list
The previous layout suffered from visual density and competing hierarchy between banner, category shortcuts, and product listings.
The redesign improved content prioritization, refined card spacing, and introduced clearer filtering controls to enhance product discoverability and scan efficiency.
Product detail
The previous product detail page presented comprehensive information but lacked clear action prioritization.
The redesign shifted the focus toward product immersion and conversion by enhancing visual hierarchy and introducing a prominent call-to-action area.
Checkout
The previous checkout layout presented all information in a continuous structure, increasing cognitive load during the critical conversion stage.
The redesigned version introduced clearer section grouping, enhanced order summary visibility, and a stronger primary CTA to streamline the purchasing flow.
Topvalue
Download Now!!
Shop a wide range of products online, including electronics, IT gadgets, home essentials, and lifestyle items.
