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:
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:
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.
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.
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.
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:
Most importantly, we wanted to ensure that our components were accessible for anyone using or viewing ThankView.
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.
