BV_intro.jpg

BoardVitals

App UI Design

 

BoardVitals

Creating a Streamlined Design System.

BoardVitals is a test-prep resource for medical students studying for their Board exams. We were tasked with creating a mobile app version of the web experience with a fresh visual identity that makes learning on-the-go efficient and effective.

 

role:

Product Design

Agency:

Wondersauce

 
BV_intro.jpg
 

the problem

To keep up with the demands of their audience, BoardVitals needed to introduce a mobile app to accommodate the busy lives of med students and professionals. Their early success had begun to plateau in the last few years. Despite their efforts to release new functionality to adapt to a wide range of study habits, they weren’t able to replicate their early adoption rate at scale.

the opportunity

We gathered insights from a representative subset of their audience, from first time Board test takers to seasoned professionals looking to study for re-certification. We quickly learned that the app needed adapt to a wide range of study habits to appeal to such a wide audience, and that being tethered to a desktop application was too restrictive.

 
 
 
BV_icons-2.jpg
BV_type Copy.jpg
BV_color-2.jpg
BV_00 log in.jpg
 
 

Visual Exploration

Our refreshed design system took elements of the existing brand and transformed them into a modern take of what an esteemed medical tool could be. Our atomic approach to the type, color, icons and components helped to build a refined system that could be flexible, but streamlined and efficient.

 
Case-Study-Selection.jpg
Case-Study-Perfect.gif
 

selection mechanism

Our first and longest sprint focused on the quiz interface since that’s where users would be spending the majority of their time. We tested out a multitude of different selection mechanisms to create clarity and eliminate friction for users moving through questions within the quizzes.

 
 
Case-Question-Types.jpg
 

question type variation

Within the quiz design, we outlined the states and functionality for 11 different question types to make sure our system could accommodate the variation within the existing content in the BoardVitals question banks.

 
Case-Quiz-Cards.jpg
Case-Study-Quizzes.jpg
 

Card System

We outlined individual states for the 4 main quiz modes within the question bank to account for all the varying information the user would need to see within the system.

 
Case-Study-Performance.jpg
 

data visualization

In our research, we found that challenges and performance tracking were huge motivators for users. With that goal in mind, we saw an opportunity to create different formats of data visualization to bring the metrics to life by gamifying the learning experience to keep users engaged and inspired.

 
Case-Study-Progress.jpg
Case-Study-Onboarding.gif
 

Finishing Touches

In our last sprint, we focused on surprise+delight moments to keep the user motivated and focused by introducing personalized statistics and highlights from their performance.

In testing the usability of the desktop experience, we uncovered that many users found answering the first few questions cumbersome as they became familiar with the interaction patterns, so we also included a brief onboarding tutorial to help quickly build confidence in the mobile product.

 
Case-Study-ATI.jpg
 

the future

The modularity of the system we built for BoardVitals was created with the future in mind. As the user base continues to grow, the app system can be white-labeled to accommodate question banks for other areas of discipline across the medical field and beyond.

 
BV_review-1.jpg
BV_review-2.jpg
 

Launch

The app went live on both Google Play and the iOS App Store this February and the response was overwhelmingly positive. Maintaining a 4.8 star rating with almost 100 reviews, and excelling client acquisition and retention goals – we couldn’t be more excited for the BoardVitals team and what’s in store for the future.

 

Design Lead:

Leon Farrant

UX Lead:

Kristen Barry