Lauren Thacker
Lauren Thacker

Brighter Health

Elevating Health Data: Brighter, Intuitive, Insightful

Enhanced user experience and data visualization with Highcharts and React

Role
TIME
TEAM
Product Designer + Product Manager
1 Month
4

Redesigning Brighter Health - Enhancing User Experience and Data Visualization

Introduction:Brighter Health, a leading healthcare technology company, offers a comprehensive web application that provides clients with insights into their health and wellness data. Over time, the Brighter Health application had accumulated several challenges, particularly related to its limited design flexibility due to the use of iframes and issues with data visualization. The primary goal was to redesign the application to improve user experience and make it more visually appealing, without causing confusion among existing users. This case study explores how the Brighter Health team tackled these challenges, rebranding tables and graphs with Highcharts and React, and simplifying the interface to provide a more intuitive user experience.

Challenges:

  1. Limited Design Flexibility: The use of iframes had restricted the ability to make significant design changes within the application. The client desired a fresh look without affecting the familiarity of the platform for their existing users.
  2. Data Visualization: Tables and graphs within the application needed improvement in terms of aesthetics, interactivity, and clarity. Users often struggled to interpret complex data, requiring a more streamlined and intuitive representation.
  3. User Experience Enhancement: Users were often overwhelmed with the amount of data presented in tables and graphs. The challenge was to simplify the data presentation, making it easier for users to comprehend and extract meaningful insights without feeling overwhelmed.

Solution:The Brighter Health team embarked on a comprehensive redesign of the application, addressing each challenge systematically:

  1. Redesign using Highcharts and React:To overcome the limitations imposed by iframes, the team decided to rebuild the tables and graphs using Highcharts, a powerful JavaScript charting library, and React, a popular JavaScript library for building user interfaces. This approach allowed for more flexibility in design and customization.
  2. Improved Data Visualization:The team worked to enhance the aesthetics of tables and graphs. Highcharts provided the flexibility to create visually appealing and interactive charts. This not only made data more attractive but also enabled users to interact with the data, gaining deeper insights effortlessly.
  3. Simplified User Experience:To address the issue of data overload and user confusion, Brighter Health implemented a series of design improvements. The tables were restructured to prioritize critical data, ensuring that users could see essential information upfront without having to dig through numerous rows. Additionally, tooltips and interactive features were added to the charts, making data interpretation more intuitive.

Results:The redesign of the Brighter Health application yielded several positive outcomes:

  1. Enhanced User Experience: Users appreciated the improved clarity and user-friendliness of the application. The simplified tables and interactive graphs made it easier for them to navigate and understand their health data.
  2. Visual Appeal: The application's new look was well-received by both existing and new users. The use of Highcharts and React not only improved data visualization but also made the application more visually engaging.
  3. Client Satisfaction: The client was thrilled with the redesign, as it met their goals of refreshing the application without causing user confusion. They reported increased user engagement and positive feedback from their clients.
  4. Flexibility for Future Changes: The application's migration away from iframes provided the Brighter Health team with greater flexibility for future design and feature enhancements.

Conclusion:The Brighter Health team successfully overcame the challenges posed by limited design flexibility and suboptimal data visualization by rebranding tables and graphs using Highcharts and React. The result was a user-friendly, visually appealing application that delighted both the client and its customers. This case study showcases how thoughtful design changes and the right choice of technologies can significantly improve an application's user experience and functionality without disrupting the user base.