← Back
Gaming Application Design
Prototyped a desktop app for long-distance couples to save, create, edit, and store memories, journals, and screen recordings related to their gaming experiences
Date
March 2024 - June 2024
Role
Product/UX design
Organization
UW HCDE Department
Skills Gained
• UX/UI Prototyping & Wireframing
• Visual Design
• Information Architecture
• User-Centered Design
• Figma
• A/B Testing
Details
Design Goal: Develop a prototype of a desktop application designed to record and create snapshots, memories, and journals for long-distance couples to share during their gaming sessions.
As part of a team of five in a Directed Research Group for Human Centered Design & Engineering (HCDE), I worked on the initial designs for the screen overlay, home screen, and startup menu of the application. I also collaborated on the site map and played a key role in user research.
Click here↗ to see the user research project
Home Page Prototype: Low Fidelity
Our initial idea was to develop an API that could record memories and screenshots from games, addressing the limitations of existing screenshot features for gamers. However, we decided to expand the application's functionality beyond just capturing and storing screenshots. In the home screen, we included features that allow users to create, store, and send journals where they can add text and draw over the media saved in the app.
To enable users to seamlessly share audio and screenshots, we recognized the need for a server to handle file storage and transfer. This required users to establish a connection with each other, and if video was to be saved, audio recording would be necessary. All these features were incorporated into the homepage. The next task was designing the application's overlay.
The design focuses on three functionalities: starting/stopping the recording, muting/unmuting the microphone, and taking screenshots. The decision to use easily recognizable icons ensures that users can quickly identify and interact with the features, making the experience intuitive and efficient. By keeping the interface simple and visually uncluttered, this design ensures that the user can focus on their task without distractions.
The overlay's placement over the screen posed a potential challenge, as it could obstruct the user's view during gameplay. To address this, two solutions were implemented: a button that allows users to reposition the overlay to a less intrusive spot, and the option to choose between two different orientations of the interface, verticle or horizontal. This discussion also led to the realization that a decision was needed regarding which orientation would be set as the default.
An A/B test was deemed necessary to determine which screen overlay option, vertical or horizontal, would be more user-friendly. I led the draft for the Research plan displayed below.
A/B Testing Research Plan: Overlay Design
Usability Test Objectives
Vertical vs. Horizontal Overlay: Assess user preference between vertical and horizontal display Options and whether they switch between them.
Minimize Feature: Determine if users utilize the minimize function and if it disrupts gameplay.
User Interaction: Observe what users decide to clip, record, or screenshot.
Recording Length: Analyze how long users typically record gameplay.
Button Distraction: Evaluate the distraction level of the overlay buttons during gameplay.
Testing Methodology
Implement a static API focused on the button overlay.
Begin by asking participants which overlay they prefer (horizontal or vertical).
Conduct a Wizard of Oz usability test where participants share their screen, and researchers simulate the button actions when clicked.
Ask follow-up questions about their experience.
Include participants who play a variety of games.
Track how many times each button is pressed.
Post-Test Questions
What did you think of the on-screen buttons?
How did the minimizing function affect your gameplay?
Why did you choose to screenshot or record specific moments?
Did you experience any difficulty pressing the buttons during gameplay?
What were the biggest challenges you faced during the test?
Visual Design: Establishing the Aesthetic & Vibe
A key question we faced was determining the aesthetic and "vibe" we wanted to portray. At this stage, only low-fidelity prototypes with layout and functionality only included. After analizing user interviews (Click here↗ to see the user research project) I decided on an idea. To add to the gaming aspect of the app, I proposed a retro arcade pixel aesthetic.
This style allows for pixelated text and information to be displayed clearly while contributing to the overall design, minimizing visual clutter without compromising visual appeal or functionality. I created the below prototype showcasing this idea to the team, which was well-received and adopted for the project.
Start Up Menu: High Fidelity
I decided to model the interface after a classic video game character selection screen to make the user experience more interactive and personalized.for the intended user base. This design allows users to customize profiles and names for their gaming partners. While the primary purpose of the app is to facilitate gaming sessions for long-distance couples, the menu includes options to add multiple users, making it adaptable for other use cases we hadn't initially considered. By employing the "Curb Cut Effect," this should be able to enhance usability for all types of users.
The bold, pixelated look not only adds visual appeal but also keeps the interface simple, easy to read, and navigate. This design choice reduces cognitive load, allowing users to quickly understand their options—such as starting a session, viewing their journal, or customizing their player. Including information like "hours together" and "shared screenshots" gamifies the experience by quantifying interaction data, motivating users to engage further. Overall, the design and functionality choices focus on user engagement, personalization, and maintaining an accessible, fun environment.
Site Map:
As the purpose of this Directed Research Group was to present a prototype at the CHI Play 2024 conference, the final product has not been fully developed yet. The included site map represents all the work discussed and the efforts put into creating the user flow and service design of the product.