Internship Project
2024
This redesign focuses on making the shopping experience feel simpler and more intuitive. By cleaning up the homepage, improving how product information is presented, and simplifying the checkout flow, users can browse, compare, and complete transactions with less effort and confusion.
Solo Project
Daffa Nazhiiff Muttahar
UI/UX Designer
Duration
2 Months
13 Sep - 2 Nov 2024
Tools
Figma
Miro
Problem
Before starting the redesign, I identified several key issues that were affecting the overall user experience, especially in how users browse, understand product information, and complete transactions.
The homepage feels too crowded
Too many banners and promotional sections appear at once, making it hard for users to focus.
Product information isn’t easy to scan
Important details like price, variants, and specifications are not clearly structured, which slows users down.
The checkout flow feels confusing
Users need to go back and forth to review shipping costs, discounts, and payment details, making the process feel less smooth.
Solution
Based on these problems, the following improvements were made to create a cleaner, more efficient, and user-friendly shopping experience.
More focused homepage
The layout is simplified by reducing visual clutter and highlighting the most important features.
Clearer information structure
Product details are reorganized so users can quickly scan key information like price and variants without extra effort.
Straight through transaction flow
The payment flow is redesigned to be more linear and transparent, so users can clearly see the total cost
Design Process
Gathering Requirements
At the beginning of this project, I focused on understanding how users interact with the Tokopedia app, especially during product discovery and checkout. The goal was to identify friction points that slow down decision-making and reduce transaction confidence.
Through initial observation, several issues became clear, including a cluttered homepage, unclear product information structure, and a complex checkout flow that requires users to re-evaluate details multiple times.
These findings helped define the main objective of the redesign: to create a cleaner, more structured, and user-friendly shopping experience.
Bottom Navigation Bar
Wallet Overview Header
Search Bar
Category Filter
Service Grid Menu
Store Information Header
Promo Overview Header
Research Discovery
From further analysis, I found that the current experience relies heavily on promotional content, which often overshadows essential features and creates visual overload.
Users also struggle to quickly scan product details due to inconsistent hierarchy, making it harder to compare products efficiently. In the checkout process, the lack of a clear flow leads to repeated verification of pricing, shipping, and discounts.
To validate these insights, I identified key user needs:
A clearer and more focused homepage
Better structured product information
A simpler and more transparent checkout flow
Bottom Navigation Bar
Wallet Overview Header
Search Bar
Category Filter
Service Grid Menu
Store Information Header
Promo Overview Header
Ideation
To better understand user behavior, I mapped out what users think, feel, and do during their shopping journey.
Users often feel overwhelmed by excessive content on the homepage and want a faster way to find relevant products without distractions.
This highlights the need to reduce cognitive load and build user confidence throughout the transaction process.
Current Website SiteMap
This gave us valuable insights on how we can improve content organization and hierarchy, navigation structure, and content gaps or redundancies to inform our design decisions and improve overall user experience.
Updated Website SiteMap
Promo pages that were previously split across multiple subpages are now consolidated into a single structured flow. The Homepage service grid is reorganized into clearer service categories.
Wireframing
I translated initial ideas into low-fidelity wireframes to define the core structure of the experience. The focus was on establishing a clear layout hierarchy, simplifying navigation, and mapping out the main user flows without visual distractions.
By removing unnecessary details, I was able to focus on how users interact with key elements such as product browsing, wishlist, and checkout. This helped ensure that the foundation of the design was functional, structured, and easy to navigate before moving into visual design.
Prototyping
Instead of spending too much time on mid-fidelity iterations, I moved directly into high-fidelity prototyping to better simulate the real product experience. This allowed me to test how users navigate through the app, especially across homepage exploration, product interaction, and checkout flow.
With key layouts already defined, prototyping helped validate whether the redesigned flow feels more intuitive, faster, and less confusing, particularly in reducing friction during decision-making and transactions.
High Fidelity Mockups
In this stage, I refined the visual design by applying a consistent system across typography, spacing, and component behavior. The goal was to create a cleaner and more focused interface, reducing visual clutter while improving readability.
Special attention was given to product presentation and pricing clarity, ensuring users can quickly scan important information.
These high-fidelity designs serve as a foundation for building a consistent and scalable UI system for the platform.
User Testing
To ensure the design worked well for users, I conducted usability tests with a small group of each. The feedback helped refine navigation and clarified how announcements and events were displayed.
Design Systems
Color Palette
Used a combination of soft purple to evoke feelings of trust and clarity.
Primary
Accent
Accent
Accent
Accent
Neutral
Typography
Be Vietnam
Satoshi
Conclusion
This redesign highlights the importance of clarity, structure, and simplicity in creating a better shopping experience. By reducing visual clutter on the homepage, improving how product information is presented, and simplifying the checkout flow, the overall journey becomes more intuitive and efficient.
Focusing on what truly matters—such as price visibility, product clarity, and a transparent transaction flow—helps users make faster decisions with less confusion. As a result, the experience feels more seamless, trustworthy, and aligned with user expectations.
Reflection
Simplicity Improves Decision Making
Reducing unnecessary elements and focusing on key information like price significantly improves how users make decisions. A simpler interface helps users reduces cognitive load during checkout.
Clarity Builds Trust
Clear and well-structured product information plays a big role in building user trust. When users can quickly understand pricing and details, they feel more confident moving forward with their purchase.