UX/UI | Android, IOS | NOV 2015 - MAR 2016
Mega Mart App
UX Redesign Case Study
Redesigning information architecture to improve feature discoverability and everyday usability.
The existing Mega Mart app lacked clarity in navigation and visual hierarchy, making it difficult for users to quickly access key features.
This redesign focused on simplifying the information structure, strengthening visual consistency, and improving usability for frequent shoppers.
Timeline : November 2015 - March 2016
Platform : Android, IOS
My Role : UI/UX Designer (Early Career)
Tools : Photoshop, Illustrator
The existing app structure was feature-driven and fragmented, making it difficult for users to quickly access core functions such as points, coupons, and promotions.
-
Critical actions were hidden below the fold, reducing feature discoverability.
-
Inconsistent color usage weakened brand coherence and visual hierarchy.
-
Poor text alignment and spacing reduced scannability and readability.
Problem
Solution
Reorganized the information architecture around user intent rather than feature listing, prioritizing frequent actions and improving discoverability.
Information Architecture & Navigation Structure
Design Principles
main screen bar
Removed the heavy background color from the main header to create visual breathing room and reduce visual fatigue.
Similarly, menu buttons and search buttons were grayed out to make them simple and easy to recognize by eliminating color and button lines.
Menu Button
A light gray color separates the button from the background.
By eliminating the margins between buttons, users have expanded the scope of pressing the buttons.
Core Features Supporting Everyday Shopping
Point card
Access loyalty points digitally without the need for a physical card.
My Coupon
Centralized coupon management with personalized and category-based offers.
A regular store
Save a preferred store to receive relevant updates, including push notifications and local store events.
Today's Recommended BEST
Daily curated flyer discounts recommended by Mega Mart for the best value.
Mega Event
Participate in a variety of events, including card partnerships, attendance rewards, campaigns, and community activities.
Fresh Story
Discover stories from Mega Mart’s private-label brands, highlighting carefully managed production processes and brand philosophy.
Point/Mobile Receipt
View remaining loyalty points and access digital receipts in one place.
UX Impact
-
Improved visual hierarchy to clearly emphasize primary user actions
-
Simplified color system to reinforce brand consistency
-
Increased spacing and contrast to improve touch accuracy, readability, and overall usability
What This Project Demonstrates
-
Information Architecture thinking
-
User-intent-driven UX decisions
-
Early foundation of product design approach
Early-career UX redesign project demonstrating information architecture and usability-focused thinking.