Capital Blue Cross Mobile Application
Project Length: October 2019 — May 2020
Project Role: Senior Onsite UX Designer
Brief:
My first client project at Infosys was for health insurance company called Capital Blue Cross. The project was based out of Harrisburg and began in October . The client was looking to build their first consumer-facing mobile application, so that customers can manage their claims and billing, access their membership cards, review their benefits, and find healthcare providers.
Process:
Workshops:
We began the project with two weeks of online workshop meetings to discuss the project and plan out the scope. We were presented with an in-depth walkthrough of the current member portal and user testimonials conducted by the Capital Blue Cross team to discover pain points with their current website. From these we were able to generate an information architecture map of the member portal, as well as user personas and journey maps.
User Personas
Current Website Journey Map
Next Steps…
After generating our users and journeys, we began to consider how to address the pain points in the mobile app. We knew that the current member portal has no centralized hub for information for users, so we knew that including a dashboard with quick access to the desired features the client wanted included in MVP 1. The users information on the current website was always displayed as a complicated table view, so we planned on switching to a card-based layout for claims, benefits, and balance information would be important for increased usability for users.
Initial Sketches
Initial Sketches for the CBC included the Login Screen, a Dashboard, a Claims page, Benefits page, and Member ID Card page. Users would also need quick access to their balances from their dashboard, so a Balances page was also sketched out. The Member ID card was imagined to be presented as a simple digital copy of the member or anyone in their plan’s ID Card, and would flip on a tap.
First wireframe iteration
Low Fidelity Designs
Low fidelity designs began to incorporate a stark white and blue color scheme to reinforce their healthcare brand identity. line art iconography was introduced on the main dashboard page. The low-fidelity designs were received but the client wanted to explore a new visual direction with their app, which was planned out to occur after a month of a break between project phases.
Fifth wireframe iteration
Wireframes
After the first generation wireframes were reviewed with the client, we began to rapidly iterate through continued workshops to build out the rest of the mobile application.Particular attention was focused on the introduction of an exclusive feature for the company, which was a quick access to toggle between different health plans. They wanted the experience to be done in under 3 taps and be accessible on every parent page.
We prototyped this interaction out on the fifth iteration o the wireframes, which were done in early November, and the client loved the result. They were not as much pleased with the initial explorations in visual design as they felt it looked too similar to their current member portal, which the client felt was too sterile looking. We received approval to move onto the Visual Design stage of the project to address this, as most of the functionality had been laid out and approved.
The interaction model for quickly switching between different plans on a subscriber’s policy.
High Fidelity Designs
After a one month break from Phase I of the CBC Project, we entered Phase II in mid-January. We were joined by one additional offshore designer to help flesh out the rest of the app as well as iterate on visual styles. We collaborated to bring a fresh look and feel to the current state of the mobile app, as well as scaling every screen to fit landscape and portrait modes for iPads, Android Tablets, Android Phones, and iPhones. The final product that was handed off to development in April 2020 is depicted mocked up below, scaled for an iPhone X screen.