Target

I spent 18 amazing months as a contractor with Target, working on their customer iOS apps. I had an opportunity to work with absolutely every aspect of this app, and many of my contributions are still visible in the app today.

PROJECT BRIEF: Target brought me on board to lead a major redesign. In order to meet Web Content Accessibility Guidelines (WCAG) for color contrast, Target’s website and apps needed a new color palette. Once selected, this palette would be applied to every asset, screens, and online store. The final redesign not only met accessibility requirements, but it improved the overall visual impact of the app. By stripping away unnecessarily heavy UI, we created a more elegant interface. Here is the process I took to create an accessible color palette and apply it to the Target app.

GUIDELINES: Any color in a digital space can be measured by a relative luminance. Compare the relative luminance of two colors, and you find the contrast ratio between the two colors. This ratio ranges from 21:1 (polar opposite colors) to 1:1 (identical colors). In order to ensure there is enough contrast between foreground and background, the Web Content Accessibility Guidelines provide minimums to abide by.

Achieving a new color palette required the buy-in of multiple organizational teams: Accessibility, iOS, Android, Web, and ultimately senior management. In order to meet accessibility requirements, a color must have a sufficient contrast ratio against its background. This ensures that text is legible for people with limited vision. As I selected colors for the palette, I did so based on the brightest possible values that passed at minimum contrast.

I built this tool, an interactive Color Contrast Visualizer, in order to see the effect of color-contrast constraints on the visible color spectrum. Using the sliders, you select a background color in RGB. Above, you’ll see the the colors on the spectrum that pass against that background. This tool helped me to communicate to designers, engineers, and managers how the WCAG guidelines limit our color options.

This forensic approach to studying contrast ratio guidelines gave us a scientific basis from which to have our internal discussions. Color is a personally subjective experience; making it empirical helped to keep us all on the same page. Below are some of the charts I composed demonstrating how I selected colors for the palette.

These diagrams made our multi-team conversations about color much easier. It took a subject experience, like visualizing color, and made it an objective measurement on which we could all agree. We used this method to adapt the iOS, Android, and web teams to the same color palette.

PRODUCTION STRATEGY: The Target app contains hundreds of different screens, each with different states. In order to provide QA a visual guide to check against, I reproduced the app entirely inside Photoshop. In order to give myself more control and work more quickly, I used color swatch files linked to reusable UI frameworks, all linked into hundreds of screen compositions and icons. Building my files this way meant I could quickly update hundreds of screens simply by editing a single file. This gave me an advanced method of testing the visual redesign.

DESIGN SYSTEM: At the time I created these linked assets in Photoshop, the term “Design System” was not nearly as popular as it is now. I simply created a folder of reusable components, like navigation bars and buttons, and linked them into design compositions in Photoshop. This incredible flexibility allowed me to quickly make one change, and see it appear instantly across dozens of screens. This helped us feel confident in our new design and color choices.

SCREEN VALIDATION: From the start, we knew we would rely on the QA team to visually check every screen of the app after implementing the new color palette. We wanted to catch any unexpected issues early, and we wanted to provide the QA team a way to test against our intentions. I created a composition for each screen of the app using the linked objects, and I arranged the screens into a chart, in order to communicate the navigation hierarchy.

WHAT I LEARNED: I learned to seize the opportunity to be bold and daring. This redesign went to the heart of Target’s brand, business, and customers. The previous interface was hard to read, overly red, and looking outdated. The new interface is light, bright, and honors the Target brand. The technical achievement of creating a design system from nothing helped later on, as design systems became more popular and easy to use.

PROJECT BRIEF: With the success of the app-wide color redesign, we moved onto redesigning the PDP: Product Display Page. In an app devoted to shopping and e-Commerce, the PDP is the one place to get information about products sold by Target. We worked to create a more engaging PDP that provided ample space for content.

I phrase our questions internally as “How might we….” in order to provoke interesting conversations.

• How might we surface information that encourages sales

• How might we help guests find a better alternative?

• How might we promote sales online and in-store?

CONCEPTS: I explored many versions of the PDP, trying different methods of presenting the same collection of information. In every instance, I accounted for the importance of in-store shoppers (who would appreciate the aisle location information) and online shoppers (who want shopping methods like pickup and shipping).

PROTOTYPE: I took the PDP design with the best tested feedback, and I recreated it inside FramerStudio. I then tapped into Target’s actual, live JSON feed of product information. This allowed me to test my design with a variety of product title strings, photo images, and other details. This flexibility gave me the confidence to know that this design worked across hundreds of products and product categories.

HANDOFF: In order to support our development team, I created detailed specifications showing how the interactive elements look and behave. Since this interaction would allow shoppers to select their preferred size, color, or other detail, it was important that this be perfect.

WHAT I LEARNED: People love to shop in the Target app! Every product page you see in the Target app is a template called the product page. Virtually every guest that uses this app will see this page, and it is our one shot to sell you on any product. If you do not add the product to your shopping cart from here, you likely never will.