Mobile App for a Health & Wellness Platform

company
RedBrick Health (merged with Virgin Pulse)
Project
Native iOS app
Challenge
Design RedBrick’s first native iOS app
Solution
Key portions of web-based member portal were redesigned for a native iOS app experience
Role
Lead UX Designer
Work Completed
Wireframes and interaction details

Approach

Strategic Objectives & User Needs

One of my key projects at RedBrick was their initial iOS app. They have a very robust health and wellness platform that serves millions of members via the Client Portal that was primarily accessed via user’s desktops PCs.

Leadership hypothesized that daily engagement for members could be increased by making Client Portal content and functions available on mobile devices. A mobile team was spun up that would develop an iOS app internally and partner with a vendor for Android development.

Two core aspects of the desktop experience, Journeys and Track, were the minimum needed for the initial rollout of a mobile app. The basic requirements were:

  • Journeys: Select a Direction, Journey, Path, and Steps each with the same capabilities and functions as the portal.
  • Track: Select activities and be able to enter necessary information for each.

I began the process of reverse UX’ing the existing Client Portal experience.

Dissecting the existing desktop experience

Member portal screen shots, desktop view
My starting point for each of the key paths: Desktop views of the Fit to Walk With Diabetes Journey and Track Your Activities.

Functional Specs & Content Requirements

My first step involved navigating and exploring multiple member testing profiles in the desktop experience to grab screenshots and document the myriad of screens and functional details.

Image icons for the various screen shots.
Naming conventions are key to keeping this effort organized. I also retain the date of the capture to stay on top differences with continuous development.

The general guideline for content was for it to remain the same as that in the portal and for the most part that worked well. I discovered a number of small details such as the intro copy for Steps that warranted some of them being rewritten to simply ”get to the point” in progressive disclosure for the much smaller UI. I worked closely with the Content Strategy Manager for those and other small content refinements.

Interaction Design & Information Architecture

Given that we were recreating the existing behavior-modifying flows in the desktop portal, there wasn't a need to create separate user journeys and flows design artifacts. My wireframes would represent the sequential screens with associated interaction details.

Shaping the new experience

Information Design: Navigation & Interface

Our small team discussed options and considerations for the UI and pursued a slightly modified Facebook Paper approach. Initially, I wasn't too keen on the idea but it did provide the right interactions to successfully navigate the Direction > Journey > Path > Steps hierarchy.

For prototyping and usability testing, our iOS developer was building as we were designing so he made the works-in-progress available to the team. We had about a dozen people navigate the UI over the course of development and uncovered small issues such as font sizes, contrast ratios, and icon sizing. The Facebook Paper approach was intuitive for our users as they navigated the Journeys hierarchies.

Wireframes for three steps in the Paper flow
The user interacts with the Fit to Walk with Diabetes Journey from its Weigh Less Direction parent.

Our team determined the need for a robust design artifact to help inform QA of what they should be seeing and how it should be functioning. I diligently worked through what ended up being 90 pages of wireframes. All screens, interaction details, and animations were covered.

Initial view of a Journey Step
Wireframe details communicating the user path, important content, along with functional items and their options.
Robust example of Activity data in the Track pathExample of tracked data across all selected days
Clarification of visual details with a robust data example that helped our data, development, and QA testing efforts.

Branding and theming

Visual Design

I had the pleasure of working with RedBrick’s longtime Creative Director, Cindy Steinberg, for applying the dynamic brand colors and polish to my wireframes. Cindy had previously created an extensive library of badges and icons and we worked closely on the new additions for proper sizing and needed format.

Side-by-side comparison of wireframe and final design for Activity selection screenSide-by-side comparison of wireframe and final design for Journey screen
I approached the wireframes with a design eye and wanted them to be easily “styled” by the creative director. The near-high fidelity approach was very clear with guidance on positions and sizes.

As mentioned above, we did hold a number of informal tests with RBH employees and continually solicited feedback from those reviewing the app. Text was too small in a number of areas and we made the necessary adjustments in Xcode. We determined that the Illustrator design files, referenced by the developer, simply had font sizes that were too small. I provided corrected example screenshots and templates for future design reference for team members.

Composite of various final screen designs
Style and branding keenly integrated by Cindy Steinberg, Creative Director.

Wrap up

Refine & Iterate

Unfortunately, I was a shared resource and unable to stay engaged with this app’s continued development. There was a ”friends & family“ soft launch, with a number of issues addressed at that time, and I don't have any of the metrics or member feedback post official launch.

My tools were OmniGraffle for the wireframes and Sketch for vector asset creation.