ELVTR UX/UI for Videogames Coursework

PC set up showing the result of the videogame mocked

About the project

As part of ELVTR's UX/UI Design for Videogames course by Ivy Sang, this project focuses on analyzing and redesigning the user experience and interface of The Sims 4 to deepen understanding of player-centered design principles.

Roles & Responsibilities

UX Design, User Testing, UI Art

Timeline

7 weeks

Challenges

  • Building a bridge between game development and the players.
  • Creating a meaningful and cohesive user experience.
  • Designing wireframes based on a shipped game.
  • Planning and executing usability tests
  • Creating UI Mockups using a style guide of an already polished game.

Tools

Figma, Adobe Photoshop

Graphic showing the different steps in the work progress

Player Journey

Player journey for The Sims 4

Paper prototype

Paper prototype for The Sims 4

Flowchart

Flowchart for The Sims 4

Wireframes & Iterations

Wireframes first iteration

Usability Test

Recruitment

  • Target Audience: 16-55 years old, any gender.
  • No previous experience needed.
  • Population: 3-5 testers.

Schedule

  • Date: April 8th to April 13th 2025
  • Individual Session.

Task Design

  • Player will go through the 3 wireframes while describing out loud all the options they have.
  • Player will state out loud what does each option mean to them.
  • They will complete all the tasks listed.

Platform - Figma

Results of the Usability Test:

  • Players completed most of the tasks easily.
  • Some players didn't understand the community challenges.
  • Some players think the options button is catching too much attention because of its size.
  • Some players didn't understand the rotation arrows.
  • Some players thought the CTA 'Select a place to live' was interactive.
Wireframes second iteration

Moodboard

Moodboard

Animal Crossing: New Horizons - Nintendo

Screenshots from interfaceingame, nintendo music and collider

UI Style Guide

Style Guide

Mockups

Mockups first iteration

Color blindness simulation

Color blindness simulation

From this simulation, the following changes needed to be made:

  • The Option button in the home screen needs more contrast.
  • Contrast between the game buttons and the background should be increased.
  • Change gallery and packs icon's colors to add more contrast.
  • Add more saturation to selected filter option.
  • Improve feedback of selected clothing option by changing the color of the stroke.

Final Mockups

Mockups second iteration

Outcomes

  • Gained hands-on experience adapting an established game's UX to a completely different visual style.
  • Strengthened ability to prototype and iterate within time and resource constraints.
  • Improved skills in creating game interfaces that enhance player immersion and clarity.
  • Learned how perception, attention and memory is different to each player and how to improve based on that.