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

Reverse designing the portal experience

Two primary paths

There were two key paths we needed to build in the app: Track Your Activities and a Journey. We chose the Fit to Walk With Diabetes Journey as the most comprehensive to reference.

Member portal screen shots, desktop view

Digging into the flows and screens

I'll typically capture screenshots of the various screens and their states for a static reference and naming conventions are key to keeping this effort organized. I retained the date of the capture to stay on top differences with continuous development.

Image icons for the various screen shots.

Wireframes and interaction details

Final Journeys app section

(Left image) Initial view of the Journeys section with a horizontally scrolling section for the Recommended Journeys. User can interact with recently viewed Journeys in the lower section. (Middle image) The user navigates from the Weigh Less Direction with a tap or swipe up on the Fit to Walk with Diabetes Journey.
(Right image) Initial view of the Fit to Walk with Diabetes Journey.

Wireframes for three steps in the Paper flow

Wireframe details presenting the user path, important content, along with functional items and their states based on user behavior.

Initial view of a Journey Step

Clarification of visual details with a robust data example that helped our data, development, and QA testing efforts.

Robust example of Activity data in the Track pathExample of tracked data across all selected days

I worked closely with the Creative Director and wanted the wireframes to be easily “styled” by her. The near-high fidelity approach was very clear with guidance on positions and sizes.
(My wireframe examples on left, final designs on right.)

Side-by-side comparison of wireframe and final design for Activity selection screenSide-by-side comparison of wireframe and final design for Journey screen

Final style and branding keenly integrated by Cindy Steinberg, Creative Director.

Composite of various final screen designs