Combining slot mechanics and the adventure genre of mobile games, Spinning in Space was DoubleDown Interactive’s first mobile game outside the digital casino space. I collaborated with Project Managers, Product Managers, Art Directors, Game Designers, and UX Designers to ship the mobile game alongside our South Korean Team. Assigned under the guidance of the Senior UX Designer and in collaboration with various stakeholders, my primary responsibility involved designing the avatar customization feature to enhance the overall user experience.
.jpg)
Upon joining the company and Product Team, the customization feature of the product was already established. Despite the existing design, I was tasked with re-imagining the customization feature. The company lacked any prior UX research for the product or feature, resulting in my research of other mobile games with customization features. Ultimately, the main issue I was trying to solve for came down to the following statement:
How might we create an avatar customization feature utilizing the pre-developed assets in the least development time while maintaining consistency and functionality for players who enjoy customizations?
As shown below, I sketched Crazy 8s of the customization screen that greets players upon entering the feature, aiming to kickstart the discussion on improving the design. I prioritized the customization categories (e.g., body style, hairstyle, facial feature, top, and bottom), the item subcategory, and color selection. These three elements stood out as the most crucial UI features on the screen. Consistently, the upper HUD and exit buttons maintained their positions at the top and bottom left, respectively, throughout the entire app. I left these elements untouched.
I collaborated with the Senior UX Designer to craft low-fidelity wireframes using Balsamiq, my first experience with the tool. These wireframes were created within a week. While maintaining key aspects of the UI from the existing design, such as the placement of customization categories, item subcategories, and color selectors, we introduced subtle changes to improve the overall user experience.
A notable addition was a filter at the top of the customization feature, enabling players to sort items based on ownership status (e.g., owned, not owned, or all items). This feature empowers players to easily curate new outfits using existing owned items or explore all available purchases.
The reset and exiting buttons were redesigned as well. There was no reset button prior for players wanting to reset all changes in the event they wanted to start back from the beginning. The exit button now prompts users to choose whether to reset and undo changes, update existing changes, or continue to edit their avatar. This wireframe does not account for the case if the player decides to update all existing changes but is wearing an unpurchased item; this consideration will be incorporated in later iterations.
Following the review by the Senior UX Designer, Project Managers, Product Manager, and Art Director within our department, the initial wireframe was submitted to the South Korean Product Team for their evaluation.
Over time, the South Korean Team implemented their version of the avatar customization into the TestFlight build, as depicted below. While the UI may appear similar to the wireframe at first glance, there were minor design discrepancies that led to frustration for playtesters.
In response to the feedback from playtesters, the Product Team proposed changing the avatar customization and cosmetics purchasing experience. The aim was to alleviate friction and confusion that players may encounter, particularly surrounding the in-game purchases. To address the concerns raised by the Product Team through playtesting, I generated user stories that summarized pain points, concerns, and potential solutions. These user stories served as a foundation for the iteration of the wireframes.
Due to the time constraints faced by our South Korean Team, only a few of our proposed design changes made it into the following Open Beta build as shown below.
Given the team’s time constraints and concurrent changes to other features in the game and recognizing the limitations of the extensive design modifications proposed in Version 2, I conducted a final round of iterations for Version 3. This focused on implementing minor design changes that our developers could quickly incorporate.
Our UX Team successfully established a design system in Figma with all the game’s art assets around this time of the project. Utilizing Photoshop and our new design system in Figma, I developed high-fidelity mockups to illustrate the desired UI to our South Korean Team depicted below. Overcoming the language barrier and cultural differences, which consistently posed challenges to collaborative work between the teams, we found that presenting mockups alongside Confluence documentation was most effective in conveying the envisioned game to our developers.
The South Korean Team successfully incorporated the design changes we proposed. The feedback from the Seattle Product Team regarding the customization feature was notably more positive compared to previous builds. With the UX Team deeming this feature as completed, we transitioned our focus to addressing and enhancing other features of the product.
Unfortunately, the game was discontinued in Q1 2023, having been in production for approximately three years. While many mobile games are developed more swiftly, Spinning in Space marked DoubleDown Interactive’s first venture beyond the digital casino space.
Reflecting on the product now, here are a few of my wishes that could have contributed to its success.
Despite the product’s discontinuation during my time at DoubleDown, it remains a significant milestone as my first product in the industry. I enjoyed the opportunity to showcase my design skills and creative thinking. Working collaboratively with the UX and Product Teams, as well as our South Korean counterparts, provided valuable insights into UX design in the gaming industry, enriching my professional experience.