Optimizing Information Hierarchy for Better UX in Mamikos: A Case Study
User Interface Design / User Experience Design / App Redesign / Academic Project
Redesigned the information hierarchy in the Mamikos app to create a more intuitive and user-friendly experience.
To Begin With
What exactly is Mamikos?
Mamikos is a mobile app in Indonesia for finding and renting rooms for rent, apartments, and other accommodations. Users can filter listings by location, price, facilities, and rules, and some places even offer virtual tours to preview the space before booking.
However, despite its comprehensive features, several UI issues made the overall user experience feel less intuitive and occasionally difficult to navigate. This project explores how those pain points could be addressed through a more user-centered redesign.
So, how do I solve that problem?
I divided the process into four main phases. Although some stages resembled the Define and Ideate phases, I wouldn't consider this project a strict application of the Design Thinking framework, as it did not include the testing phase.
Problem Discovery
Understanding current experience
Every redesign starts with understanding the current experience. To be honest, I wasn't an active Mamikos user, I knew the app existed, but this project was my first time actually using it. Redesigning a product I barely knew definitely sounded a little intimidating, but it also meant I could approach it with fresh eyes and an open mind.
Heuristic evaluations
Before jumping into solutions, I wanted to understand how the current experience performed from a usability perspective. One of the most common and effective ways to uncover usability issues is through a heuristic evaluation. Rather than relying on personal opinions, this method provides a structured framework for assessing an interface based on established usability principles.
For this project, I used Jakob Nielsen's 10 Usability Heuristics as a guide. These principles cover essential aspects of interaction design, from visibility of system status and consistency to error prevention and user control. By evaluating the interface against each heuristic, I was able to identify potential friction points, usability gaps, and opportunities for improvement before validating those findings through user research.
Source: Anand, R. (2024). Nielsen's 10 Usability Heuristics: The UX Rules Every Designer Should Know. Medium.
Through my heuristic evaluation of Mamikos, I identified several heuristic violations across the interface. However, not all usability issues carry the same weight. While some caused only minor moments of friction, others had a much greater impact, making key tasks unnecessarily difficult and disrupting the overall user experience. To better prioritize the redesign, I focused on the issues that affected users the most.
Consistency and Standards
The navigation bar icons are inconsistent, as the duotone style uses more than two shade of gray.
The star icon does not follow common visual conventions. While users typically associate a yellow star with favorites or highlighted items, the gray star lacks visual emphasis, making the feature feel inactive or less important.
Aesthetic & Minimalist Design
The UI looks cluttered and lacks a clear information hierarchy.
The interface presents the same room information multiple times. For example, through both a summary line (Private Bathroom · WiFi · Bed) and a detailed facilities list. This redundancy adds visual clutter without providing additional value, making the page harder to scan efficiently.
Aesthetic & Minimalist Design
Too many attention grabs at once, everything is trying to stand out so nothing stands out.
The visual weight is scattered. Each card contains too much information. When cards are dense, scrolling feels heavy and tiring.
Aesthetic & Minimalist Design
Too many chips plus expandable city sections. Not to mention that everything is styled similarly, so it’s hard to tell what matches your search best, what is near you, and What is just “popular”
If you typed a specific campus, showing many other popular campuses (especially in different cities) isn’t very helpful. It looks generic rather than personalized.
Recognition Rather than Recall
Users can’t see their previous location searches, so they have to type them again each time.
At first glance, the app worked as expected, but digging deeper revealed a recurring pattern. Many of the issues pointed back to the Aesthetic and Minimalist Design heuristic. The problem wasn't missing functionality, it was the amount of visual clutter competing for users' attention.
Of course, these were still my observations as a designer. To understand whether real users experienced the same friction, I conducted usability testing, asking participants to complete the app's primary task while I observed their interactions. This helped validate which issues genuinely affected the overall user experience.
Usability testing
For the first task, participants were asked to find an available room managed by Mamikos. The following user flow maps their journey and highlights the key friction points encountered along the way.
For the second task, participants were asked to rent a room managed by Mamikos and complete the checkout process. The following user flow summarizes their journey, highlighting the moments where users hesitated, became confused, or encountered friction.
It was interesting to observe my peers as they completed the usability testing. Surprisingly, many of the issues they encountered aligned with the findings from my heuristic evaluation. The biggest pain point consistently came down to poor visual hierarchy, which made users hesitate and second-guess their decisions. This was especially evident on the order summary page, where multiple numerical values shared similar visual weight, making it difficult for participants to distinguish important information at a glance.
Although the core findings were largely consistent, usability testing provided something that a heuristic evaluation couldn't: real user reactions. Throughout the sessions, participants naturally voiced their thoughts, confusion, and expectations as they interacted with the interface. These spontaneous comments uncovered additional insights and helped me better understand not only where users struggled, but also why they struggled.
Define
Defining the Key Problems
Based on the heuristic evaluation and usability testing, I identified a few key problems that need to be solved, such as:
If I had to sum it up...
The interface prioritized information density over clarity. Excessive content, inconsistent visual cues, and weak hierarchy made it difficult for users to quickly identify important information.
Now that I had a clearer understanding of the core problems, the next question became: How could I solve them? Rather than jumping straight into redesigning, I took a step back to explore as many ideas as possible before committing to a single direction.
Ideate
Playing with possibilities
At this stage, my goal was simple: generate as many ideas as possible. One of the biggest principles of ideation is to resist the urge to overthink or judge your ideas too early. Honestly, that wasn't easy. I tend to evaluate every idea as soon as it appears, immediately thinking about its risks, limitations, or why it might not work.
This time, I challenged myself to put my inner critic on mute and let every idea have a chance to exist before deciding whether it was worth pursuing. Whenever I felt stuck, I returned to the research, revisiting the problems, the data, and the users' feedback. I constantly asked myself: What do users actually need? If I were in their position, what would I expect from this interface? Those questions became the foundation for exploring possible solutions.
To stop myself from overthinking, I dumped every idea into FigJam and organized them into six sections, each representing a different part of the redesign. Looking back, a lot of the ideas were still pretty rough (and honestly, a little vague). But that's exactly what ideation is for. I wasn't chasing polished solutions, I was giving every idea a chance to exist first, knowing I could refine, merge, or even throw them away later.
Refining the option
I had way more ideas than I could realistically implement and honestly, some of my favorites popped into my head halfway through the redesign rather than during the ideation phase. With so many possibilities, I needed a way to decide which ones were worth pursuing.
To narrow them down, I kept returning to my research findings, revisiting them whenever I felt uncertain. It reminded me that design isn't always a linear process, and it's completely okay to loop back before moving forward. In the end, I prioritized ideas that addressed the core usability issues, balanced feasibility with impact, and left the rest on my "maybe someday" list.
Redesign
Making it visually appealing
Once I had all the findings and decisions in place, I jumped straight into the redesign. I started with a mini design system, moved into mid-fidelity designs, and eventually refined everything into the final version. If you're wondering where the wireframes went... well, they never happened. At the time, I was racing against a deadline, so I skipped straight to mid-fidelity screens because they were much faster to turn into high-fidelity designs. Not exactly the most linear design process, but it taught me an important lesson: sometimes you need to adapt the process to the reality of the project. Looking back, I would have benefited from spending more time exploring ideas through wireframes, but this experience also pushed me to make decisions faster and become more efficient in my workflow.
This stage was a bit of a love-hate relationship. I loved experimenting with different layouts, but after hours of looking at grayscale screens, everything started blending together and my eyes were begging for some color. Still, I'm glad I went through it. It pushed me to think beyond aesthetics and find the balance between a modern, spacious interface and one that still feels informative and effortless to navigate. And turns out, "less" only works when it's still enough.
High fidelity aka the final result
This is where things started to come to life. With the mini design system in place, I began bringing the mid-fidelity screens into high fidelity by applying colors, typography, and the visual language I'd established earlier. It wasn't just about making the interface look prettier, I also took the opportunity to refine layouts, tweak some spacing, and polish the finer details as I went.
Instead of only showing the final outcome, I wanted to share something you don't usually see in a product showcase: a side-by-side comparison of the redesigned screens and the original interface. This makes it easier to highlight what changed, why those changes mattered, and how each design decision addressed the usability issues uncovered earlier.
Search page
Before
No recent searches, design feels generic rather than personal.
After
Added recent searches an recommendation based on your location!
Room listing page
Before
weak visual hierarchy making it difficult for users to know where to look first.
After
Improved the hierarchy through typography, spacing, and color. Distinct color-coded badges for female, male, and mixed-room categories.
Room details page (recommendation)
Before
Redundant content.
After
Eliminated redundant content. Removed the “View Details” button since users already instinctively tap on cards.
Room details page (review)
Before
Dense information and pricing details.
After
grouped related content, expandable pricing sections, emphasized total prize.
Room details page (review)
Before
The room details page contains excessive information with weak visual hierarchy. Inefficient use of space increases scrolling.
After
More compact layout to minimizes scrolling and improves scanability!
Room details page (review)
Before
Look less credible, Overuse of Visual Cues.
After
You can filter the comments now!
Accent colors make elements more noticeable and inviting.
Onboarding
Although the onboarding page didn't present any usability issues, I saw it as an opportunity to experiment. I explored a more engaging direction while preserving Mamikos' friendly, fun, and approachable tone of voice.
Reflection
What this taught me about designing UI and UX?
This project really changed the way I think about designing UI and UX. One of the biggest lessons I learned is that understanding the user experience always comes first before jumping into the visual side of things. As a designer, it’s honestly very tempting to immediately explore colors, layouts, typography, and all the fun visual elements. Sometimes I get excited about how something looks before fully thinking about how it works. But through this project, I realized that no matter how visually appealing a design is, it won’t mean much if users can’t connect with the experience. A beautiful interface can’t fix a confusing flow. Good UI should support the experience, not distract from it.
Looking back, I believe the research could have gone much deeper. Because of the project's timeline, some parts of the process felt more rushed than I would've liked, and I likely missed opportunities to uncover richer insights. Another thing I noticed was that most of my participants were fellow designers. While their feedback was incredibly valuable, many of their suggestions were naturally design-aware an they already knew what to look for and often proposed solutions alongside the problems. In the future, I'd love to include participants with non-design backgrounds to better understand how everyday users naturally interpret and navigate the interface.
The redesign itself also had room to grow. With more time, I would have expanded the redesign to cover more pages, developed an interactive prototype, and conducted another round of usability testing to evaluate how the experience performs in a more realistic setting. Hopefully, I’ll get the chance to revisit and improve it in the future. And when I do, I’ll definitely share the updates here!
Thank you
Thank you
Thank you
Thank you
Thank you