SECTION 01: SERVER BROWSER
SERVER BROWSER PAIN POINTS
1- Cluttered map design
The PayDay 2 Server Browser map was visually busy and cluttered
2- Overlapping icons and text
Icons and text were overlapping, making the information hard to read.
3- Confusing iconography
The icons were unclear and confused players.
4- Dull color scheme
The colors used were uninspiring, reducing visual engagement.
5- Difficult navigation
It was hard to navigate from one screen to another
6- Challenging filter application
Applying filters was cumbersome and not intuitive.
7- Hard to invite friends
Players found it difficult to invite friends to their party.
TURNING PROBLEMS INTO SOLUTIONS
1- Map design
Minimize Map Elements: Use a clean, simplified map layout
2- Iconography and text
Icons dynamically adjust their spacing
Use standardized icons, and the legend for clarity.
3- color scheme
Update the color scheme with engaging, high-contrast colors
4- Navigation
Introduce a fixed navigation bar with main actions.
5- Filter application
Simplified Filter Menu with clear labels.
6- Invite friends
Invite via Code: Provide a unique party code players can share with friends for easy joining.
FEATURE LIST
My first step in designing the user experience is to create a feature list for a specific screen, menu, or module. The process includes the following steps:
- Listing all the important options for the screen, menu, or module.
- Prioritizing the options based on the overall game flow and frequency of usage.
- Discussing the initial list with the production team to refine it further.
- Removing unnecessary features or adding new ones based on team feedback.
USER FLOWS AND UI DESIGNS
After finalizing the feature list, I approach the design process with the following steps:
- Create interactions and controller input user flows for the project
- Design low-fidelity wireframes for each screen and menu.
- Develop high-fidelity mockups that align seamlessly with the design guidelines.
INTERACTIVE FIGMA PROTOTYPE
We turned all the assets into tokens and built them as interactive components with different states. The result? A hands-on prototype that feels smooth, dynamic, and ready to explore!
SECTION 02: RESULT SCREEN
RESULT SCREEN PAIN POINTS
The old design felt messy and hard to use, with too much info crammed onto one screen and no clear structure.
1- Cluttered and disorganized layout
2- Low readability
3- Excessive information displayed on one screen
4- No data hierarchy or prioritization
1- Cluttered and disorganized layout
2- Low readability
3- Excessive information displayed on one screen
4- No data hierarchy or prioritization
NEW SOLUTIONS
We fixed the previous design by cleaning up the layout, improving readability, and making the info easier to understand.
1- Streamlined Layout
Organized everything into clear sections and cut down on clutter
2- Improved Readability
Used better fonts with good contrast and spacing
3- Enhanced Visual Hierarchy
Highlighted key info so it’s easy to spot
4- Simplified Information Display
I kept the main details upfront and added expandable sections for extras
5- Consistent Design System
Made the design look consistent and polished
1- Streamlined Layout
Organized everything into clear sections and cut down on clutter
2- Improved Readability
Used better fonts with good contrast and spacing
3- Enhanced Visual Hierarchy
Highlighted key info so it’s easy to spot
4- Simplified Information Display
I kept the main details upfront and added expandable sections for extras
5- Consistent Design System
Made the design look consistent and polished
VFX & ANIMATED UI ElEMENTS FOR THE RESULT SCREEN IN AE
FIGMA DESIGN OVERVIEW: KEY ElEMENTS & LAYOUTS
