Redesigning the UX/UI of the Sims 4

Reimagining the Sims 4 for a More Intuitive and Delightful Experience

Project type

Personal Project

My Role

UX/UI Designer

Project Duration

8 Weeks

Overview

Background

To better understand how UX/UI design principles are applied in a gaming context, I explored the player experience of the Sims 4 and worked on a redesign to enhance its interface intuitiveness and improve usability. The goal was to streamline interactions, reduce friction, and create a more immersive and engaging player experience.

Challenges

Balancing familiarity with innovation: longtime players are accustomed to the existing UI, so drastic changes might disrupt their experience
Limited Knowledge of Game design mechanics that may influence UI/UX decisions
Limited game art resources

UX Process

Understanding What Players Think, Feel and Do

As the first step, mapping the player journey helped me identify the game's interaction options, as well as the player's actions and emotions. By analyzing the initial steps of playing the Sims 4, I examined key interactions and touchpoints in detail, identified player pain points, and began brainstorming opportunities to reduce these friction areas.

Grouping and Structuring Information by Screen

To ease players into the game and reduce information overload before they start playing, I listed the essential interactions on each screen and ensured that players need no more than three necessary steps to proceed to the next screen. These interactions were further broken down in the flowchart to ensure that each screen focuses on a single task, allowing for a seamless progression between menus and actions.

Visualizing How Players Interact with Game Elements

To visualize how the game's information and options communicate with players, I prioritized three key screens for wireframing following these guidelines:

Grouping similar content and using white space to create clear separation
Using list and grid layouts to ensure intuitive navigation
Using established icons to provide visual cues on information-dense screen

Improving Clarity Based on Player Feedback

I then conducted usability testing to evaluate the design and identify potential issues for players. Overall, participants were able to grasp the information and understand the interactions without difficulty. But the wireframes could benefit from small visual adjustments to improve the legibility.

Testing Results

Design Iteration

UI Art

Defining the Visual Mood: Delightful & Minimalistic

I wanted to bring a more lighthearted, relaxing, and fun feeling to the life simulation experience while maintaining a minimal and clean design to help players focus on the game content. I started by gathering artwork and UI designs with a similar mood for inspiration. By closely studying these references, I was able to create visual assets with that aesthetic for the style guide.

Mood Board

Style Guide

The New Experience: Lighthearted & Fun

The new design enhances the player experience with a clearer visual hierarchy and improved clarity. It engages players through a delightful and clean visual refresh, while preserving the essence of the Sims identity. To ensure accessibility for those with visual impairments, the screens were tested with colorblind filters and refined accordingly.

Landing Screen

Gameplay - Live Mode

Gameplay - Build Mode

Accessibility Considerations

Conclusion

What I Learned

Gained a deeper understanding of how UX/UI principles are applied within the context of gaming
Learned how to apply design thinking to adapt to constraints creatively and flexibly when resources are limited
Recognized the importance of collaboration and communication in making a game successful

Next Steps

Work through more screens to evaluate more complete task flows
Develop prototypes to test and refine interactions
Gather feedback from the Sims 4 player community to validate design decisions