Swing Therapeutics creates evidence-backed digital treatments to help people with chronic conditions live their best lives.

At Swing, an early-stage startup based in San Francisco, my role within the product team was instrumental in shaping the evolution of the company’s brands and enhancing user experiences across digital and physical channels, touchpoints, and formats. In this instance, I collaborated with the product, marketing, engineering, and clinical teams to redesign the company’s website.

My role
I was responsible for bringing the website to life by turning the low-fidelity mockups into high-fidelity designs, evolving the design system, introducing responsive design best practices, preparing dev-ready files, and conducting quality assurance. I also participated in the website structure and content development brainstorming workshops and low-fidelity mock-up design reviews.

Skills
UI Design, Design Systems, Responsive Design, Accessibility, Visual Design, Branding, Design Thinking, Presentation, Documentation, Dev-ready files, Communication, Problem-solving, Project Management

Tools
Figma, Zeplin, Jira, Asana, Slack, Zoom, Adobe (Illustrator & Photoshop), and Pen & Paper

Team
Senior Product Designer, Maggie Avila; Senior Product Manager, Abbha Morey; Head of Product, Nelson Mitchell; Head of Marketing, Nicole Villeneuve; Software Engineer, Mantasha Khan; Software Engineer, Hao Wu; Lead Software Engineer, Rajeve Gade; & Head of Engineering, Eric Hoppe; Head of Clinical and Scientific Affairs, Yifei Dai, Ph.D.

1. Setting
Swing needed to update its website to align with its new commercialization phase, making the message and positioning clearer for the relevant stakeholders — clinicians, investors, payors, and potential patients. The goal was to generate new clinician leads and patient referrals for the partner telehealth clinic.

It needed to incorporate relevant content and calls to action and potentially announce a significant accomplishment: the FDA approval of Stanza, Swing’s digital therapeutics app for treating fibromyalgia symptoms.

2. Challenge
I was tasked with turning the low-fidelity mock-ups into high-fidelity designs, ensuring the website look and feel was on brand, and the user interface was easy to use.

We had a minimal design system consisting of a small type scale, a few colors, and only one breakpoint. So, part of the effort included evolving the design system to allow for a responsive website, an intuitive experience, a stronger information hierarchy, and the design of charts and infographics.

3. Approach
We began with brainstorming sessions to identify audience segments and their goals and pain points and to discuss the website content and structure. Once aligned, the Marketing Director developed the content, and the Senior Product Designer created the initial low-fidelity mock-ups.

I worked in parallel with the Senior Product Designer. While she was tackling the low-fidelity mockups, I expanded and iterated the design system to include. I then implemented the design system, creating high-fidelity designs, developing more complex components, and establishing a component library. 

I led design reviews, facilitated discussions and iterated based on feedback, engaged with the engineering team early in the process, presented the high-fidelity designs to the leadership team and CEO to get buy-in, and participated in quality assurance.

4. Impact
The updated website aligned with Swing's go-to-market strategy, allowing the company to appeal to a new segment (clinicians who may prescribe Stanza or refer to Swing Care). It also incorporated evidence in a way that compelled a clear CTA.  

As a result, Swing has generated dozens of leads through the new Clinicians page and has created an experience to more effectively showcase evidence, including a study published in The Lancet in July 2024

The new design system facilitated the development of a responsive and more accessible website, allowed for a stronger information hierarchy, created a solid foundation for future iterations, and served as a style guide for designing marketing collateral.

Expanding the type scale and color palette
I expanded the type scale by including a wider range of sizes, weights, and styles for a stronger hierarchy. I enlarged the color palette to incorporate additional variants that could be used for different functions. I tested color combinations to ensure accessibility standards were met.

Creating icons, grids, and breakpoints
I created a basic icon set, introduced three new breakpoints, refined the grids and margins, and developed a basic component library to enhance the design system further.

Testing and making adjustments
I started working on the design system while the product designer was focused on the low-fidelity mock-ups. This parallel approach allowed us to assess some elements and make adjustments earlier and later in the process.

Designing components
Designing components was a nonlinear process. Some of the more simpler components, such as buttons were designed earlier on while some of the more complex ones were created while doing the visual design.

Implementing the design system
I worked closely with the Senior Product Designer to bring the low-fidelity mockups to life by implementing the revised design system and ensuring the website was on brand.

Adding illustrations, charts, & photos
Leveraging the visual identity, I created illustrations, designed charts, and selected photos to enhance the look and feel of the website.

Redesigning the blog
We had to redesign the blog because it was glitchy and not responsive. To save time, we used a blog template we designed for another one of our websites and styled it with our design system.

Working closely with senior product designer
From expanding the design system all the way to QA, I worked closely with the Senior Product Designer testing the design system, addressing issues, asking questions, and bouncing off design solutions.

Presenting and iterating
Throughout our design reviews, I presented the high-fidelity mockups and refined them based on the team’s feedback. This iterative process continued for several rounds until the design received final approval.

Collaborating with engineering
We maintained open lines of communication with the engineering team, regularly sharing our designs and engaging in discussions to address potential challenges and explore viable solutions.

Solving for a shortened timeline
Our timeline was unexpectedly shortened by a month due to an early announcement, pushing us to expedite the visual design phase by delegating tasks.

Documentation
In preparation for handoff, I organized the files, tidying up layers and adding notes containing links, states, behaviors, and any other relevant information to ensure the receiving team had all the necessary details at their fingertips.

Walkthrough with engineering
Before the handoff, we did a thorough walkthrough with the engineering team, presenting the designs, addressing any potential issues, and addressing questions to ensure a smooth transition to the implementation phase.

Sharing dev-ready files
In collaboration with the Senior Product Designer and Senior Product Manager, we used Zeplin to handoff the final files and components, while also creating and managing tasks in Jira to streamline the development process.

Splitting the work
I initially collaborated with the Senior Product Designer to ensure accurate implementation of our designs by dividing the workload by pages and complexity. Later, I concluded the process independently.