adidas: All Day

Lifestyle Wellness App

Client

adidas

Timeframe

September 2015–February 2017

Contributing Members

Creative Direction | David Ewald, Felix Ballerstedt

Technical Direction | David Evans, Leia Sefkin

UX Direction | Melissa Chan, Megan Hansen

Art Direction | Matthew Noe

Visual Design | Trent Edwards, Phillip Nguyen, Melodee Dudley, Elise Cramer, Ali Gary, Sarah Cespedes

Motion Design | Trent Edwards

Development | Kat Mitchell, Adrian Harris Crowne, Jenny Louthan, Marissa Anderson, Chris Sokel, Joshua Fingert, Kaitlyn Anderson

Project Management | Abby Yeakel, Jenna Simon, Justin Kent

[among other client-side contributors]

Project Summary

Designed and developed by Uncorked Studios alongside the adidas digital product team, All Day is a health and wellness lifestyle app that tracks daily activity, logs workouts, and offers a robust range of content rich “Discovery” activities that give users access to many new ways of living happy, healthy lives.

The design portion of the project spanned 18 months and included demographic research, user experience, visual design, motion design, user testing, and development collaboration. My specific contributions touched on nearly all aspects of the design process, operating as sole motion designer for the product, and also involved visual design, user testing/research, frequent client presentations, workshop facilitation, peer mentorship, and extensive developer collaboration.

In late March of 2017, adidas publicly announced the private beta of the All Day app, to be released publicly on both iOS and Android platforms at an undetermined future date.

I. Begin

In the fall of 2015, our team embarked on an extensive journey with the adidas Future digital product team. The requested deliverable was a new fitness app slated to fully replace their existing mobile fitness products with a holistic lifestyle offering that better embodied a focus around the wellness pillars of Movement, Nutrition, Mindset, and Rest. They came to us with existing research that defined a distinctly female audience as their target audience.

We dove into the wealth of information on this demographic, further defining who it was we wanted to serve with our product. Combining this with our own user research interviews, we narrowed the focus to a single individual that we felt best embodied who we wanted to speak to. We called her Sara.

II. Explore

We knew the design needed to be fresh and unlike any other graph-based and heavily circle-influenced visualizations permeating the very saturated field of fitness apps on the market. There were talks of goals and demonstrating progress toward overall health benchmarks, but research showed us that Sara didn’t enjoy feeling like she failed if she didn’t meet her goal and also wasn’t motivated by aggressive coach-like tones — though she did want encouragement when she was struggling to get on track. This was a delicate balance to achieve on both an aesthetic level and in overall tone of communication; many conceptual iterations fell too heavily on one side or the other, forcing us to start over many, many times.

III. Execute

Our team proposed many visual explorations. The option our client chose used a graphic metaphor of expanding liquid droplets mapping to an accumulation of activity or achievements tracked within various spans of time — be it hourly, daily, or weekly. This relative sizing of each unit allowed us to refrain from showing an absolute “good” or “bad,” and would give Sara a high level glance of how she was progressing over time.With the rest of the visual designers running full steam ahead, I was able to split off into motion studies around various microinteractions and the behavior of this first version of the hero visualization.

•••

As we approached a fully defined visual system, we encountered a detour in the road that took us into unexpected terrain. With the look and feel so far established in our product, the client had begun to have second thoughts, no longer feeling confident this aesthetic would produce the killer app they needed to be successful.

Thus began our pivotal design sprints.

IV. Challenge

Three small teams. Two intense weeks. One new hero.

With all hands on deck, our team split up to produce as many new explorations as possible. In my own group of three other teammates, I settled into a leading role of thought facilitation. One of the most invigorating spans of the lengthy project, my team took all research and UX requirements we had already internalized, and paired those with newly introduced branding inspiration provided by the client to create three distinct visual directions that ultimately informed a final visualization.

Through numerous checkins with the client in which I presented incremental thought process of the team and visual samples to represent our various directions, we ultimately landed on using the visual metaphor of litmus paper to represent Sara’s daily activity. The system we begun to build around this aesthetic encapsulated five key objectives the client had specified as requisite to a successful concept for Sara:

Tell her what she’s done so far
Tell her what she needs to do
Tell her how she’s doing overall
Make navigation simple and intuitive
Present an aesthetic on the horizon of the art and fashion world

Although the client admired the great depth of thinking we put into conceptual and navigational aspects of our particular brainstorming session, in the end they chose to pursue the visual outcome of a different group within our team that prioritized pattern and collage.

V. Reset

Once the basic concept was established and sold through to the client, our design team charged forward to make up for lost time and build out the complete app to these new visual specifications. I built out visuals for a specific section of the app serving up daily session style content in what are called Discoveries.

•••

After final visuals received sign off by Design Directors, I was able to move back into motion studies with the new direction. It began with defining multiple visualization patterns and their movement behaviors, and eventually rolled into an extensive exploration of microinteractions revolving around moments of adding new activity, scrolling behavior, custom view transitions, and past activity recaps.

Then came a full flushed round of user testing with the new visual system.

VI. Listen

There were a number of elements that users loved about the product we had been building, one virtually unanimous takeaway that came back in responses was that users did not like the patterns we chose to put front and center to represent their current state of wellness. They didn’t get it. For most users it gave them no sense of meaning and they couldn’t connect to it on an emotional level. So we needed to take a step back.

Revisiting the main visualization, our team developed something that maintained client objectives while accommodating the major points of feedback taken from user testing. People wanted to see color and life so they would feel inspired to keep moving forward. What came out of another round of design sprinting for new visualizations was the idea of an ever-evolving colorful haze that continued indefinitely and only vaguely represented landmarks of accomplishment. It offered satisfying visual feedback to the user, but did not attempt to blatantly quantify their achievements, forgoing the dreaded sense of implicit judgement.

VII. Respond

My contribution in this phase developed into one of the most intensely collaborative and rewarding challenges of my career. I began by deconstructing the static visuals produced by my team and proceeded to rebuild the subtly elaborate system by guiding an OpenGL developer through the structural and behavioral parameters we believed would achieve the desired experience. Over weeks of diving into Xcode and providing updated animation variables for new prototype builds on a daily basis, we were able to take initial direction, pivot based on client feedback, and finally land on a solution that far exceeded the expectations of all involved (ourselves included).

At its core, the concept adhered to a non-traditional progression along the adidas brand color wheel, maximizing unique color combinations by jumping 4 colors forward and 1 color back each time a new value was added to the visualization spectrum.

Based on research into ideal milestones for fitness achievements, 30 minute increments appeared to be a common benchmark to measure personal progress by. Operating on this information we assigned each half hour progression to precisely align to every color pairing that produced analogous value combinations.

The client responded to our conceptual model favorably and requested it take cues from both the aesthetics and animation behavior of aerosol spray paint textures that already existed throughout the product's promotional branding visuals.

They sent us reference images to further inform our direction.

Reference A

Reference B

Reference C

Through a sequence of unsuccessful attempts to build the right system programmatically, the winning solution surfaced in the form of many circular shapes layering over one another in a radial pattern, fading in and out in delayed, predetermined lifespans. This foundational structure allowed us to lay down two separate graphic elements: a base set of hazy color layers for our spectrum and a group of independently animated texture layers that ultimately brought life and intrigue to the visualization.

Radial Drawing System

Base Layer Blending

Texture Layers Applied

With the completed framework set in place, we mapped the spectrum progression to a controlled release for any variable length of workout logged in the app. Once finished with fine tuning of the animation parameters, we had a functioning prototype of this new visualization to plug into our app.

VIII. Complete

What resulted from our arduous trial and error process was eventually vetted once again in user testing sessions. To our great relief it passed with flying colors for many of the participants. The simple reward of pleasantly shifting color values throughout an active day was just enough celebratory feedback without being too prescriptive as to introduce guilt to those who don’t achieve at higher capacities.