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.

PROJECT FOR

ThankView

Timeframe

Nov 2020 - Present

Role

Lead UI/UX, Research, Strategy

Team

3 Designers, 1 UX Engineer

The Nimble Narwhal

The narwhal is sometimes referred to as the" unicorn of the sea". As a unicorn-themed company, it was only natural that we used its sibling as the face of ThankView's design system. As we scaled up our business and added more design + development pods to our product team, we wanted to find a faster way to go to market with new features. We ran into problems in our original process:

  • There were inconsistencies in how components worked in wireframes, which caused us to create many variations of the same component (which would also work differently)
  • Copy/tone was often inconsistent
  • There weren't any rules to how components were used, creating an inconsistent experience
  • Many components were not accessible

To design faster and develop more consistently, my team of 3 designers and 1 UX engineer worked to establish guidelines on how certain components would work going forward. We utilized Ashley Seto of Pinterest's rule for quality. 80% of our UI should be made of components in the design system while 20% of the UI is unique and experimental. This allowed our team to work fast, but also be creative and not restricted to the limitations of a standard design system.

Note: The Marketing team is the owner of anything related to copy/tone. Since my team and I did not have a direct impact on copy, it is not depicted in this case study. As a team, we have worked to utilize the tone for all of the copy in our components.

button variants

Variants + Interactive States

In the development of our design system, I worked with our UX Engineer to establish the properties we'd need to consider as we built them out in Figma. Ideally, they would match 1:1 with how it was in the code so that other developers quickly identify the correct component to implement.

From the design side, we also made sure that interactive hover and press states were accounted for so we could mimic a live demo in a prototype.

Slotted Components for Modals

I collaborated with the UX Engineer to build out modal components to work with interchangeable pieces (sort of like Lego blocks). Designers could choose from pre-built modals (which addressed a majority of our use cases), but also allowed them to create custom modals without having to detach the instance. Slots create flexibility and allow us to reuse styles and maintain consistent spacing.

modal slot styling

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 shrunk them as needed
  • We made sure that data table information could quickly be auto-generated using ContentReel or JSON Uploader. We preferred the latter, as it allowed us to create more specifically customized data that fit our actual user info + metrics
  • 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 worked together in all color blind settings
  • We did paired button testing to see how each pair of button colors would look against each other. We wanted to make sure that it was clearly distinguishable
  • All colors used on ThankView went through accessibility contrast testing
  • We are currently in the process of ensuring all copy and content are all readable in screen reading programs
button pairing testing image

Results

Increased sprint velocity across all pods by 50%
100% adoption rate across designers, developers, and marketing
Follow WCAG 2.0 standards across 70%+ of ThankView with UX Engineer

Next Steps

The Narwhal Design System is still a work in progress. As we expand the platform, we are always adding new pieces to our component library for reuse. Figma's Config 2022 update is also an opportunity for us to consolidate more of our components and make them even more powerful.