Communication Design

Visual & Motion Design
July 2015 - August 2020

Crafting the story of executive keynotes and product visions

To protect intellectual property, some product and client information has been obscured.

Summary

Opportunity

My Role

Outcomes

Reflection

Opportunity

"Assessing the effects of physician-patient interactions on the outcomes of chronic disease." A study from the Public Health Association."A Time-Motion Study of Primary Care Physicians’ Work in the Electronic Health Record Era." A study from the Journal of Family Medicine."Why doctors hate their computers." An article from The New Yorker.

My Role

I owned and led teams through many of this project's phases:

  • Planning research, design, and testing methodology
  • Conducting and analyzing research
  • Defining user scenarios for design and demos
  • Prototyping
  • Visual and interaction design
  • Shaping usability tests
  • Scoping the MVP experience alongside voice vendors
  • Creating executive communications about the product's roadmap

Outcomes

"Nuance Advances Conversational AI with Dragon Medical Virtual Assistant for Hey Epic! Virtual Assistant in Epic Hyperspace." An article from Nuance.
"Now, having access to this technology in Hyperspace will further our ability to gain situational awareness and access to accurate, timely information that helps us treat the patient to the best of our ability in the moment."
- Dr. Patrick Guffey, CMIO, Children's Hospital Colorado
"With a nod to disco era, Epic Systems Corp. looks to Cosmos, voice-activated software." An article from the Wisconsin State Journal.
"Perhaps the biggest “wow” moment of the day, based on audience reaction, was the demonstration of an “Alexa meets Epic” technology of sorts — voice-recognition software designed to let doctors conduct patient visits without using a keyboard... 'That visit took zero clicks and zero keystrokes,' Gerhart said to audience cheers."
"Epic to debut ambient voice technology assistant at HIMSS20." An article from Healthcare IT News.

Reflection

Summary

Opportunity

My Role

Outcomes

Reflection

Opportunity

My Role

Outcomes

"Mass vaccination event gives 10,000 elated Coloradans life-saving COVID-19 vaccines. One man also survived the 1918 pandemic." An article from UC Health.
" 'We’re out here in the middle of a parking lot. But each tent has handheld devices that look like smart phones. They’re called rovers. And in real time, the (health care providers) are logging into Epic, (the medical record),' Deanda said. At the push of a button, providers could track their patients so they could quickly get to the important task at hand, pushing vaccines into arms. 'The secret sauce is IT,' said Zane."
"Epic, Cerner offer updates on COVID-19 vaccine rollout efforts." An article from Healthcare IT News.
"Epic, for its part, noted that the company expects to add up to 100 additional sites in the next 30 days. The vendor also said its software is being used to administer approximately 500,000 vaccinations daily, both at mass vaccination sites and traditional clinical settings."
"SAN FRANCISCO LAUNCHES FIRST HIGH-VOLUME
COVID-19 VACCINATION SITE." A publication from the City of San Francisco.
"The high-volume vaccination sites, like the new site at City College, will be complemented by targeted efforts to ensure communities most highly-impacted by COVID-19 receive equitable access to the vaccine. These targeted efforts include mobile vaccination teams, community vaccination sites, San Francisco Department of Public Health’s community clinics, and other safety net clinics in neighborhoods such as Chinatown, the Mission, the Western Addition, and the Bayview."
"Hawaii’s first mass vaccination to kick off on Monday." An article from the Honolulu Star Advertiser.
Hawaii Pacific set up a large vaccination site at the Honolulu Pier 2 Terminal. They bypassed the restrictive network and power needs of desktop workstations by using the mobile vaccination workflow.

Reflection

Preface

Opportunity

Solution

Certified nutritionists and fitness coaches create achievable plans tailored to a person’s goals, health history, and lifestyle.

Those plans, the material needed to carry them out, and personal coaching are conveniently accessed through the already-successful Peloton at-home fitness app.

Clear progress indicators, social support, and financial incentives are all delivered in-app as encouragements along the journey to wellness.

My Role

I added competitive analysis and user research to an MBA candidate team's market research. I then designed the product, from info architecture to prototyping, testing, and a high-fidelity pass. More about the process is here.

Some Context

Well’s design system is based on Peloton’s mobile experience.

Frankly, it was weird not working with their designers on this project. The Peloton app has some very nice touches alongside decisions I found surprising — all things I’d like to hear more about.

Look for this tag:

design system & brand

in the Product section to read my response to some of those decisions.

The Process section has even more, like why I choose to replicate their use of a top and bottom tab bar for navigation.

Peloton's current Classes screen (left) shows the double tab bar navigation.
Class Details (right) largely inspired the Recipe Details screen I designed below.

Peloton's Classes and Class Details mobile screens.

Health plan rewards are increasingly available.

More and more, health insurance providers are offering rewards for members who take steps toward healthy living. Humana, just one example, offers gift cards for exercising a set number of days. Submitting a record of one's activity is sometimes a manual, multi-step process.

Why take this on?

One of the MBA candidates introduced me to Well when it was still an idea for their capstone project. I loved the problem space they were working in. As someone who has tried many different meal and fitness plans with mixed success, I could relate to it.

I had also been fascinated by the takeoff in telehealth during the COVID-19 pandemic. This product would feature an analogous experience (coach meetings) where I could explore some design patterns I had on my mind.

Product

Meet Susan

Since Peloton Well is tailored to each user's unique needs, the product mockups below are framed in an individual user's journey to wellness. Susan, our user, is a persona generated from user interviews. Here's a bit about her:

  • She wants to lose weight while building strength and flexibility.
  • Her sense of progress comes from being able to take longer walks, experiencing less joint pain though the day, and body change.
  • She doesn’t enjoy most strenuous exercise, and only wants light activity.
  • She prefers a collaborative effort and support structure over a competitive environment.

Onboarding

After agreeing to try out Well, Susan is asked a few simple questions that inform which service is recommended for her. Once signed up, she can sync her health insurance, then fill in more details based on the services she’s interested in. All of this informs her first coach meeting and wellness planning.

The Onboarding questionnaire screen.

This mockup can scroll.

The recommended plan screen.
The health insurance sync screen.

Plan

A couple months after that first coach meeting, Susan is in the groove with a nutrition and fitness plan that supports her goals. She visits her Plan daily to track the meals and workouts prepared by her coaches. From here, she checks out how to cook dinner before her next coach meeting.

The Plan screen.

This mockup can scroll.

The Recipe Details screen.

This mockup can scroll.

user interviews
&
competitive analysis

Reviews of other apps mention the tedium of logging meals and workouts. Subscriptions offer full meals with quicker logging, but none offer pre-selected meals catered to a user’s goals.

Frustration with data entry was reinforced in the interviews I conducted:

"It’s hard to craft a plan to log it, and it was also difficult in the app. I would say '3 eggs' and it would give me 15 different options of how to make eggs. Some of those may be valuable, but a lot of times, they’re not."
"I'm looking for a simple, rudimentary tracker, not an olympic athlete level of precision."
design system & brand

Meals and workout classes are both accessed from the Plan, so 'Recipe Details' has a consistent layout and style with Peloton’s 'Class Details' screen. If working with Peloton, I’d experiment with how prominent the topmost summary stats are compared to the hero image.

Task-based testing

Clear, accurate information helps folks understand the impact a meal will have on their plan. It can guide them to wise dieting decisions, and by extension, help in achieving their goals. I was glad to see the nutrition visualizations were understood by all users during task-based testing. From one of them:

"Oh that's cool, underneath, it shows what my calories will be! I've done MyFitnessPal and Weight Watchers, and I've never seen that idea. Really cool!"

Goals

Susan wants a refresher on her progress before her coach meeting. The Goals screen show her what’s new and where she is on track. It’s encouraging to see her Peloton milestones, team goals, and potential rewards here too. A broader historical view of what impacted her goals is a tap away.

The goals dashboard screen.

This mockup can scroll.

The Goal Details screen.
competitive analysis

Other products struggle with giving a brief bird's-eye view of wellness information. Some provide data of questionable relevance or meaning to someone’s personal goals. From a few App Store reviews:

A quote about a frustrating sleep score.
A quote about frustration while scrolling to see personal information.
“I saw that my sleep had been given an arbitrary 70-something score which I cannot remove to just view the actual data. It’s on every screen. That’s a C on a test. I felt miserable and like I wanted to give up”
- App Store Review
“Now the new app has changed to this ugly list layout where you have to scroll and click to find the things you used to be able to see and understand clearly with one glance. I feel so sad now when I open my app.”
- App Store Review
Task-based testing

Most participants felt the dashboard was clear and gave the right sense of progress at a high-level. The wording on a few widgets, however, caused confusion for most participants. I iterated to add clarity, wrestling with how many words to add in a compact space. I'm still running tests to vet this.

GOING Further

I would need substantial continued feedback from users on this dashboard. It’s the hardest to test when it’s meant to be unique to a user, and the content could vary so greatly. I want to know what stats speak meaningfully to different goals, and how folks feel when they see their data.

Beyond this screen, I’d like to design a celebration experience for when a user achieves their goal. I imagine a fun notification, motion graphics, and a coach’s congratulations.

Coach Meeting

Susan is notified that it’s time to meet, so she jumps into the call. It’s easy to review her plan and goals, or even take down notes, as she reviews the last few weeks with Maryanne.

The Coaching videoconference screen.
The Coaching videoconference screen with the Goals dashboard open.

This mockup can scroll.

MARKET RESEARCH

In-app video coaching differentiates Well from other products, and is perhaps the most unexplored space in the market. Peloton already has a video call feature for Bikes and Tread, so I assumed there would be a low barrier for them to implement this service.

analogous insight

These videoconferences could be much like telehealth visits between doctors and patients. I’ve heard from physicians how valuable it is look at the same info, when coming to a mutual understanding of a patient’s health. It’s important to do that while maintaining the sense of presence from speaking face-to-face. I was excited to design this all-in-one view.

Task-based testing
"It's nice that those [sidebar features] are all built in, and I don't have to toggle... or don't need to be on multiple devices. I’m thinking of when I was online teaching, I needed so many devices to see everything at the same time."
"It's just right there. I'm very happy that it doesn't take my coach off screen… I have space to see everything — it feels nice."
GOING Further

If this product was live, I'd use feature tracking to see how often Plan, Goals, and other tabs are accessed to inform discoverability and real estate tweaks.

Coaching

After the meeting, Susan is brought to the Coaching screen, which keeps track of all her interactions with Maryanne and Crystal.

The Coaching screen.
The Coaching chat message screen.
task-based testing

I was concerned folks would mistake Messages for Meetings and vice versa. None of my participants mis-tapped here, but some hesitated between the two. After further distinguishing these sections, I’d still like broader data to inform if more change is needed.

GOING Further

Users can see a record of all past meetings, with snapshots of their goals and plan at the time alongside notes they took down. I assumed this wouldn’t be used too often, so I put it a tap away. I’d implement feature tracking to test that assumption.

Social

The next day, Susan is about to log breakfast when she’s notified of new Social activity. The workouts, meals, and achievements her teammates have posted even give contextual tips to Susan based on her own plan.

This mockup can scroll.

Process

Market Research

My MBA candidate collaborators first identified the opportunity with a combination of academic article review and surveys of potential customers. They identified Peloton as a promising partner, defined a feature set that would fill unmet needs in the market, and verified the potential success of the product with a choice-based conjoint analysis.

User Interviews & Content Research

I sat down with a few folks to get a sense of their wellness goals, what success looks like to them, how they collaborate with others, and experiences they’ve had with other products. I used one interview to craft the story and content of a lightweight persona: Susan.

I also investigated the typical content of nutrition plans, fitness regimens, and health plan rewards.

Competitive Analysis

I explored a number of nutrition-tracking and fitness apps and read app store reviews to get a sense of where Peloton Well could offer a better user experience. Here is some of what I found:

  • Tedious planning and data entry were common across the board. Well would offer full plans that queue up complete nutrition and fitness information for one-tap logging.
  • A pain point in many apps is searching for meals. That seemed to do more with search logic and deduplication instead of interaction design, so I didn’t feel compelled to address it.
  • These apps varied greatly in visual interest. The ones that invested in delightful graphics got praise from reviewers (and from me) I felt a need to keep pace with or exceed what some of the more successful apps had done.
A competitive analysis grid and logos of the comparable products.

Peloton Design System & Brand Inventory

Creating something that fit right into an existing app meant understanding their info architecture, tone, typography, iconography, palette, padding, controls, and intentional departures from platform convention.

I'll admit one inconsistency in my designs: to save a bit of cash, I opted to use San Francisco Pro instead of licensing Abitare Sans.

Information Architecture

Figuring out how to organize all the proposed features into the existing app was a challenge. I considered three options:

  1. A single tab that housed all of Well's features
  2. Integrating the features into different parts of the existing Profile tab
  3. Creating a standalone app (like Nike Training and FitBit do)

I reviewed these with the MBA candidate team, weighing each against Well’s value proposition and users’ needs. We decided that fracturing the Peloton experience (3) or nesting Well too deep in the app (2) could make everyday use frustrating, and make it hard for users to connect the dots between executing their plan and the encouragement they receive in turn.

One cohesive tab (1) offered the most accessible, efficient, and cohesive experience. And, a top tab bar for sub-navigation hierarchically under the bottom tab bar is a pattern that Peloton already employed. I assumed this pattern is, while unconventional, vetted and working well for Peloton users.

Peloton Classes top tab bar.
Peloton Classes Top Tab Bar
Peloton Well top tab bar.
Peloton Well Top Tab Bar

I decided the Well tab would replace the existing Featured tab, assuming the latter was not often used. I then planned a few usability testing tasks to assess if the navigation posed issues to new users. That testing showed the double tabs caused minor confusion, but nothing that impeded workflow completion.

Here’s a few more routes I’d pursue to inform this decision if I was working on this product with Peloton’s UX team:

  • Confirming the Featured tab isn’t often used, and testing how discoverable its new in-app location is
  • Longitudinal A/B (or A/B/C) testing and qualitative feedback on the options above. I’d love to do this with new and veteran users.
  • Live user activity monitoring of navigation issues for both Well and existing tabs

Sketching

Goals dashboard sketch.
Goals dashboard sketch.
Coaching sketch.

Wireframing & Prototyping

Recipe screen wireframe.
Goals screen wireframe.
Social screen wireframe.

Task-based Testing & Critique

I designed and conducted a formative study assessing task completion and subjective ease of use. Results were consistently positive across tasks and participants except for interpreting the wording on a few goals widgets. I iterated between rounds and participants found that dashboard increasingly clear.

I held a critique with UX designers and researchers from a few industries. They offered great feedback on how to present information and how to make Social content more compelling than comparable apps.

Task completion rate was 96%.The UMUX Lite score was 6.63 out of 7.

Hi-Fi Visuals & Content

The last thing to do was flesh out some content and polish a number of graphics throughout the app. Check out the final product above.

Going Further

There’s a number of ways to expand and iterate on Well’s features, content, and experience. Here are some that I find more interesting:

  • I’d love to craft the coaching experience, like how they manage and coordinate a number of clients with individualized needs.
  • Using health plan rewards to purchase Peloton equipment, or even paying for Well’s subscription, would be an interesting interaction to design. Seems like a good business opportunity too.
  • Integration with grocery and meal planning apps would make for easy plan-based shopping.

Reflection

Though it offered an info architecture challenge, working within an existing app and design system was engaging throughout the project. I’m used to both building things from scratch and scrappily borrowing from existing patterns. This project afforded me a healthy mix of both.

In taking stock of the Peloton app, I realized just how different my Android’s feature set could be from iOS. Whenever I needed an up-to-date look at how the app was designed, I had to borrow a buddy’s iPhone. It made me wonder if I should switch back to being an iOS user to get the latest and greatest.

Photos by Coqui Chang, Louis Hansel, Beci Harmony, and Dr. Josiah Sarpong on Unsplash; and Victoria Borodinova, Zen Chung, Hannah Nelson, Samarth Singhai, nappy, ‘the happiest face =),’ and tomateoignons on Pexels.
Some icons were made by these artists on the Noun Project: Rahmat Hidayat, Lemon Liu, iconsphere, Aybige, Lyhn, Binpodo.
Recipes by EatingWell.

Other Work