tonicolomba

[tonicolomba]

ELVTR — UX/UI in Gaming Coursework

Overview:

A study of Animal Crossing: New Horizons to examine how video games utilize UI/UX practices. Project completed as part of ELVTR's "UX/UI in Gaming" course.

Task:

UX/UI design, User Testing

Tools:

Figma, Photoshop

Project Length:

7 weeks

Challenges

          •   Lack of previous UI/UX design experience           •   No previous experience using Figma or Figjam           •   Improving the UI/UX for an already polished, well-known video game           •   Planning and executing player usability tests

Work Process

Player Journey → Paper Prototype → Wireframes → Usability Tests → UI Mockups → Accessibility 

UX DESIGN

Player Journey:

Paper Prototype & Flowchart:

Wireframes & Iterations:

Initial Wireframes

User Testing

          •   Players prefer the non-centralized Character Screen's information hierarchy           •   Players prefer the centralized Character Screen’s character placement                 ○   Combine the preferred design aspects of the character screens           •   Players struggle to anticipate how the ‘Sort’ button will act                 ○   Add a pop-up that lists sorting options           •   The ‘Low Durability’ warning is an effective call-to-action that players appreciate

Iterated Wireframes

UI DESIGN

Mockups

Credit for gameplay screenshots: VG247, Eurogamer, Polygon, & Nintendo.

Accessibility

          •   The top bar of the character creator lacks contrast. Darken its color.           •   The button prompt text lacks contrast. Darken the color of the font.

Final Mockups

Outcomes:

          •   Iterated on existing video game UI designs to create high-fidelity mockups           •   Gained an understanding of how to translate general design knowledge to UI/UX design           •   Gained experience using Figma           •   Learned about the UI/UX process in the gaming industry

[tonicolomba]

Mx. — Card Game Design

Overview:

“Mx.” is a card game about identity. Players build characters with body and equipment cards to outscore their opponents, but the rules for scoring change with each identity card.

Tasks:

Game Design, Illustration, Player Testing

Tools:

Adobe Illustrator, Clip Studio Paint, InDesign, Paper Prototyping

Team role:

Solo Developer

Project Length:

4 Months

Research & Ideation:

The concept for “Mx.” originated from the tension between queer gender identity and video game character creators, which I concurrently researched for my Capstone paper.

Sources of inspiration:

          •   Bargain Quest           •   Bears vs. Babies           •   Consentacles           •   Uno

“Mx.," from its initial conception, was a character-building game where players each scored according to different rules, but harmonizing these two aspects required exploration.

Playtesting:

Initial playtests utilized a small group of testers playing 2-player matches, who I assisted throughout gameplay. With early playtests, I wanted to learn:

          •   Which style of picking up cards created the most player engagement           •   Explore viability of a graveyard mechanic           •   The most satisfying overall ruleset           •   The optimal number of cards in a deck           •   The best ratio of card types

Later playtests utilized more players and more variations in player count. Throughout tests, I offered no intervention nor assistance to players, instead observing how they interacted with the tools provided. Throughout these playtests, I wanted to learn:

          •   How easily players understand the rulebook                 ○   Fix grammatical errors                 ○   Add instructional visuals to the rulebook           •   How players interrupt the rules                  ○   Rework the verbiage of confusing action cards           •   Opportunities to fine-tune the deck balance                 ○   Add more action cards that enable player-to-player interaction                 ○   Add more action cards that allow the player to refresh their hand                 ○   Add the option for players to discard cards on their turn                 ○   Add wild cards                 ○   Add more identity cards

Rulebook Mockup

Mockup template by lcd2020 on Freepik.

Illustrations:

Exploration

Finalized Style

Card Layout Design:

Initial Design

Design Feedback

          •   Lack of visual clarity                  ○   Reduce border thickness                 ○   Scale down the illustration size                 ○   Increase amount of negative space           •   Distracting background                 ○   Darken the background                 ○   Reduce the contrast and texture of the background                 ○   Increase the contrast between the illustration and background           •   Unclear iconography                 ○   Redesign the icons                 ○   Utilize simplification           •   Poor text readability                  ○   Create a dedicated section for text                 ○   Change font

Credit to Nancy Nowacek, who helped me pinpoint design flaws and develop methods to overcome them.

Iterated Design Mockup

Mockup template by mockup free.co.

Outcomes:

          •   Published “Mx.” on drivethrucards.com           •   Experienced the process of game development from ideation to publication           •   Utilized multiple softwares towards one unified end goal           •   Managed a small budget of $200             •   Created and maintained a production schedule            •   Displayed “Mx.” at the 2023 Visual Art & Tech “Outdoor Voices” Exhibition

Post-Mortem

As a capstone project, this card game was the culmination of what I learned and accomplished throughout my undergraduate art studies. Through this project. I experienced the full, unique scope of solo game development.

Credits:

My mentors: Diana Bush and Nancy Nowacek.

My playtesters: Andy Steele, Benjamin Steinwurtzel, Chris Chan, Joshua Jensen, Kyle Forrester, and Savnick Patel.

[tonicolomba]