Building Trust and Generating Referrals
Swing Therapeutics is an early-stage start-up that creates evidence-based digital treatments to help people with chronic conditions live their best lives.
As part of its go-to-market strategy in anticipation of FDA approval for Stanza, its digital therapy for fibromyalgia, Swing Therapeutics needed to update its website to communicate its new messaging to key audiences—clinicians, investors, payers, and potential patients while fulfilling its business goals.
The redesigned site aimed to align with this strategic shift by incorporating focused content and clear calls to action, generating new clinician leads, and supporting patient referrals for its partner telehealth clinic.
Challenge
As the visual designer, I was tasked with creating high-fidelity designs that reflected Swing’s brand and delivered an intuitive website experience. The existing design system was minimal, just a small type scale, a few colors, and only one breakpoint, limiting our ability to scale or create a responsive site. A key challenge was evolving this system to support multiple breakpoints, improve content hierarchy, and accommodate dynamic elements like charts and infographics.
Approach
We started with collaborative workshops to align on audience segments, user goals, and site structure. From there, the Marketing Director led content development while the Senior Product Designer created low-fidelity mockups.
I expanded the design system to support responsiveness, accessibility, and a clearer hierarchy. I applied the updated system across high-fidelity designs, built complex components, and developed a reusable component library.
I led design reviews, facilitated cross-functional feedback sessions, and engaged with engineering early and often. I presented the final designs to the leadership team and CEO for alignment and supported QA through launch.
Evolving the Design System
While the Senior Product Designer focused on low-fidelity mockups, I worked in parallel to evolve the design system, expanding the type scale and color palette, defining grids and breakpoints, and designing a component library with micro-interactions and comprehensive documentation. This groundwork supported responsive layouts, improved accessibility, and laid the foundation for a more scalable, maintainable user interface.
-
To ensure the website was responsive, I introduced three new breakpoints and refined the grids and margins.
-
I expanded the type scale by including a wider range of sizes, weights, and styles to strengthen the hierarchy and make it more legible.
-
I expanded the color palette to include additional variants that could be used for different functions. And I also tested color combinations to ensure they met accessibility standards.
-
I created a basic icon set and developed the components for further use in the atomic design system.
-
Designing components was a nonlinear process—while simpler ones, such as buttons, came first, more complex components emerged during the visual design phase.
Creating the High-Fidelity Designs
With the strategy in place and the design system ready, I translated the vision into a cohesive, high-fidelity website. From applying the system and refining layouts to enhancing storytelling through visuals, this phase brought clarity, polish, and depth to the user experience.
-
I worked closely with the Senior Product Designer to transform the low-fidelity mockups into high-fidelity designs, applying the updated design system to ensure visual consistency and brand alignment across the site.
-
I leveraged the visual identity to create illustrations, design charts, and curate photography that elevated the site’s storytelling and aesthetic.
-
The blog required a full redesign due to responsiveness and functionality issues. To move efficiently, we adapted a blog template previously created for another Swing site and restyled it using our design system.
Impact
Aligned with Go-to-Market Strategy
The redesigned website supported Swing’s strategic shift by helping the company reach a new audience—clinicians who could prescribe Stanza or refer to Swing Care. The design integrated clinical evidence and guided users toward clear calls to action.
Drove Clinician Engagement
The new Clinicians page has already generated a steady stream of leads. It now more effectively showcases Swing’s research credibility, including a landmark study published in The Lancet in July 2024.
Built a Scalable Design System
The evolved design system made the site more responsive and accessible, improved content hierarchy, and laid the foundation for future iterations. It now also serves as a reference for designing additional marketing collateral.