Design - Avatar Customization System (Unreleased)

A mobile, detailed and easy to navigate avatar customization that offers enough options
for players to express themselves and be happy with their outfits/creations.

References/Concepts

• The following screenshots, references, and concepts are just a selection, not an exhaustive collection of all the gathered elements.

• The first two screenshots from left to right showcase the customization system in Forza Horizon 5. The primary inspiration for this system revolves around emphasizing the user's character or car as the focal point. By pressing and selecting customization categories, the camera zooms in or out accordingly.

• The four screenshots on the right side of the collage belong to Love Nikki-Dress UP Queen 1 and 2. These references served as an approximate goal for what we wanted to achieve. We aimed to draw inspiration from their successful integration of the avatar as the focal point, accompanied by a wide array of available options and categories.

Responsibilities

I worked as one of the designers in an XR company, collaborating with the client, a UX designer and a lead Game Designer. My primary role was to distill the client's needs for an avatar customization system into a concise and comprehensive creative brief. This creative brief served as a dynamic document, encompassing specific details such as:

• System Functionality: Defining the available customization options for users and explaining how they could be navigated, selected, and previewed.

• Goals: Outlining the criteria for success.

• Measuring Success: Establishing how we would gauge the system's effectiveness.

• Design Details: Providing an overview of the entire system and specifying user journeys for each interaction within it. These design details were always supported with references and examples.

• Controls and Buttons: Creating a table that outlined the controls and buttons, detailing how the system would be navigated based on the target platform (PC, Console, Mobile).

• Flow Diagrams: Developing flow diagrams to facilitate better collaboration and communication with the UX designer and lead Game Designer I was working with.

• Wireframes: Creating wireframes to translate the functional vision of the product into a more visual and tangible approach, aiding in the design process.

Tools Used:

Lucid, Figma, Google Sheets, Google Docs and Illustrator.

Phase 1: Required Data

Before diving into the wireframe and flow diagram phase, I find it beneficial to:

• Data Preparation: Before moving on to wireframe and flow diagram development, I believe in thoroughly organizing and categorizing all available user data.

• Client Collaboration: A continuous dialogue with the client is essential to determine the optimal amount of information and options required for the project.

• Tool Utilization: Excel proves to be a valuable tool for data organization, simplifying the creation of flow diagrams and wireframes in subsequent stages.

The following data is organized for the avatar customization system in an Excel data table. One significant advantage of this approach is its flexibility in accommodating changes. Modifying a wireframe or a flow diagram typically takes more time than making changes to data entries in Excel.

Phase 2: Flow Diagrams

• Having all the data organized and categorized makes the information more digestible for both the client and the team. It also streamlines the process of creating flow diagrams, making it more agile.

• The following diagram represents an early iteration of the information displayed in the system. It allowed us to convey our initial ideas to the client regarding the available user information. This facilitated the iteration process, making it easier to present to the client and fostering a smoother back-and-forth dialogue for feedback.

Phase 3: Wire Frames / Low-fi sketches:

• I began creating mock-ups for potential layouts on mobile devices, aligning them with the user stories and flow diagrams. Although the data was not yet finalized, my teammates and I collaborated to use our collective judgment in selecting an option that would best meet the client's needs.

• The navigation for avatar customization was guided by hotspots. These hotspots functioned by allowing users to zoom in on specific areas they wished to customize. For instance, in fig1, a wide shot showcases the main avatar customization screen, where the avatar is fully visible, featuring four main hotspots (head, torso, bottoms, and feet). On the other hand, fig2 offers a closer shot, zooming in on the character's head, triggered when the user presses on the Head hotspot.

fig1

• The primary reason for adopting this approach was to highlight the avatar as the user's pride; it deserved to be the center of attention at all times. The hotspots provided an immersive and interactive character customization experience, enabling the user to constantly view their avatar, explore various angles, and meticulously choose what best matched their style.

• fig2 also displays hotspots for specific customization categories within the character's head. Some of these categories include head shape, hairstyle, head accessories, skin color, eyes and eyebrows, ears, nose, among others.

fig2

• As shown in fig3, following the selection of a specific hotspot, the user is presented with a drawer containing thumbnails of options to choose from. The first panel from left to right on fig3 showcases the three available head sizes for the user to select from (small, medium, large)

fig3

fig4

fig5

fig6

fig7

fig8

fig9

fig10

fig11

Conclusions

Aligning early on with the client regarding which data would be included in the design, and which would be excluded, could have accelerated the process. Nevertheless, as a team, taking the initiative to provide mockups and wireframes early on proved to be a client-satisfying move that strengthened our relationship. It also provided the client with greater clarity about the amount of data to be included, offering insight into the system's scope, associated costs, and required assets. This experience was tremendously valuable, enabling me to become proficient with tools like Lucid and Figma. Moreover, it afforded me a clearer understanding of how my game design expertise seamlessly aligns with UX design. Additionally, it helped me become familiar with some UX best practices and conventions with which I was previously less familiar with.