
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:

Player Profile: Emmelie

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?

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.

Above: Paper prototype
Design
Flowchart

Above: Player Flowchart
Wireframe

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.

Above: Create a Sim
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.




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

UI Mockups

New player home page

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.

Create a Sim Tutorial 1

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


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