Designing a platform for behavior change courses and health content
Introduction
In 2020, two behavior change companies, formerly SelfHelpWorks and MedProWellness, merged to form Avidon Health, forming a strong team of health and wellness experts focused on creating positive outcomes for participants.
This merger led to the rebranding of the legacy SelfHelpWorks portal to a new Engagement Rx platform, a solution that seeks to empower participants with health-related content, Cognitive Behavioral Training (CBT) courses, health coaching services.
My role
As a UI Designer at Avidon Health, I collaborated with my Senior UX Designer, Chief Technology Officer, and a team of developers to redesign the existing SelfHelpWorks portal to accommodate the new Engagement Rx system, including a visual update and new features.
In collaboration with my team, I worked on feature brainstorming, ideation, wireframing, low-to-high fidelity prototyping, and developer handoff.
Challenge
01
The new portal needs a refreshed design that accommodates the recent merger and aligns with the updated brand guidelines and perspectives.
02
03
Defining the problem
— How might we create a new and updated platform to better support updated business needs and a brand refresh?
Goals
Introduce the Engagement Rx Design System to the platform that reflects updated brand ideals and guidelines
Engagement Rx Design System
The Engagement Rx platform uses a scalable design system to create a consistent design language across the product as well as more efficient design practices by compiling reusable styles, assets, and components. The design system consists of properly defined typography, icons, buttons and interactive elements, and more that continues to evolve with the product.
A new member dashboard
When participants log in to their portal, they arrive at their member dashboard. I worked with my team to create a homepage experience that drives engagement with portal features and courses, better integrates Avidon’s team of expert health coaches, and utilizes the newly established design system.
A refreshed training course interface
When participants access a training course, they are navigated to the Course Homepage, which allows them to start course sessions, view course resources, and more. With the product refresh, we wanted to clean up the interface and align it with the new design system to maintain consistency across the product.
Conclusion and Learnings
During the course of this project, I learned a lot about redesigning a legacy product and bringing it to the modern age through efficient practices and design/branding exploration.
The magic of design systems
Working on the Avidon Health team on this project was the first time I was responsible for creating a design system at this scale before. I’ve learned so much about building effective systems and maximizing efficiency in the design process, and I’m incredibly proud of the results. It was a lot of tedious work, but I’ve already seen how the upfront effort has benefited the process.
Embracing atomic design
As mentioned, creating a robust design system can be tedious, but the effort is largely rewarding. By utilizing an atomic design approach, I was able to a comprehensive set of reuable components that has since allowed me to prototype new designs efficiently.
Breathing new life to an established product
Prior to this refresh, our team was certainly aware of a growing list of design debt in the legacy platform. This process allowed us to address some of our outdated patterns and design bugs, which has helped make the product that much better for our users.
