Psyche

A design system for standardized implementations and unique brand expressions across TherapyNotes® products

Summary

How might we

develop accessible, cohesive products sustainably?

Team

5 developers +
2 QA engineers

Role

Product manager //
Product designer

Timeline

Ongoing (2020–present)

Methods

Stakeholder interviews // (incidental) contextual enquiry // usability testing

Challenge

Problem

As with any burgeoning software start-up, a number of development-related complications arose once TherapyNotes began to rapidly grow:

Uncoordinated management of front-end code
Poor consistency in designs and their implementations
Decentralized approaches to universal concerns like responsiveness, accessibility, and branding

Themes

Solution

A lead developer and I came together with an ambitious goal: to remediate the organization's front-end development woes. We aspired to support sustainable, efficient development while ensuring that every tool we craft would be scalable, accessible, and responsive out of the box.

We approached the CEO with an idea for a team dedicated to this pursuit. Within a month, we were staffed with four additional software developers and two QA engineers. Together, we founded Psyche, a Web Components–based, grassroots design system.

Approach

Discovery

Each of our teammates came from a different development team within the organization and were intimately familiar with the problems we pursued. This shared understanding was crucial to help our team empathize with our peers as users of our tools.

To start, I interviewed our primary stakeholders—product managers, product designers, and lead developers—to validate our observations. Their pain points exactly echoed what we experienced ourselves: distributed front-end tools, poor design consistency, and an uncoordinated approach to global UI concerns. Each of these contributed to longer development cycles and duplicated efforts across teams.

From here, we distilled two key needs:

A developer needs to quickly implement common UX requirements that may or may not be explicitly articulated to them in order to deliver new features without needless churn.

A designer needs to know, match, and, as needed, improve upon existing design patterns and principles in order to conceive unified features.

Self-organized evaluations of the application further revealed patterns of usability defects begging for systematic resolution. This solidified a third need, emphasizing common usability goals:

A busy, emotionally encumbered therapist needs to use our software in any context in order to complete tasks without undue burden.

We devised a solution to bring back to our stakeholders: a centrally managed library of shared components with well-defined usage to serve as the single source of truth for design and development.

Oh, like a design system?a fellow designer asked.

Exactly. I heartily confirmed.

Design

Every Psyche offering is created with accessibility, responsiveness, and flexibility at its core. These are the first of many tools we've created to support current and future products in the TherapyNotes ecosystem.

Rich Text Editor

Supports formatted content to more effectively organize information.

The rich text editor was a trial by fire. With imminent need for the control across teams, we dove right in to Psyche's first component.

I brainstormed the experience for our end users with another designer and drafted a blueprint for the component, incorporating both acceptance criteria for our end users and the developers who would be building with this new tool. I reviewed and refined the design with our key stakeholders—the product manager, lead developer, and clinical SME for the team that would be our first consumers.

With a design specification in hand, our team built a skeletal rich text editor to start, one with a complete UI and configuration but no functionality otherwise. With this increment, I facilitated usability tests with six developers across the organization, and we revised the component's configuration options and accompanying documentation based on these sessions.

We then brought this configuration together with the core functionality, thoroughly testing and honing the behavior with regular check-ins with our stakeholders.

As of writing, there are nearly a dozen instances of Psyche's rich text editor in TherapyNotes with ambitions to use this control as a key building block across the entire product suite.

Form Advice

Shows the status of forms and inputs to help users decide what to do next.

Our next components were low effort and high value, clear choices for maximum impact: banners and inline messages.

Though simple, banners across our product suite had one key flaw: they used color alone to indicate the severity of the message. Our designers independently sought to include semantic icons as a complementary solution, but without standardized tools, implementation varied and the requirement was often missed in work where a designer wasn't directly involved.

Inline messages, a newer pattern in our software, had similar challenges. The pattern was readily adopted, but each development team formulated their own implementations without a centralized approach.

We ensured that all key development decisions were incorporated in Psyche's banner and inline message components. These share a simple configuration: select a level (info, error, success, or warning) and enter the desired content. Like everything Psyche delivers, responsiveness and accessibility requirements are built in, and clear documentation shows our consumers what concerns they may need to handle on their own.

Themes

Match the look and feel of any product in the TherapyNotes suite.

Rich text editor with an adjacent inline message. The components start with a light theme and shift to a dark theme halfway across

The pièce de résistance of any design system is a solid foundation of styles. Our ambition for Psyche to support any number of unique brand expressions meant that devising a flexible yet standardized solution was crucial.

I drafted a controlled set of styles covering branded, semantic, and interface colors; font styles; spacing; and other common object styles like corners, shadows, and interactive states. As a team, we translated these into custom CSS properties.

These properties are designed to be used both directly by the consuming application and by Psyche's own components. Our team considers this set of styles a "contract" with our fellow development teams: it serves as a mutual agreement between us, as providers of the design system, and our consumers for what styles should be used to ensure a compatible design language and components that faithfully adhere to the unique brand expression of a product.

Today, Psyche supports unique themes for TherapyNotes, TherapyPortal, and another yet-to-be-released product. Every component we deliver now leverages our theme properties, resulting in components that are always in sync with a product's design language.

Psyche

Summary

How might we

Team

Role

Timeline

Methods

Challenge

Problem

Psyche Theme Demo

Solution

Approach

Discovery

Design

Rich Text Editor

Form Advice

Themes