Internship Project
2024
In 2024, during my internship, I helped design a top-up platform concept to enhance usability and ensure a seamless user journey. The project focused on intuitive navigation, simplified payments, and a consistent design system for confident transactions.
Solo Project
Daffa Nazhiiff Muttahar
UI/UX Designer
Duration
2 Months
2 Nov - 24 Dec 2024
Tools
Figma
Miro
What is Nazzh's Store 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
Game top-up applications often face visual inconsistency, unclear contrast, and a slow performance. These issues lead to a frustrating user experience, delay the transaction process, and reduce user trust in the platform.
As an emerging solution, Nazzh Store set out to deliver a seamless, visually consistent, and optimized platform that rebuilds user trust in game 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
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 my internship project on Nazzh Store, I focused on understanding how users currently interact with top-up game platforms and where the experience often breaks down.
Through this process, I discovered recurring issues: inconsistent visuals, poor readability due to weak contrast, and slow performance that made transactions feel unreliable. These findings became the foundation for my design direction.
From there, I defined clear goals—building a cohesive and accessible interface, ensuring smooth performance across components, and delivering a trustworthy experience for users. This groundwork shaped the next steps in mapping the user journey, prioritizing improvements, and creating design solutions aligned with user needs.
Research Discovery
Early observations revealed that many top-up platforms lacked a consistent design language and often relied on cluttered layouts that made navigation confusing. In addition, users faced unclear contrast in key sections, leading to difficulty reading prices or verifying top-up details.
To gain deeper insights, I reviewed existing competitor platforms and gathered feedback from peers who frequently purchase in-game credits. These findings highlighted the need for:
Clearer visual hierarchy to guide user actions.
Improved readability through balanced color contrast.
A faster and more reliable flow that builds user trust during transactions.
Search Bar
Category/Filter
Detail Information
Payment Overview
Empathy Mapping
To understand user frustrations and motivations in the topup journey, I mapped what they were saying, thinking, doing, and feeling.
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 finalized the visual layout, typography scale, spacing rules, and component behavior. These hi-fi mockups also served as a reference for building a consistent UI system before development.
The application is currently under development.
User Testing
To ensure the design worked well for gamers, 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 blues to evoke feelings of trust and clarity.
Primary
Neutral
Accent
Typography
Plus Jakarta Sans
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.
AaBbCc
The fluffy kitten chased the red laser dot
0123456789
Conclusion
Game top-up applications often face visual inconsistency, unclear contrast, and a slow performance. These issues lead to a frustrating user experience, delay the transaction process, and reduce user trust in the platform.
Reflection
User Feedback is Essential
Continuous feedback from the end-users ensured the platform met their needs
Design Meets Function
Optimizing visuals and layout balance improved clarity without sacrificing responsiveness.