Overview

About the project

This case study is a culmination of my journey through the UX/UI for Gaming course offered by Elvtr, and instructed by Ivy Sang. Over the course of 7 weeks, I embarked on an exhilarating 14 class, eight-assignment adventure that provided me with the invaluable opportunity to delve deep into the design process for gaming experiences. From crafting a player profile and mapping out player journeys to creating paper prototypes, wireframes/mockups, and conducting user testing, I honed my skills in crafting immersive and user-centric gaming interfaces. For this case study, I chose to tackle one of my most beloved games, The Sims 4, with a focus on enhancing the accessibility and intuitiveness of a new player's experience. Join me on this journey as we explore the intricacies of designing for one of the gaming world's most cherished titles.
 

Duration:

August 3 - September 18

My Role:

This was an individual project. My responsibilities included:

• User research
• Player journey
• Flowchart
• Wireframing
• User testing
• Hi-fi mockup
• Accessibilty testing
• Case study creation

User Profile

Get to know the user

Something unique about gaming is that there can be players from all walks of life that play the same game. This can range from a 10 year old boy who has a limit of 30 min a night to game, starting his first playthrough, to a grandmother who is a master of the quick scope and livestreams for hours a day. Because of this, designing for all players can be difficult, but creating player profiles can help identify expectations, motivations, and identify any gaps and/or painpoints that may be hindering the enjoyment of the experience.

Player Journey & Flow Chart

Path of a newbie

The second assignment of the course was to follow, and document, a players first walkthrough of a video game, which for me was The Sims4. This included noting what the player saw, heard, thought, felt, said, and the decisions made each step of the way and why. For our journey, I focused on 3 tasks, creating a sim, performing an action, and using build mode. 

We then took that Player Journey and lay it out in a flow chart format. While the journey allowed me to find any gaps or painpoints, the flowchart gave me the ability to work out where those improvements can be made.

A few areas of opportunity were: 

• Give the user a feature walkthrough to eliminate the need to click through each option manually to figure out functionality
• More clarification about the “outfit” tabs would be helpful
• Player got stuck attempting to save due to lack of adult sim in household. Adding communication about this rule when choosing the age of the first sim in a household could prevent this issue from occurring
• Letting the customer know that a property is not affordable at first glance would avoid the players need to hover to find out the same info
• Offering a clearer walk through of a few specific tasks will give the player a better understanding of the game
• The player selects a meal and modal closes. This is abrupt a does not leave room for adjustments. Adding a “submit” button would remedy this and potentially allow for cooking multiple meals in a row
• Typing in the item search bar and hitting enter will auto select and run the first suggested search rather than what is in the input box, which can skew the search results. Making searching what is in the input box the default, unless the player selects a suggested entry, will stop this from happening.
• The item selection area could be redesigned to be larger/easier to see

Player Journey

Flow Chart

Wireframing

Home Screen, Sim Customization, & Build Mode

Once I was set on the path my player would take, I chose 3 screens to do a first iteration wireframe. I decided the most pertinent screens would be the home screen, and the screens users see while customizing their sims and while they're in buildmode. I tried to keep the design as clean as possible while still following The Sims 4 design standards (based on screenshots and the website). 

Home Screen

While our user overall found no issue with this screen, I felt it lacked potential. Some improvements I made were:

• Moved the weekly challenge information to a more noticeable location, hopefully driving more users to see and complete the challenge
• Added a CTA linking to game tutorials. This will allow players the ability to learn new tips & tricks and master the game. 
• Added a carousel of content packs to show the player more content to add to their collection
• Used the bottom section for a fun Sim fact

Sim Customization

The main issue I found with this screen was the ambiguity of how "Outfit Categories" work and how little items were visible at a time. To remedy this I:

• I added a label to the outfit section and added a tooltip explaining how outfits work
• Made the category tabs more noticeable
• Increased the visible item count by 4

Build Mode

Once again, the overall functionality and layout of this screen was fine as is, but I found two opportunities of improvement:

• Increased the number of visible items
• Added the ability to expand the item section further to allow for better item comparisons

User Testing & 2nd Iterations

User Testing

The next assignment of the course was to take our wireframes and run them through user testing. My test consisted of two testers with varying age, Sims4 experience, and preferences. Though the tests were not "formal", I received great feedback that allowed me to improve upon my design. Lets take a look at the process!

Usability Test Planning

The first step to this assignment was to plan the test. This include figuring out the most important research objectives, such as if there are any potential miscommunications on the screen, if the player understands how to use the functionalities on the page, and whether or not they like the design and layout.

Next, I formulated the logisitics of the test. I assigned the target audience, how many testers I needed, what platform the test would take place on, the overall game plan for the questions, and when they would take place. 

Lastly, I created a script that I would follow to ensure there was as little bias or leading as possible when conducting the tests. This script made sure to ask questions that would fulfill my research objectives. 

Usability Test Session

After finishing the test prep, I ran 2 successful user tests. These tests consisted of one-on-one interviews with the participants where we walked through each screen and I asked the questions from my script. Each test took about 10 minutes and I received some great feedback, which I will elaborate on in the next section. Check out the test results!

Usability Test Results & 2nd Wireframe Iteration

Overall the tests went well. Both participants had a positive experience, stating things like "Layout is easy to navigate", "Its cute!", and "Its clean", but I found a few areas of opportunity to make improvements, listed below, that I implemented into my wireframes. Click through the carousel to see the final iteration before hi-fi mocks!

Home Screen:

• Make footer less busy
• Add more imagery to make less boring *will do in higher fidelity mocks

Sim Customization:

• Change item button order to - Body, Looks, Full Body, Tops, Bottoms, Shoes, Accessories
• More info for outfit categories
• Character traits larger

Build Mode:

• Change expand button to arrow
• Move expand button placement

Style Guide & Hi-Fidelity Mocks

Time for the glowup

Now that I had my user testing and 2nd iteration wireframes complete, I was able to move on to the last steps of our process. Instead of moving straight into hi-fidelity mockups, I decided to do the bonus option and create a UI style guide to follow. This would help ensure consistency throughout my designs. This guide includes all elements I would need in my 3 screens, including colors, fonts, buttons, inputs, and icons, sourced either from screenshots or made by hand. 

Hi-Fidelity Mockups

Using my style guide and wireframes for reference, I made my first iteration of hi-fidelity mockups in Figma. I utilized Nielsen Norman Group's 5 Principles of Visual design, focusing on scale, visual hierarchy, balance, contrast, and Gestalts Principles, to create screens that are not only eye catching, but drive engagement and increase usability. I also ran the hi-fi mockups through a color blindness simulator to ensure they are all are compliant and accessible.

This task was probably my favorite step! I loved scouring the internet for assets matching current Sims4 styling and using photoshop to cut out icons and the home screen characters, and create icons that I could not adequately cut from screenshots. These are a few of the screenshots I utilized for the assets and inspiration.

Home Screen

I wanted this screen to be fun and colorful, but also clean, so I kept a good amount negative space and utilized a minimal color palette to balance out the brightness of the colors. 

The main focus of the screen needed to be fun, and what we started with was not it. By utilizing shapes that I felt matched other Sims4 branding and adding an exciting scene of Sims doing something fun, I feel I was able to fulfill my goal. I asked one of my test participants for their opinion on the update and they approved! 

Sim Customization

The majority of the design elements on this screen are similar to what is currently implemented, though altered here and there, but each asset was either physically cut from screenshots in photoshop or created by hand in Figma. The biggest difference on this page is the Item Selection section. I wanted to make the top "Outfit Category" section stand out and offer a little more clarity to the purpose of that functionality, while keeping the style within Sims4 design standards.

Build Mode

Again, the majority of the design elements on this screen are similar to what is currently implemented, but are "hand made". The challenge for this screen was to offer more real estate when it comes to item options, and I feel I fulfilled that. Changing the text "expand" button to an arrow icon that is seen in other areas of the UI was a clean way to communicate the area was expandable. 

Conclusion

Outcomes & Reflection

Taking this course was a great experience that I would recommend to everyone looking to broaden their design skills. It has been so fun seeing the differences between UX for product design and game design, with the latter needing to take not only visual aesthetics into account, but also what the player hears and the device they use to interact with the game (m&k/controller), among other things. 

The biggest challenges I faced throughout the course and assignments were the user testing, I would occassionally "lead" the users when they were confused, as well as trying to stay unique while redesigning already implemented screens. Despite this, I feel I accomplished my goal of solving the design challenge and making the game more intuitive and user friendly, by adding additional context where needed, expanding the players field of vision for items, and following the 5 priciples of visual design.

Thank you for following along! Please check out some of my other work vvv