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
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.
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.
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 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.
Bottom Navigation Bar
Wallet Overview Header
Search Bar
Category Filter
Service Grid Menu
Store Information Header
Promo Overview Header
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.
Bottom Navigation Bar
Wallet Overview Header
Search Bar
Category Filter
Service Grid Menu
Store Information Header
Promo Overview Header
Empathy Mapping
To understand user frustrations and motivations in the topup journey, I mapped what they were saying, thinking, doing, and feeling.
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 moved forward with transforming rough ideas into low-fidelity wireframes. The goal of this stage was to define layout hierarchy, navigation structure, and core functionality before moving into visual design.
Prototyping
Instead of starting with low-fidelity prototypes, I moved directly to high-fidelity prototyping to accelerate validation. Since the layout and structure were already defined, hi-fi flows enabled faster usability testing and clearer feedback.
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
Accent
Accent
Accent
Accent
Neutral
Typography
Plus Jakarta Sans
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.