Lady Popular | Project Showcase
Redesign of an online fashion game
2024
My Role: UX Designer, UI Designer
About the project
The Lady Popular online fashion game is a highly popular virtual platform where players can express their creativity by styling avatars, customizing fashion looks, and sharing their achievements. This article focuses on the redesign of the Gallery page within the mobile version of the game. The redesign aimed to address usability concerns and enhance visual appeal in order to improve the experience for players who frequently engage with the gallery functions.
Problem
The existing designs of the image gallery pages suffered from two major issues: outdated aesthetics and poor layout. The interface was cluttered, visually unappealing, and difficult to navigate.
More specifically:
Cluttered elements that made selecting or managing photos confusing.
Non-intuitive layouts that lacked visual hierarchy, leading to difficulty in locating options like adding or creating albums.
Outdated visuals that did not align with modern design standards
Small, hard-to-tap buttons that caused frustration on mobile devices.
These issues significantly hindered the user experience, discouraging players from interacting with the gallery features effectively. Below are some of the original screens to illustrate the above-mentioned points:
Solution
The redesign addressed the identified issues by focusing on improving both aesthetics and layout across the gallery-related pages. Key changes included:
Clean and modern visual design: Updated interface with a cleaner, more visually appealing aesthetic. The redesign utilized a light color palette instead of the original dark one, larger visuals, and improved spacing to make the gallery more enjoyable to interact with.
Enhanced layout and navigation: Improved layout to provide clear visual hierarchy and logical placement of buttons.
Optimized touch interactions: Increased button sizes and adequate spacing between interactive elements, allowing for smoother navigation.
Photo preview enhancements: The redesigned gallery includes revamped photo thumbnails and simplified access to photo options like delete, edit, or move.
Final Design
Below are the final designs that illustrate the enhanced interface. The designs are divided into two primary sections: Photos Page Screens and Albums Page Screens, each carefully crafted to provide a more intuitive, engaging, and visually appealing user experience.
Photos Page
These screens focus on displaying and managing individual photos within the gallery. The main features are related to adding and editing photos, as well as buying extra photo slots.
Albums Page
These screens emphasize organization and album management. The main features are related to creating, viewing, and organizing albums, as well as buying album slots.
Most Notable Improvements
The redesigned gallery pages showcase improvements that reflect a commitment to user-centric design, addressing both visual appeal and functionality. Below are key comparisons, highlighting the specific changes:
Color Theme
Before
After
❌ Dark, outdated color theme that has poor contrast.
✅ Light, contemporary color theme that improves contrast.
Button Size
Before
After
❌ Small, hard to press buttons, with unclear functionality.
✅ Buttons are clearly labeled and easily clickable.
Photos Context Menu
Before
After
❌ Text colors are too similar and element alignment is poor.
✅ Improved text color, element alignment and focus.
Create New Album
Before
After
❌ Poor structure and user control; lack of Cancel button.
✅ Better structure and user control; added Cancel button.
Albums Page
Before
After
❌ Inefficient album navigation; no sorting and filtering.
✅ Added drop down album menu, sorting and filtering.
Delete Album
Before
After
❌ No button hierarchy and poor dialog box layout.
✅ Good button hierarchy and improved dialog box layout.
Buy Photo Slots
Before
After
❌ Poor layout and hierarchy; no Cancel button.
✅ Improved layout and hierarchy; added Cancel button.
