top of page
The Sims 4_edited.jpg

The Sims 4   Design Case Study

Background

This case study focuses on the initial release of The Sims 4 (2014), the home page and the "create-a-sim" page. A game with over 70 million players (ir.ea.com) and has since improved on its design in order to make the gaming experience better for its broad user base.

Timeline

7 Weeks

Role

- Researcher

- UX/UI Designer

Tools

- Figma

- Photoshop

- Illustrator

The Process

1

2

3

4

Discovery

Design

Iterate

Accessibility

Background Info - The SIms 4

The Sims franchise aims to target a smaller user-base of ages between 16-24 years old, however, when one looks at streamers or gaming content creators, the age ranges varies up to 65+. Due to the age of the game, the original game being released in 2000, some of the audience has grown up with the game and have continued to play every version of the game, but there are many new users every year, as they continue to improve and add new DLCs. Many previous Sims players expect the latest version of the game to bring features from previous games to the latest version and some just want something fresh. 

The Sims 4 is also supported in 18 languages, and has gained a global expansion of 75% of new unique players being from outside of North America, especially since EA made the game free to download in October 2022, increasing downloads by 16 million (ir.ea.com).

Goals

Make usability attainable for players from different backgrounds

Ease of learning how to play game for all incoming players 

Ensure game is accessible for visual dissabilities

Discovery

Meet Our Players:

Gamer persona 1

Player Profile: Emmelie 

Gamer persona 2

Player Profile: Alex 

Player Journey

The following challenge was to re-enact the player journey. Emojis were used to indicate the player's emotional condition as they played the game. Assessing potential opportunities while keeping the following cues in mind:

1) What does the player see?
2) What does the player hear?
3) What does the player think?
4) What does the player feel?
5) What does the player say?

Player Journey - Sims 4

Above: Player journey map

Paper Prototype

After gathering the potential opportunities, the next step was paper prototypes. This would allow the proposed improvements to be incorporated into the current player journey and immediately disproven or validated using a lean usability session.

Paper Prototype

Above: Paper prototype

Design

Flowchart

Flowchart

Above: Player Flowchart

Wireframe

Home screen

Above: Home screen

When creating the homescreen wireframe, I wanted to incorporate some of the updated interface and keeping the top "play" button as it seemed that it was something that both players and non-players knew the meaning of. I also wanted to highlight some Sims 4 news as some of the community is interested in what's new, newer packs, etc..

Once I entered create a sim, I liked most of the current layout, I did remove the "cold" and "hot" outfits as those aren't used unless the player has the "Seasons" expansion pack. 

Edit Sim

Above: Create a Sim

Usability Test

Usability Test

Above: Usability Test

Feedback Review

I agree with the user’s point of the “play” button being confusing as to where it would take me to, I have decided to remove it and instead have the “new game” and, for existing players, “load game” buttons. I also have added an “exit game” button as the current way to exit the game is by going to options, however, this might not be the most efficient way as it is more clicking and hidden behind the “options” pop-up. For the “edit” scren, I have added some tutorial text to the left hand of the screen to guide the user through these steps with the options of “next” and “skip tutorial”. I also first hid the attributes hexagons to not overwhelm a first time user.

Applying the feedback

New player home page

Returning player home page

The original wireframe got negative feedback regarding the big play button - it being misleading and players unsure of where it would take them. I decided to take it out and have "New Game" vs. " Load Game" which would only appear for returning players. 

Home screen - new player
Home screen - returning player
Edit Sim - tutorial 1
Edit Sim - tutorial 2

Create a Sim Tutorial 1

Create a Sim Tutorial 2

I decided to add tutorials for new players in forms of popups and progressive disclosure to not overwhelm the player. I did find it important to have a "skip tutorial" button as well as a "next" button as some players may find it intuitive or may have seen the game prior to playing it themselves.

Style Guide

Style Guide

UI Mockups

Home screen new user - Final

New player home page

Home screen returning user - Final

Returning player home page

For the UI of the homepage, I wanted to highlight the current gradients for The Sims 4 homepage for the buttons but minimizing the highlights to not overwhelm the user. I also added the "Exit Game" button in a different color to ensure it's separation with the other buttons but to still make it clear enough for the users to be able to exit the game. 

Edit Sim Tutorial 1 - Final

Create a Sim Tutorial 1

Edit Sim Tutorial 2 - Final

Create a Sim Tutorial 2

Once I entered create a sim, I liked most of the current layout but did want to bring back the background of a previous game, as it felt like the player was truly giving a randomized sim a makeover in a dressing room with a mirror and a closet. I chose to use The Sims 2 background as a call back to the returning Sims' players for those who had played The Sims 2 before.

Accessibility

Color Blindness Test Home
Color Blindness Test CAS

Lastly, the UI screens were put through a color blindness simulator to reveal if there were any issues with contrast or choice of colors. Nothing stood out from the eight different color blind tests we did, however, it is good to note that in some areas that have a transparent background and white iconography or text, some contrast issues may appear.

Takeaways

  • Testing after each wireframe with both returning players and non-players proved to be valuable as not everything is as intuitive as I first had thought and allowed me to explore other options. 

  • Tutorials are very valuable for some people, therefore having them with a way to exit for those who don't want them, can improve a player's experience greatly.

  • Next time I will have to test the different states of clickable assets to ensure that there is enough contrast for better accessibility, especially when designing with primarily blues and greens. 

View Other Case Studies

Nonprofit redesign

Nonprofit

Redesign

likewise redesign

Likewise

Redesign

EPA redesign

EPA

Redesign

bottom of page