Building the Swing Care brand

Swing Care is a groundbreaking specialty care practice offering comprehensive, personalized care for fibromyalgia.

Swing Therapeutics is an early-stage startup based in San Francisco. As part of the product team, I played a key role in shaping the evolution of the company’s brands and enhancing user experiences across digital and physical channels, various touchpoints, and formats. In this particular case, I collaborated with the product, marketing, engineering, and clinical teams on the brand positioning and the marketing website design for Swing’s new virtual clinic—Swing Care.

My role
I was responsible for developing the brand strategy for Swing Care, evolving its visual identity and design system, creating high-fidelity designs for mobile and desktop, preparing development-ready files for engineering, and participating in quality assurance.

Skills
Brand Strategy, Visual Design, UI Design, Design Systems, Accessibility, Responsive Design, Design Thinking, Presentation, Workshop Facilitation, Documentation, Design-to-Code, Communication, Collaboration, Problem-Solving, Project Management.

Tools
Figma, Miro, Zeplin, Jira, Asana, Google Workspace, Slack, Zoom, Adobe CC, Pen & Paper

Team
Senior Product Designer, Maggie Avila; Senior Product Manager, Abbha Morey; Head of Product, Nelson Mitchell; Head of Marketing, Nicole Villeneuve; Fiano Agency development team

Overview

Setting
Swing Tx was gearing up to launch Swing Care, a cutting-edge virtual clinic specializing in Fibromyalgia treatment. The product team was working on the Swing Care marketing website, crafting the low-fidelity prototypes for desktop and refining the copy. Their primary goal was to position Swing Care as a leading authority in the field.

Challenge
I was tasked with creating high-fidelity designs and providing development-ready files. The first issue I had to address was the similarity between Swing Tx and Swing Care's visual identities, as one of the project requirements was to visually differentiate them. The lack of a brand strategy added complexity, requiring me to align the visual elements with a coherent brand narrative that would resonate with Swing Care's target audience.

Approach
I started by defining the brand strategy and using it as the cornerstone to evolve the visual identity and design system. I worked closely with the Senior Product Designer to craft high-fidelity designs, advocated for adding a mobile breakpoint, and proposed early collaboration with the engineering team. I presented a couple of sample pages to stakeholders to gain early buy-in on the overall look and feel. Later, I conducted a successful final presentation that garnered approval from the CEO/founder.

My process

DEFINING THE BRAND STRATEGY

Learning about the audience
I began with a deep dive into understanding our audience and identifying their needs, beliefs, and pain points. This initial step guided the facilitation of live and asynchronous workshops to define a clear and resonant brand strategy.

Facilitating workshops
Using design thinking tools and a brand strategy framework, I facilitated collaborative sessions with the entire company and with just the product team.

Aligning on a strategy
Incorporating insights gathered from stakeholders and workshop outcomes, we aligned on an initial strategy that included the brand personality, mission, vision, and values. My vision was to use this as a starting point and continue to evolve it.

EVOLVING THE VISUAL IDENTITY

Selecting the typefaces
In refining the brand's visual identity, I paid attention to every detail, especially in selecting typefaces that perfectly captured the brand's personality.

I began by choosing several serif and sans-serif typefaces, which I then paired up for headings and body copy. After narrowing down to fewer options, I tested them on a couple of low-fidelity page mockups and selected the final pair.

Expanding the color palette
I expanded our color palette thoughtfully, selecting hues that complemented the existing colors and aligned with the brand personality. By emphasizing some of the additional colors, I successfully differentiated Swing Care's visual identity from Swing Tx.

Establishing the illustration style
I started by looking at different illustration styles and sets, selecting one that aligned with the brand personality, was easy to recreate, and complemented the other visual identity elements further enhancing the visual language and storytelling capabilities.

Setting the tone for the photography
I selected a photography style that resonated with the audience and complemented our overall aesthetic, reinforcing the brand's identity and creating a cohesive visual experience across all touchpoints. Some of the words used to describe the style were empowered, natural, diverse, in the moment, and honest.

CREATING A SIMPLE DESIGN SYSTEM

Setting up the color key
Using the revised color palettes as a starting point, I created variants for each color, established neutrals and communication colors, and tested for accessibility.

Establishing a responsive type scale
Using best practices, I selected a type scale ratio that worked well for marketing websites and created the typeface for mobile and desktop breakpoints.

Creating an icon set
Using Material Symbol icons, I experimented with sizes and thickness and then created a starter set.

Designing basic components
I started by creating a button set for light and dark modes.

COLLABORATING

Working closely with the Senior Product Designer
Leveraging existing data on mobile usage, I advocated for adding a mobile breakpoint to the low-fidelity prototypes the senior product designer was working on. Once she handed over the low-fidelity mockups to me we continue to work together flushing out designs and bouncing off ideas.

Meeting with the Eng team
The engineering team was an external vendor new to me and the senior product designer. I proposed meeting with them early in the process to introduce ourselves, address questions, and discuss technical limitations and the hand-off process.

ESTABLISHING THE OVERALL LOOK

Exploring color usage
I experimented with various color combinations using a couple of sample pages. After presenting them to the product team, I incorporated their feedback to refine the designs, ultimately aligning on a direction.

Adding illustrations and photographs
I selected illustrations from the purchased set and also created new ones, either by tweaking existing designs or by designing them from scratch.

Selecting the photographs
To minimize costs and time, we chose stock photos. We were aware that’s not the ideal, so our vision was to replaced them with photos of our practitioners and patients. The brand personality and established photography style guided our selection process to find the perfect images.

REFINING AND ITERATING

Creating high-fidelity designs
After establishing the overall look and feel, I implemented it across various pages, fine-tuned the low-fidelity layouts, presented them to the product team, and refined them based on their feedback.

Defining Microinteractions
During this phase, I designed more complex components, establishing their states and behaviors.

Getting Final Approval
I presented the high-fidelity designs of the entire website to the CEO and other stakeholders which were well-received and approved by them.

PREPARING FILES FOR HANDOFF

Adding documentation
To facilitate understanding for the engineering team, I created a dedicated layer in Figma with detailed notes on behaviors and relevant information.

Doing the Walkthroughs
We did a few walkthroughs with the engineering team: first during the low-fidelity stage, then again after completing the high-fidelity designs, and finally during the handoff of the finalized files.

Sharing final files
The vendor we were working with just wanted to have access to our Figma file, so that was what we handed off to them.

QUALITY ASSURANCE

Dividing the work
To meet our deadline, we divided the tasks among the product team members.

Sharing feedback
Using the tool provided by the vendor, we provide feedback on the test website.

Good enough to launch
Due to the aggressive deadline, there wasn't much time for fine-tuning, so the approach was to launch and then make improvements as needed.

Final Designs

IMPACT

The impact of my work on Swing Care was profound and multifaceted. I developed a comprehensive brand strategy that served as a guiding principle for both our internal team and external vendors, resonating equally well with patients.

This strategy not only unified our efforts but also fostered trust with a skeptical audience by ensuring a consistent brand presence and an intuitive user experience across all channels and touchpoints.

The initial version we designed paved the way for iterative testing and improvement, establishing a solid foundation for ongoing enhancements. Consequently, Swing Care successfully launched its virtual clinic, significantly increasing patient engagement from zero to a substantial number of users.

Cheers

María Iné’s first project was to develop branding for the Swing Care telemedicine clinic so that we could launch our customer-facing marketing website. She quickly dove in, with a thoughtful approach that allowed our team to quickly define the 'why' that she then leveraged to drive our visual style. She also managed to quickly align the organization behind a common vision — no small feat.

She worked closely with our UX designer, marketing director, in-house and contract software engineers, and leadership team to roll out a mobile and desktop-friendly design system for the website, and then helped extend and evolve that system to include email, social media, print, and even a trade booth.

She brought a passion for Swing's mission and helped us elevate the tone and experience we created for our patients and partners. She is a talented designer with a high attention to detail and polished aesthetic sense, as well as being efficient, organized, collaborative, upbeat, kind, and an all-around pleasure to work with.

Nelson Mitchell
Former Head of Product / Co-Founder, Swing Therapeutics