Standardizing the Netflix Stories Character Creator
Project: Netflix Stories narrative game
Platform: Mobile iOS and Android / Unity
Contributions: UX direction, flows, wireframes, prototypes, documentation, systems design work with engineering, copy library.
Due to the exigencies of putting out stories with several different story teams in several different art styles, our early character creator features lacked cohesion and unity with regards to patterns and layouts. However, as it became clear that we could reap a more efficient pipeline if we stopped re-inventing the wheel and made assets swappable between games, standardizing and templatizing the character creator became a top priority.
I was tasked with defining all the bluesky features, as well as iteration and prototyping. We had several key goals:
1) Create a Character Creator system that would allow users the agency to create either an aspirational or representational version of themselves.
2) The system and layout would work with either tentpole landscape properties or the more quickly iterated portrait stories.
3) Allow for flexibility in the character tree taxonomy and would not introduce untenable dependencies if a project didn't have the same category assets as another project.
4) Standardize elements to create a sense of cohesion between future story projects.
5) Utilize tech loadouts to create NPCs that could potentially reflect the choices made by the player in the character creator.
Our initial stories would have to be grandfathered in, but the goal was to build a library of assets that would work across multiple stories, genres permitting.
Platform: Mobile iOS and Android / Unity
Contributions: UX direction, flows, wireframes, prototypes, documentation, systems design work with engineering, copy library.
Due to the exigencies of putting out stories with several different story teams in several different art styles, our early character creator features lacked cohesion and unity with regards to patterns and layouts. However, as it became clear that we could reap a more efficient pipeline if we stopped re-inventing the wheel and made assets swappable between games, standardizing and templatizing the character creator became a top priority.
I was tasked with defining all the bluesky features, as well as iteration and prototyping. We had several key goals:
1) Create a Character Creator system that would allow users the agency to create either an aspirational or representational version of themselves.
2) The system and layout would work with either tentpole landscape properties or the more quickly iterated portrait stories.
3) Allow for flexibility in the character tree taxonomy and would not introduce untenable dependencies if a project didn't have the same category assets as another project.
4) Standardize elements to create a sense of cohesion between future story projects.
5) Utilize tech loadouts to create NPCs that could potentially reflect the choices made by the player in the character creator.
Our initial stories would have to be grandfathered in, but the goal was to build a library of assets that would work across multiple stories, genres permitting.
Too Many Different Experiences
The early character creator features across Netflix Stories were fractured, and a player would have a different experience between each story. Money Heist's character selection, by necessity, featured five composite characters. Their outfits would never change, and the selection was weighted heavily towards women characters, leaving one male character and one potentially non-binary and/or butch character for non-women.
Other early versions looked similar, but their assets weren't reuseable with other stories--the silhouettes of the mannequins changed position, angle, cropping. Layouts differed, which could produce muscle memory confusion. The selection of attributes such as colour differed between assets as well--sometimes selecting from a palette of colors, sometimes selecting from illustrated versions, as with the eye color palette items. Sometimes players thought they were selecting eye shape instead of color and were confused.
Other early versions looked similar, but their assets weren't reuseable with other stories--the silhouettes of the mannequins changed position, angle, cropping. Layouts differed, which could produce muscle memory confusion. The selection of attributes such as colour differed between assets as well--sometimes selecting from a palette of colors, sometimes selecting from illustrated versions, as with the eye color palette items. Sometimes players thought they were selecting eye shape instead of color and were confused.
Blue Sky Work
Keeping user agency in mind was one of our highest priorities. We wanted players to be able to choose not just aspirational or fantasy versions of their avatars, but representational versions of themselves as well.
During the planning phase, cultural inclusivity and disability representation were researched, and I leaned on team members and Netflix's ERG groups to provide further information to ensure sensitive representation.
I performed competitive analysis across a number of different types of games, some directly overlapping with our key demographics, and others branching a bit more afield. The Covet and Love Nikki fashion games were analysed, as well as the picrew avatar makers that are common in social media.
During the planning phase, cultural inclusivity and disability representation were researched, and I leaned on team members and Netflix's ERG groups to provide further information to ensure sensitive representation.
I performed competitive analysis across a number of different types of games, some directly overlapping with our key demographics, and others branching a bit more afield. The Covet and Love Nikki fashion games were analysed, as well as the picrew avatar makers that are common in social media.
User stories: As a user, I wante to create an avatar that looks similar to me. Representation. As a user, I wante to create an avatar that looks like a fantasy version of me. Representation and Escapism. As a user I want to create an avatar that lets me experiment with how I might look with another gender or presentation. Accessibility, LGBT+ social, Personal development
A selection of attributes divided into persistent traits and changeable traits.
Working Out Systems and Flows
There was a lot of collaboration with the tech artists and engineers around category descent trees and navigating these. Ultimately, we ended up simplifying our structure after early prototypes and layouts showed difficulty with users navigating up and down categories and sub-categories. This decision would impact the form and function of the layout we eventually chose and refined. We had multiple meetings to hammer out taxonomy, tags, filters, slots, lock mechanisms, and several features were relegated to future iterations based on technical feasibility and what we could reasonable do for an MVP.
Different explorations of palette and navigation combinations
Descent Trees - Density
Category Density
Socketing Clothing Items
Zoom Levels compared between landscape and portrait
Lock state ideas explored
Sometimes systems were thought through, but determined to be future developmental work after the scope of integrating them became clear through early design. The tagging system for global library assets is an example of one such feature consideration. The tags were intended to help with filtering which assets a game would want to bring in from the global library. There were global attributes and game attributes. The tags could be used contextually in stories if needed to give weight to decisions, or to allow for filters later as the clothing and accessory libraries grew.
Congruent Experiences
The layouts we landed on were designed to maximize the character art during character creation. Showrunners, in particular, had been unhappy with the previous stacking designs, which they felt obscured the player too much.
But while the layouts might look like they were responsive, they were actually two versions to accommodate for landscape and portrait stories. They could not be truly responsive as we needed to lock the orientation of the stories themselves. Despite this, we didn't want the muscle memory experience to diverge too far from one screen orientation to the next.
Furthermore, they needed to potentially account for item color palettes and filters in the future, while only introducing minimal stacking in the navigation.
But while the layouts might look like they were responsive, they were actually two versions to accommodate for landscape and portrait stories. They could not be truly responsive as we needed to lock the orientation of the stories themselves. Despite this, we didn't want the muscle memory experience to diverge too far from one screen orientation to the next.
Furthermore, they needed to potentially account for item color palettes and filters in the future, while only introducing minimal stacking in the navigation.
Diagrams of interface anatomy showing how they parallel each other from landscape to portrait.
Landscape prototype
portrait prototype
Next Steps
After the prototypes had been created, I passed the designs to our UI designer to create Photoshop comps. We together documented the elements that were tintable, and how to implement them in Unity. I continued to work with the engineers and tech designers on socketing clothing and accessories, determining how choices would impact each other over categories, refined taxonomy further, and worked with localization and CI on copy elements. For style guides and implementation guides, I further defined crops, mannequin positions, default avatars (to keep one phenotype from being over-represented through bias), offered resources on creating assets that were culturally sensitive, made checklists for teams to use during set-up, and worked with engineers on making sure that setting up asset trees within Unity created truly interchangeable assets.
Later, I would work with an engineer around creating a system for porting our game to television devices, which utilized the NGC app as the player's controls.
Later, I would work with an engineer around creating a system for porting our game to television devices, which utilized the NGC app as the player's controls.
Putting It All Together
Below: Emily in Paris, Sex Education, and Selling Sunset versions of the Templatized Character Creator.
Learnings
This was a large complex project that took several months, and required a lot of coordination between stakeholders, and developmental disciplines. One of the earliest pieces of friction arose over scope. I think that by delving really deep into the most aspirational version of this, and working on rapid prototypes, we figured out the earliest constraints of category design.
There was also a lot of overlap between technical design, engineering, and UX, and I feel that we should have ceded some features earlier to technical design. While I learned a lot about loadOuts and socketing, UX got a bit further in the weeds than I would have liked.
A fair number of players wanted more parity with body types and clothing available to masculine avatars, and that was something we were working to redress. (It was noted in the inclusivity guidelines for showrunners.)
We got a lot of positive feedback around player's being able to select pronouns separate from body types, and we were in the process of delivering more non-binary and androgynous body types when the project was shut down.
There was also a lot of overlap between technical design, engineering, and UX, and I feel that we should have ceded some features earlier to technical design. While I learned a lot about loadOuts and socketing, UX got a bit further in the weeds than I would have liked.
A fair number of players wanted more parity with body types and clothing available to masculine avatars, and that was something we were working to redress. (It was noted in the inclusivity guidelines for showrunners.)
We got a lot of positive feedback around player's being able to select pronouns separate from body types, and we were in the process of delivering more non-binary and androgynous body types when the project was shut down.
Credits
Primary UX design and documentation: Lis Mitchell
UI Art: Elissa Torgerson
Art Director: Ken Capelli