Objective

Move away from Microsoft emojis

The previous design for the E-Tree feature had been done quickly to keep the engineering team unblocked. MSN designers used any existing assets they had access to in order to create the visuals for the feature, and ended up using Microsoft's emoji assets for the main design elements of the experience.

This was a violation of Microsoft's visual design standards, as emojis are never to be used as UI elements or illustrations.

Align to the established Maximal illustration language

The studio's established language for illustration was called Maximal, which was intended to add expression and delight to our web experiences. It was defined by the following characteristics:

Integrate generative AI tools into the visual design process

Our team took this project as an opportunity to utilize a tool like Midjourney to drive our art direction. This project was a perfect candidate to identify the strengths and weaknesses of the technology and how it could help our studio going forward.

Moodboarding/Auditing

We started with an audit of competitor apps for MSN's E-Tree feature to start to identify common visual themes across similar features and establish a spectrum of cartoon-like to realistic.

Phase One: Tree Design Exploration

The three designers on the project dove in on tinkering with prompts and style references to create an abundance of visual explorations. Here is a small sampling of the breadth of generations we created over the course of about a week.

We then looped in the wider MSN design team to begin narrowing down the visual explorations to prepare for user testing. We had each team member cast votes on the generations they felt best achieved the fundamental principles of the Maximal visual language:

• Bold/rich

• Vibrant/playful

• Layered/textured

We then refined the options down to 6 main concepts that covered a spectrum from cartoon-like and playful to realistic and literal. With this range of potential directions we were ready to run a user research study.

Phase One: User Testing

The team used an internal tool for user research studies to run side-by-side tests across a global pool of thousands of judges, assessing the judge's preference on the visual direction of the tree.

UXLabs Test One

Through this data we gathered the following insights:

• Judges responded most negatively to the existing emoji tree design (validation that a visual refresh was necessary)

• Judges seemed to prefer more realistic-looking tree shapes and textures over the more stylized and artificially-textured trees

UXLabs Test Two

With the insights from the first test, we ran a second test on a separate pool of judges to further narrow down the directions, slightly altering the background to a more realistic image, and testing 4 variations between the concepts that performed best in Test One.

Through this test we gathered the following insights:

• Judges reaffirmed their preference for the more realistic renderings of the tree (statistically significant result for Concept B, the most realistic rendering)

• Judges generally did not prefer the more stylized/textured treatment

Phase One: Refinement

Based on the results from the user studies, we proceeded with the "Cinematic" concept by iterating on the design of the tree and how it would scale to all stages of the tree growing process.

We settled on a set that felt realistic with pops of detail and color that enhanced the visual of the tree.

Phase Two: Exploration

With the tree design finalized, we moved on to exploring the background visual for the feature in Midjourney, again iterating along the spectrum from realistic to more dream-like and tactile.

Phase Two: Refinement

When we felt we had some good options, we tinkered with the existing compositions and began applying them in context to see how they held up with the tree in the foreground.

The internal team felt that the tactile treatment for the background added more visual interest by featuring the tree in more of stage-like setting. While the more realistic imagery may have matched more closely with the styling of the actual tree, it felt a bit too much like stock imagery and had a flatness that didn't lend itself well to the feature.

Final Design

The assets were finalized on a direction that allowed for the background to feel like a stage/platform that lived behind the UI of the feature, and that felt like a stage for the tree asset.