The challenge

Strengthening a business partnership. The American Cancer Society (ACS) and National Football League (NFL) are partners in the fight against cancer. The NFL wanted to expand its efforts as an advocate of cancer prevention. ACS wanted to promote access to cancer content on the newly responsive redesigned experience we built for mobile UX.

The UX design team at ACS was tasked with building a health assessment tool for the NFL's 187 million football fans that could (1) be easily understood, (2) completed quickly, (3) provides information about cancer prevention and helps fans understand how they play a part in reducing their risk for cancer.

We worked through the design thinking process and developed a mobile app that generates a personalized prevention plan, and helps NFL fans understand how to reduce their risk for cancer while championing their team spirit.

The vision

Emotional design. A simple and elegant mobile app with a clean UI that can be completed in five minutes, observes accessibility, and incorporates emotional design with personalization, animations, and micro-interactions.

My role: UX Architect & UX Writer

NFL audience analysis

To inform design, I reviewed quantitative & qualitative data about NFL fans provided by the National Football League

User flow

I created a user flow diagram to lay out the movement through the app from start to final interaction, communicate tasks the user can accomplish, and the content output the user will receive (personalized content and prevention plan based on the user's answers to healthcare questions). The user flow highlighted opportunities for micro-moments with users across devices, social media touchpoints, and content design.

The interaction design needed to be intuitive and flow smoothly and quickly. Animations and micro-interactions focus the user on the purpose of the questions, create less reliance on text (mobile UX design), and facilitate emotional design. I worked closely with the visual designer to review the wireframes and map them to design themes.

Interaction design

UX content design

I created a content flow diagram for the developer, to communicate the logic for generating the content placed into the personalized prevention plan. Different versions of the content will display based on which answers the user has provided in the app. Here's the flow diagram and content decision logic.

Cross-functional collaboration

I collaborated with a copywriter on the copy shown in the personalized prevention plan, presented as the Most Valuable Prevention (MVP) tips. See what we did there? ... MVP.

Using Invision, I created interactive prototypes from mockups for an A/B test to evaluate two navigation concepts: (A) continuous vertical scroll or (B) step-by-step screens.

10 users were tested remotely with each participant using their own phone. The main focus of the test plan was intuitive task flow, functionality, content design, and perception of value. A concept was chosen for development based on analysis of user feedback.

We used feedback from user testing to modify the design -- some interactions were further optimized, some questions were modified, some features removed, and changes were made to the copy to accomodate mobile design.

Business ROI

The mobile app was featured on both the NFL and American Cancer Society websites in strategic partnership for the "mission to save lives, celebrate lives, and lead the fight for a world without cancer".

The outcome

The mobile app was delivered on time and within budget. The design solution matched the vision.

Users benefit from content about ways to reduce their risk for cancer, along with direct access to the American Cancer Society's newly responsive redesigned website, plus a chance to win a trip to the big game.

The project promoted and strengthened the business partnership between the NFL and ACS. Additionally, UX strategy was recognized as a business advantage which increased UX maturity.

Lessons learned

The UX designer's job is not only to delight users, but also to bring value to the business. The ability to make a mobile app look and feel intuitive and simple, while meeting the requirements of the business and stakeholders within a Lean UX timeframe takes design thinking.

When moving through the design process quickly, sometimes a Lean UX timeframe requires a prototyping tool in which you can quickly create wireframes for review and feedback. For example, Axure was available for high-fidelity interactive prototypes with detailed design specifications, however, Balsamiq was the better tool for quickly creating low-fidelity wireframes for review and user testing.

Being able to work well with the team to move through the design thinking process, while presenting to business stakeholders at the National Football League (NFL), resulted in both a strengthening of the relationship with a business partner and an increase in UX maturity. UX strategy was recognized as a business advantage.