Internship Project
2024
This redesign project reimagines the Gojek app experience to simplify navigation. Through iterative wireframing and prototyping, I developed a cleaner, scalable interface that improves daily task efficiency while preserving Gojek’s strong brand identity.
Solo Project
Daffa Nazhiiff Muttahar
UI/UX Designer
Duration
2 Months
2 Jul - 13 Sep 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
As Gojek evolved into a full super app, the home interface became increasingly crowded with services, promotions, and secondary actions.
This density created three core problems for everyday users:
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
Auditing Current App
To gain deeper insights into Gojek’s existing experience, I conducted a comprehensive audit assessing its navigation flow, interface clarity, and overall usability.
Analyzing Similiar Apps
I analyzed several comparable services to identify best practices and innovative features that could be incorporated into my redesign.
Ideation
Based on the ideation process, I restructured the navigation to make core services easier to access and reduce visual complexity. The following sitemap comparison shows how the original structure was simplified into a more focused and task oriented layout.
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.
Auditing Current App
To gain deeper insights into Gojek’s existing experience, I conducted a comprehensive audit assessing its navigation flow, interface clarity, and overall usability.
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 translated the core problems into low fidelity layouts, focusing on simplifying the home structure, prioritizing the four primary services, and creating a more direct transaction flow before moving into visual design.
Prototyping
Since the overall layout and structure were already clear, I moved into flow prototyping. This allowed me to quickly test how the main services were prioritized, how the navigation felt, and whether the transaction flow was easy to follow.
High Fidelity Mockups
At this stage, I refined the typography, spacing, and component behavior across the key screens. The focus was on creating a simpler home experience, highlighting the most frequently used services, and building a consistent visual system.
User Testing
To validate the redesign, I conducted usability tests with a small group of users. The sessions focused on how easily they could access the main services, understand promotions, and complete transactions. The feedback helped refine the navigation, improve clarity on the home screen, and simplify the overall flow.
Design Systems
Color Palette
Used a warm orange as the primary color to reflect energy, approachability, and everyday mobility. Supporting yellow accents enhance highlights and promotions, while blue tones provide balance and clarity for functional elements across the interface.
Primary
Neutral
Accent
Typography
Plus Jakarta Sans
AaBbCc
The fluffy kitten chased the red laser dot
0123456789
Plus Jakarta Sans delivers strong hierarchy with clean, modern, making it ideal for headings and primary elements.
Conclusion
The redesigned Gojek interface focuses on clarity, speed, and everyday usability. By prioritizing the most used services, simplifying the layout, and reducing visual noise, the experience becomes more direct and easier to navigate. These improvements help users complete tasks faster while maintaining consistency across the interface.
Reflection
Real Usage Drives Structure
Prioritizing the most frequently used services helped reduce decision time and made the home screen more intuitive.
Simplicity Improves Speed
Cleaner layouts and fewer visual distractions allowed users to move through tasks with less friction.