Sr. Product Designer,
Design Systems

Twitter
Project Overview
One of Twitter's design systems is called Horizon. Horizon got a revamp with a new visual design language starting back in late 2020. When I joined Twitter in the beginning of 2021 we needed to bring over the new core components into a new Figma component library, which became my first project together with two other designers.
My Contributions
We built a new Figma Core library from scratch and applied the new visual design language, as well as Auto Layout, Variants, and new color and spacing tokens.

I work closely with the Client UI teams (iOS, Android, and Web) to update the components on a component by component basis by writing specs and stay involved in meetings during the implementation process.
Product Component Libraries
We soon realized that there are a lot 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 feature designers. 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, feature 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

Today we have built these components in Figma and on all platforms (iOS, Android, and Web), which can be used for Customer Education purposes:
* Half sheets with Info Items
* Inline Tooltips
* Inline Callouts
* Empty States
* Announcement Overlays
* Inline Prompts
* "New" labels