BCBS Do.App
Client: BlueCross and BlueShield of Minnesota
Role: Lead Product Designer
Responsibilities: UX design, UI design, motion design, interaction design, gamification
Overview
Lighthouse Software was hired to design and build a mobile app for BlueCross BlueShield of Minnesota. This app would be aimed at users who don’t consider themselves athletic, and who don’t lead a particularly active lifestyle. The goal was to help users improve their wellness by making small changes throughout a given day, whether it was drinking more water, stretching at their desks, or using breathing exercises to calm down.
BCBS-MN wanted the app to be fresh, engaging, intuitive, and to use gamification to motivate users to continue working towards better health. They also wanted the app to be hybrid rather than native iOS and Android, though it would be available via both the App Store and Google Play Store.
Outcomes:
28%
Of users reported increased health and wellness after using the app
12%
Savings on health insurance premiums as a result of increased wellness
Discovery
We began the discovery process with a number of collaboration sessions with the BCBS-MN customer experience team, where we went through details of their user research, went through some activities grouping exercises, and began whiteboarding user flows.
I created a large iPhone mockup out of foamcore, and we used that and several different-coloured Post-it pads to brainstorm and plan our user journeys. We narrowed the initial release down to three paths: Breathe, Move, and Drink.
I took the decisions we made in the group sessions and, combined with information from my notes, started sketching out what the different screens would look like. I used a mobile frame sticky pad, which allowed us to rearrange the individual sheets as needed.
I presented our findings and recommendations to the stakeholders, who gave their approval for us to begin designing the app.
Design
In the design phase, I started by creating wireframes that aligned with the user flows and the insights gathered during discovery. My goal was to ensure that tasks and exercises within the app were short, intuitive, and engaging. After three rounds of iteration, we finalized the wireframes.
Simultaneously, I developed three distinct style tiles to explore different visual directions for the app. Collaborating closely with the client's creative director, we integrated new brand elements into the design, ensuring a cohesive and fresh visual identity. The overall design style was approved by the client, and we started in on the full UI mockups.
For the UI design, I prioritized a clean, modern aesthetic that aligned with BCBS-MN’s brand identity. The visual style was vibrant and inviting, with clear, easy-to-read typography and visually appealing icons. I ensured the design was consistent across different devices and screen sizes, providing a cohesive user experience.
During this time a challenge presented itself. During the UI process, the client creative director grew to dislike the direction we were taking. I had been leading the charge towards a clean, modern design that didn’t impose itself on the overall user experience, so that the content could be the focus of their attention. The CD, however, wanted a different visual style and redesigned several of the screens I’d already created. The stakeholders understandably decided to support their creative director, and although I raised my concerns to both the client and my internal team at Lighthouse, the decision was made to change visual direction to the CD’s new style.
This caused a few minor complications and delays because of the amount of rework required, especially because the iconography on all of the gamification badges had to be completely redone.
Had I been a more experienced and confident product designer, I might have advocated harder to find a compromise that would still maintain my lighter UI touch.
Prototyping & Testing
Once we had one exercise for each of the three “Do” categories, I compiled all of the screens into a functional prototype using an app called Marvel. Marvel’s building process is similar to that of Figma, but it’s less intuitive and flexible than Figma. But for 2015, it was a fantastic tool for validating design assumptions.
The client selected a small pool of test users and sent the prototype to them. Reactions were largely positive, but their feedback included helpful information about things they found challenging or confusing. Their feedback was incorporated into a revised prototype, and we repeated the testing cycle.
With the wrinkles ironed out, the client gave approval to begin development.
At the same time, I put together a style guide for the developers to communicate the visual style and dimensions.
Conclusion
BlueCross BlueShield of Minnesota released the Do. app for bot iOS and Android in January of 2017. After the first six months the insurance provider reported nearly a 30% improvement in wellness for their clients who had used the app. The majority of users shared that their stress levels had been reduced, and increased water intake caused them to feel more alert.
The app was discontinued in 2019.
Reflections
This project underscored the importance of user-centered design and effective collaboration. By closely partnering with the client’s creative director and incorporating user feedback throughout the process, we were able to create a product that truly resonated with users. Moving forward, I plan to continue leveraging these collaborative and iterative design practices to deliver impactful solutions.