Twitter

Role: Senior Product Designer, Design Systems
Timeline: January 2021 – January 2023
Project Overview
In Design Systems we accelerate product delivery across teams, ecosystems, and disciplines through ownership and maintenance of a set of unified components, patterns, guidelines, education, and tools, that preserve the visual quality and functional consistency across products.

At the end of 2020, Twitter updated its brands’ look and feel to reflect the spirit, energy, and magic of the platform.

Our goal was to create a sustainable, modern visual system that reinforced Twitter’s unique value proposition throughout the product.
My Contributions
When I joined Twitter in the beginning of 2021 we needed to create a more robust Figma component library with guidelines and documentation. I spearheaded the development and ownership of this library, collaborating with two other designers on the team. We updated the legacy components with the new design tokens and design techniques. We applied Auto Layout and simplified our variants and component structure.

I worked closely with the Client UI engineering teams to update the components on a component by component basis by making explorations, writing specs and set up meetings during the implementation process.

Projects

The old brand and design system
In research findings, customers mentioned that Twitter’s current visual language felt “boring”, “cluttered”, and “unfinished”. The current design was also lacking visual hierarchy.
The new design system
Modern, clean, bold, colorful, on brand. The documentation included principles, color, typography, and accessibility guidelines.
The new component library
Thousands of variants, all platforms (iOS, Android, Web), responsive, used by cross functional design teams, close collaboration with client UI teams (naming, interactions, etc.)
Product Component Libraries
We soon realized that we have lots of components outside of our core component library – components that our feature teams are using. I led the initiative to start creating “Product Component Libraries” together with designers on our cross functional teams. A Figma feature Product Component Library is a Figma library that includes a group of related feature components that other designers reuse.        

Separate from the core component library, product component libraries inherit global components from the core design system but include feature specific components and templates that reflect the latest production designs.    

I created a template for designers to copy and start working with, to make it easier to start setting up a library. I’m also the owner and creator of the Onboarding Component Framework and Health library, which involves creating new components, maintaining the library and working with engineers to make sure the components are 1:1 with the codebase.
Customer Education project
I've also worked on projects with our cross functional partners – one successful project is called Customer Education. The Design Systems team kicked off discovery, vision, and design concepts for how Twitter should best approach Customer Education.

The ultimate goal was to create a toolkit of components that can be utilized consistently by designers throughout the experience across all surfaces and entities. As Twitter is increasing velocity and innovation and releasing new features across multiple teams and product surfaces, customers may experience friction and confusion due to inconsistencies and lack of optimization.

Our deliverables for feature designers was to help create consistency across the experience by defining and creating a shared understanding on what Twitter’s perspective is on successful customer education, with principles and guidelines that can be applied universally by any team. As well as developing reusable components that will effectively support new feature education.
During this process we
* Conducted internal interviews
* Made internal and external audits
* Facilitated "How might we" workshops
* Created multiple design concepts
Figma were implemented across all platforms (iOS, Android, and Web), and are used for Customer Education purposes like:
* Half sheets with info items
* Inline Tooltips
* Inline Callouts
* Empty States
* Announcement Overlays
* Inline Prompts
* "New" labels