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
What is Gojek for?
Nazzh's Store is a fast, secure, and easy top-up service for online games. You can recharge gems, coins, or favorite items with multiple payment methods, delivered instantly to your game account.
Nazzh's Store show for web
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.
Crowded Interface
Dense text walls and 50+ tiny elements per screen made property scanning impossible
Confusing Checkout
Buried CTAs, unclear total costs (hidden fees), and non-linear payment flow caused 60% cart abandonment
Poor Comparison Flow
No side-by-side property view—users had to tap through 5+ screens to compare prices/amenities
Solution
Based on these problems, the following improvements were made to create a cleaner, more efficient, and user-friendly shopping experience.
De-Cluttered Discovery
Replaced 50+ tiny elements with interactive property cards (60% hero image, 3-line key info max) and one-tap filters ("Beachfront", "Pet-Friendly") with live price animations.
Swipe-to-Compare Hub
Introduced horizontal swipe carousel showing 3 properties side-by-side (price/rating/amenities), eliminating 5+ screen taps—users now compare in seconds.
Transparent Linear Checkout
Live cost calculator (base + taxes + fees auto-summed), prominent pulsing "Book Now" CTAs, and calendar heatmap for best-price dates, reducing cart abandonment friction.
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.
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
Search Bar
Category/Filter
Detail Information
Payment Overview
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.
Key insights showed that users often complained about unreliable payments and delayed transactions, while still valuing a smooth and simple flow. They prioritized convenience and security, but in practice relied on web platforms like Codashop despite frequent issues. Emotionally, they felt excitement when transactions succeeded but also frustration with cluttered UI, poor connections, and unclear error messages.
This mapping connected functional pain points with emotional needs, guiding which areas to prioritize in the redesign.
Affinity Mapping
I grouped recurring themes into clusters to reveal overlapping frustrations and needs.
This showed how reliability, clarity, content, and social features are interconnected, guiding what to prioritize in the design.
User Journey Mapping
To really see what user go through, I mapped their top-up journey step by step. Walking through each stage revealed not just the flow, but also the frustrations that kept getting in the way. From here, it became clear that the journey highlighted the need for:
A smoother entry flow that reduces repeated logins and makes getting started effortless.
Simpler navigation and categorization, so players can quickly find the vouchers they need.
More trustworthy transactions, with faster confirmation and fewer failed attempts.
Post-purchase engagement, like promo or event updates, that turn a simple top-up into an ongoing connection.
Site Map
As patterns from the journey began to take shape, I wanted to see how everything connects. The sitemap refined the flow uncovered during the journey mapping, outlining a structured path that balances clarity and function. Each section was designed to minimize friction and guide users toward completing their goals efficiently.
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
Neutral
Accent
Typography
Be Vietnam
AaBbCc
The fluffy kitten chased the red laser dot
0123456789
Plus Jakarta Sans provides clean shapes, high readability, and strong visual hierarchy. Its modern tone matches the product’s digital identity while maintaining professional clarity in UI.
Satoshi
AaBbCc
The fluffy kitten chased the red laser dot
0123456789
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.