VisuaI Design – Deanna Alcorn

fnumber

Should we present images using a Tinder-like design pattern? Or image grid? One of the fun challenges of UX design is creating a solution that’s just right for the business, the product and the customer. This post walks through the UX team’s process for defining and solving a problem.

Defining the UX Problem

As part of our new men’s service at Stitch Fix, we created a style profile for men to indicate their preferences. During a closed beta period, we tested several questions and identified those to include in the public launch.

One of the questions – the style sphere – asked which outfits they would wear. In the beta test, we presented customers with 24 different outfits. We learned that they enjoyed answering the question, and that a diversity of images was key to helping them feel like we had captured the breadth of their preferences.

The style sphere question was initially created using a third-party survey tool, optimized for desktop.

When presented with the task of designing the style sphere question-and-answer component for the men’s public launch, the UX team identified several questions:

How do we get customers to evaluate as many images as possible while keeping it fun and fast? Would 24 feel like too many, especially for mobile phone users, leading to decision fatigue or drop-off?
What’s the right trade-off between size of image and perceived length of question? What level of detail will users need to see in order to assess each outfit?
Should the outfits be presented in a specific order?
How will the business use the customer data, and how might this inform the UX thinking?

Collectively, these questions pointed to the key UX problem of: How do we present a large batch of images on the phone, so users can easily evaluate each style?

Cross-Functional Decision Making

At Stitch Fix, a core team of stakeholders meet to determine direction and scope at key points throughout a project. For customer-facing projects, the team typically includes strategy, marketing, data science, UX and engineering team members, and sometimes merchandising, styling and customer service partners. Once the UX team identifies key questions, we take them to the core team for discussion. This critical step shapes the path of UX research and design and ensures that we’re working on the right problem at the right time.

Number of images: Including 24 outfits was beneficial for showing a diversity of styles during beta testing on desktop, so we agreed to rely on user research to determine if it would cause fatigue or frustration on a phone.
Size and length: The balance between image size and length of the question would also be determined by user research.
Ordering: We randomized the order of images to reduce the chance of earlier or later images receiving more attention from users.
Business goal: The goal of the merchandise and styling teams is to understand the customer preferences for style genres, such as All-American, Athletic, or Hipster. Encouraging the customer to assess the whole style is more important than having them hone in on specifics, like shirt pattern or shoe type. User research would help us understand how the presentation of the question would support this goal.

Planning

Based on what we wanted to learn, we chose the research methodology and level of fidelity – usability testing an HTML prototype. In order to accurately gauge the speed and ease at which users would answer the question, we needed a real-time interactive prototype. This meant that we needed to get the project on the engineering roadmap. Our engineering resources were in demand, so it was critical to plan ahead.

Design

Rapid Sketching

Our UX team meets bi-weekly to share projects and hold workshops, so it’s a perfect time to tap into the talents of the team and occasional visitors who drop by. An effective group brainstorming technique we employ is based on the 6-8-5 method, adapted by Google Ventures into Crazy 8s. With a group of seven people, we rapidly created over 50 sketches for the style sphere question.

rapid_sketching

Ideas ranged from Tinder-like swiping to thumbnail summaries, created with the iPad and by hand.

Mockups

We further explored and refined the brainstorming concepts on paper, then used Sketch to mock up the designs we wanted to test. Having already created a design system for the women’s style profile, we were able to quickly build high fidelity mockups to present to business partners. During our weekly core project team meeting, we reviewed the designs to ensure alignment before testing.

refined_sketches

Refined sketches allow for continued, quick exploration of interface layouts and details.

What to Test

We tested two versions of the question on mobile web: 1-column and 2-column. To get a realistic read on levels of difficulty and fatigue, we set up a staging site with the actual onboarding experience and included the question in situ. We ran two sets of usability studies. In the first study, the user saw the 1-column version in the context of the style profile. After completing the profile, he interacted with the 2-column version, then was asked to compare them. In the second study, we reversed the order to reduce bias. We also enabled pinch-and-zoom functionality to observe whether or not anyone would naturally use it.

test_layouts

1-column and 2-column layouts for testing

Usability Insights

Most users preferred the 2-column version:

It felt faster and easier to scroll through and complete the question.
The smaller image size made it easier to process each image.
Seeing more than one image at a time helped users make decisions.
No one tried to zoom into the images or tap to get a larger size.

Two of the 12 participants had no preference between versions. One man did prefer the 1-column version – he said it was easier for him to see each image.

We noted several negative responses to the 1-column version:

It felt “confining”.
There was too much scrolling; it felt too long.
It felt like there were too many options. One user exclaimed, “You’ve got a lot of different options here, holy crap! [It’s] going slower than I want.”
It was tedious and harder to make a decision about each outfit.
We observed that users spent more time considering each image in the 1-column version; we believe that seeing more detail in each image made it harder to assess the outfit as a whole.

Testing Conclusion

Circling back to the UX problem of how to present a large group of images for easy and quick evaluation, we had an answer: The 2-column layout was more effective. The size of the images worked well for conveying overall style, and the ability to see multiple images at once increased the speed and ease of answering it. Showing 24 images in the 2-column layout did not feel too cumbersome or tedious, so there was no clear UX rationale for reducing the number of images.

Takeaways

launch_layout There are many different ways that we could have designed a 24-image question with yes/no answers. In this case, several team members had envisioned a Tinder-like interface with individual cards. By initially testing one image per screen versus four images, we learned that users preferred to see multiple images at once, pointing us away from pursuing the Tinder pattern. Not only were users able to make decisions more quickly and easily, but they also focused on the outfits as a whole. The resulting data allows our stylists to better select items that the customers will love.

With a clear winner that worked well for the customer and the business, the UX team could take on the next challenge in the revolution of shopping.

Applying design principles to visual communications increases clarity, readability and memorability of the intended message. Five key principles include hierarchy, proximity, alignment, contrast and repetition. These principles can be demonstrated simply with nine-square grids:

Following are brief explanations of each principle, along with good and bad examples applied to postcard designs.

Hierarchy: prioritizing information based on importance.

Good use of hierarchy ensures that the most important items are noticed first, and it guides the viewer’s eye through the page or screen to see additional information.

In this example, the nightcrawler is the first read. It takes priority through the use of size, color, shape and texture. The title and body copy blocks are secondary reads, and the copyright information is the last read.

This postcard for web development services displays a poor example of hierarchy. The four boxes and titles are of equal size, resulting in a busy layout with no clear priorities.

Proximity: grouping, or chunking, elements together.

Proximity helps the viewer interpret information correctly and easily by showing which elements are associated with each other.

Information on the Fear Over Frisco postcard is grouped into sections according to meaning: performance group and event name, tagline, headline and logistical information.

The back of this postcard for a band does not make use of proximity. Information is divided into sections, including LP Discography, Media Coverage and Press Quotes, but without any spacing between the sections it is difficult to quickly grasp them. The result is another busy layout that viewers would likely not invest time in reading.

Alignment: lining up and organizing content using a grid.

Aligning elements creates structure, making information easier to grasp.

The Fine Art of Poisoning card employs a centered alignment from the dead body’s face to the copy blocks and row of images. The text and images are also aligned to the margins of the card, and the three images are aligned horizontally. All of these choices result in a structured, organized layout.

A calendar is a perfect example of content that can be aligned to a regular grid, but in the case of this yoga class schedule, the designer missed an opportunity to make the card more readable. As shown by the gray line overlays, the size of the columns and gutters are uneven, and there is a missed opportunity to horizontally align the type at the bottom.

Contrast: differentiating content.

Contrast creates clarity and readability.

This card for a wedding reception party uses contrast effectively. To the right is an exaggerated version that highlights the key areas of contrast—the bride’s veil and the white type.

This card for a yoga instructor is difficult to read due to lack of contrast. The headline, set in a fancy typeface, does not stand out against the body due to ineffective use of the drop shadow, type color and placement. The URL at the bottom does not have enough contrast to stand out effectively against the yoga mat. Additionally, the shapes created by the body, its shadow, the landscape and the headline all lead to a busy, confusing design. The high-contrast version to the right exaggerates the problems.

Repetition: using similar elements or properties of elements multiple times.

Repeating elements unifies and organizes a layout to direct the viewer’s eye across a page.

The Eyes of Tammy Faye card uses repetition of color and shape effectively. The reds draw the eye around the page, all the way to the bottom, and the black mascara-laden eyelash shape is cleverly repeated to call out the narrator’s name (RuPaul Charles).

This promotional card for a printer also incorporates repetition of shape and color (rectangles and reds), but overall it’s not effective in leading the eye through the design. Other principles that are poorly executed on this card contribute to the problem.

All Principles at Work

The promotional card for 4by6, a printer based in Oakland, California, is an excellent example of the five principles at work. For hierarchy, the photo is the first read, and the G46 headline is the second read. The repetition of the blue color helps guide the eye around the card, as does the grouping of information into logical sections. Contrast is evident in the type colors and photo against the white background. The size differences between the photo, headline and body copy are another form of contrast. Alignment provides the structure: three elements are aligned along the left margin, the two copy blocks are top-aligned and the logo is left-aligned to the second copy block. Balance, another principle, is achieved through good use of proportions and the placement of the G46 headline in relation to the man’s eye-catching expression, particularly the mouth.

Make Life Easier for People

As illustrated by these postcard examples, skillful application of visual design principles makes the difference between a professional, clear communication piece and an amateur one. Good design minimizes the cognitive work required by people, making the process of navigating through our information-dense world a little easier.

Image copyrights are held by their respective brands and licensors.