Building blocks

Adventures in design systems.

The problem 

In the last several years, athenahealth has developed an enterprise EHR-focused design system called Forge. Primarily built for desktop-only, and with clinicians and admins in mind as their users, designers working on patient experience were struggling to make it work for our patient needs. I was tasked to look into what it would take to create a system that gave us the responsive, accessible, and consumer app worthy components we needed to design and develop beautiful patient experiences.

Inception & Mood Boarding

I started by looking around at the larger world of consumer health and wellness apps for inspiration. From that desk research and inviting the other designers to contribute their favorites, I identified a few products, like Headspace or Oscar Health, that embodied the design we wanted for our experiences. The things we loved were conversational copy, bold typography that guides the user, and a palette of color and illustration that feels human.

Research & building the foundation

At the same time as the mood boarding, I worked with another designer to do interviews and foundational research on what people want from their healthcare tools, and how they wish to be treated. This helped us develop design principles, mindsets, accessibility requirements, and a guide for the voice and tone of our products. Athenahealth’s focus has been solely on our clients as clinicians and administrators, so we needed to form a clear picture of the patients as users, and communicate that in the system so everyone could rally around it.

A tiny spark

I was fortunate to get buy in from engineering leadership on this project. Throughout this project I’ve worked with one awesome front end developer to take the existing Forge components as a foundation for our new system. I started with an initial set of changes to make those basic components fit our design vision, plus adhere to responsive web and accessibility best practices. We then gave it to teams to begin using and give us feedback.

We decided to name our new system ‘Spark’. I also designed a new docs site to reference the components and the design principles we created from our research phase. I continuously write for the site and delegate articles and guides to other designers on the team to help us to solidify the Patient Experiences design point of view. The site is also a place to onboard new designers and devs with the information they need to begin using the design language immediately.

In my own design work, and by becoming a collaborator on projects across PX, I identify common design patterns to bring into the system, and build ownership of the system by everyone on the team.

Adoption & Contribution

The results are beyond what I originally imagined. Spark has cut down on design debt & sped up development on all of our new workflows. Front-end developers love the large component library that we are constantly adding to and improving

athenaTelehealth, Consumer Financials (Guest Pay, Quick Pay, and Patient Bill Summary), Contactless Visit Prep, and our Practice Picker all were built in the last year with Spark, and these teams contribute to the system as they develop new patterns. This speeds design and dev on our newest features, like secure messaging, which can use the chat and file attachment components from telehealth chat. Navigation patterns and components created for payments helped us accelerate work for our newly redesigned test results feature.

I’ve also been overseeing a redesign of all the patient email outreach templates to use consistent styling, illustrations, iconography, and language with our products. I’m a big believer that the messaging and outreach is just as much part of the UX as the workflows in our apps, and this wish has been on our design backlog for a while, so I’m thrilled to see it rolling out seen to an alpha set of clients for feedback next week!

Collaboration with Brand

Currently athena is working on a rebranding project, and I asked to be included. As we develop the patient ecosystem and create experiences that go beyond the practice specific portal, it was hard to ignore the need for a patient-facing brand strategy. Beyond that, I expressed the need to bring the 3 different design system owners together to see if we could use the rebrand to take a close look at our styles and represent a cohesive athena brand.

The great strength of Spark is that this won’t be a huge effort. The rebrand will cost us very little development time, and we can tweak color values, borders radius styles, and typography with just a few changes to the semantic styles.

Transitioning to a Multi-Platform system

Now that the patient mobile app (both iOS and Android) design and dev is underway, I’m working closely with the designer we hired to for that team to begin building a component library for the two native platforms that is semantically tied to Spark. This will allow us to make the leap from being React-only, and to create a multi-platform system the is consistent and cohesive for patients when they are jumping from native to mobile web views.

All user experience projects