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.
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.
(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.
Wireframe details presenting the user path, important content, along with functional items and their states based on user behavior.
Clarification of visual details with a robust data example that helped our data, development, and QA testing efforts.
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.)
Final style and branding keenly integrated by Cindy Steinberg, Creative Director.