cover of ThankView Design System case study

ThankView Design System

Establishing a comprehensive design system with cross-functional teams significantly improved the product team's efficiency in delivering consistent features while also pushing towards more accessible components.




Nov 2020 - Present


Lead UI/UX, Research, Strategy


3 Designers, 1 UX Engineer, Marketing, Customer Success

An Internal Audit

Before we considered design systems, our pods worked in silos. Designs and development were handled separately in each pod with their own set of processes and styles. We realized quickly that the quality of work and component functionality were vastly different, thus leading to an inconsistent and confusing user experience.

In order to address these concerns before our company grew, we wanted to find a faster way to go to market with new features while being consistent with our work.

My team of 3 designers and 1 UX Engineer did an audit of our product and external website and found:

  1. Inconsistent components and styles, especially across work from different pods
  2. We did not have formal documented component specs, so developers were not always clear how something should work
  3. A significant amount of our components and pages did not pass WCAG 2.1, especially in areas beyond visual design
  4. Copy/tone was inconsistent. Sometimes the tone was fun and lighthearted while other times it was monotonous and harsh

Planned Organization

I worked with design, engineering, marketing, and customer success teams to determine how to organize our components, styles, and documentation. Through weekly meetings, we collaborated to create methods of consolidating information that could be used throughout the company to ensure consistency in our brand approach, leading us to:

  • Combine various files to create a single source of truth in Figma to ensure that component styles were maintained and built by a central team
  • Assign leads per team to facilitate updates/changes in every aspect of the design system
  • Utilize Notion to document component specs, copy best practices, and usage guidelines so that anyone in the company could access information

On the product side, we followed Ashley Seto of Pinterest's 80-20 rule for design systems to establish design guardrails while allowing designers to be creative with new ideas. This kept designers engaged and improved development speed.

Figma side navigation to show organization of design system
Image showing how Figma and our code matches. The image also shows the two states of a button - from default to hover

Variants + Interactive States

Before formalizing the structure of how our styles would be organized from the product side, we examined our existing components and defined consistent properties to standardize our language.

We established design properties in Figma that as closely matched our code so developers could quickly identify components and note any design changes.

Built-in prototype interactions were also created for all components to mimic a living and breathing prototype. It not only saved time when prototyping, but also answered the user when they asked "what happens if I click this button" during prototype testing.

Slotted Components for Modals

To create a consistent experience with our dialog modals, I designed the modal components in Figma to be built like Lego blocks (inspired by Slack's modals in their design system).

Designers could choose from pre-built modals that addressed a majority of our use cases, but also allowed them to create custom modals without having to detach the instance and resize sections.

Slots create flexibility and allow us to reuse styles and maintain consistent spacing. Another benefit was that if/when we update pieces of the slot (e.g. how a dropdown input field works), everything would automatically update - reducing the time needed to go through each component to make updates.

An image showing how a modal can be customized using slots. The first of three images shows the options, with description text, dropdown, and descriptive text highlighted.

The second section shows a DIY modal component with only placeholders.

The third section shows what it looks like when a user fully customizes a modal

Building out Tables

Tables were probably our most complex components in the design system. As an organization that prides itself on transparent metrics + showing ROI, it was important that we made it easy for designers to recreate tables in Figma. After various iterations, we decided on:

  • Columns instead of rows allowed our team to quickly build out tables that were relevant. We found it extremely restricting with rows. To display less information, we placed data tables in frames and resized them as needed
  • We made sure that data table information could quickly be personalized via a custom JSON file. This allowed us to create personalized table designs for prototype tests and client proposals to better engage with clients
  • Columns were interchangeable and were always evenly spaced thanks to auto-layout
table variants

Ensuring Accessibility

Most importantly, we wanted to ensure that our components were accessible for anyone using or viewing ThankView.

  • Using Stark, we made sure that all colors + styles was above a contrast ratio of 4.5
  • Paired button testing to ensure that primary and secondary button colors were distinguishable in all color-blind settings
  • We standardized focus order to ensure consistent and intuitive hierarchy within our pages
  • We worked with the UX Engineer to run and test our copy and content through screen-readers
button pairing testing image

Tone and Copy

One of the difficulties with standardizing tone was that we had three teams working on copy-related tasks - Marketing, Customer Success, and Product. Marketing focused on sales collateral, Customer Success wrote FAQs and client emails, and Product lead writing for product-specific interfaces/interactions. It was hard to get all teams together to decide on HOW we should write things. We were a small team without the resources to hire a dedicated copy-writer. Instead, we asked our customers.

In 2021, we conducted a study to see why our customers chose ThankView over our competitors. In addition to our product being the leader in the market, more than 70% of our clients mentioned ThankView's "whimsical tone" and "ability to make fun of ourselves" as a major point in staying with the brand. The brand "felt like humans talking to us" and "wasn't overly sales-y," which has been a pride and joy for ThankView. We took this data, including words commonly reported during our conversations, to realign on our approach to tone and copy.

With the Marketing and Customer Success teams, we combed through the product to update the copy and reword text to be fun, yet direct. As a result, we applied consistent tones and language we used across all of our material and product.

new marketing email page with updated tone/copy/colornew faq page with updated tone/copy/colornew campaign builder page with updated tone/copy/color


Increased sprint velocity across all pods by 50%
Updated product to follow WCAG 2.1 standards across 70%+ of ThankView