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.
Visual Inconsistency
Inconsistent styles created a confusing navigation.
Unclear Contrast
Weak contrast made key actions harder to spot, reducing clarity.
Slow Performance
Heavy and unoptimized components slowed down responsiveness. Without proper optimization, users experienced laggy interactions and longer loading times.
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.
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.
Competitor Analysis
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:
Competitor A
Competitor A excels in usability and user satisfaction, offering a smooth experience for users. However, its feature set is only average, and pricing is less competitive compared to others.
Competitor B
Competitor B stands out with strong feature completeness and audience fit. Yet, its usability feels less intuitive, pricing is higher, and overall satisfaction from users remains moderate.
Competitor C
Competitor C provides affordable pricing and fits casual gamers well. Still, its features are limited, and user feedback reflects a mixed level of satisfaction compared to other competitors.
User Persona
After spotting opportunities from the competitor analysis, I wanted to zoom in closer to the user themselves. That’s why I built a user persona—capturing who they are, what drives them, and where they struggle. This step helped me keep the design grounded in real user needs rather than assumptions.
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.
User Flow
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.
Scenario 1:
A new user discovers Nazzh Store and creates an account to start their first top-up journey
Scenario 2:
User continues their unfinished payment process by transitioning from web to mobile
Sketch
Following the user flow analysis, I proceeded to the sketch phase as an early visual exploration. The objective of this step was to define the layout structure, content placement, and key interaction elements before moving forward to wireframes.
Part 1
This sketch illustrates the initial flow starting from user login and onboarding, continuing to product exploration. The objective is to help users quickly find and select the game they want to top up.
Part 2
This part continues the journey from entering the game ID to selecting the top-up amount, confirming payment, and completing the transaction. The process ends with users submitting a review.
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
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.
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.