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:
I began the process of reverse UX’ing the existing Client Portal experience.
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.
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.
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.
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.
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.
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.
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.
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.