case study

A system for a system

Twitter has many design systems that often overlap components and methodologies. I worked on the biggest, oldest and therefore most complex marketing web design system, used by over 37 partners on internal and external websites.

Zoomed out view of Figma design system frames
 
UNDERSTAND

The challenge

After receiving feedback from partner surveys, it was clear that people were confused. They didn’t understand what was the central source of truth, where to start and how to utilize our files and available resources. There were many resources in separate places.

MY ROLE

No one told me what to do. All I had were the challenges - what’s working, what’s not. I was selected to initiate a full refresh of our system, both at a component and governance level because I demonstrated resourcefulness and felt comfortable working independently. I made technical updates and created new processes and user flows for how the system was used and explained.

Showing component variants for a button in Figma 



DEFINE

Strategize & prioritize

Now that we understand the challenges, we can formulate goals that address the pain points.

  1. Be a center of truth

  2. Create easier ways to navigate

  3. Define a process for onboarding & off-boarding

 
IDEATE

Generate ideas

Now that we have goals, we can strategize tasks that support these goals.

  1. Be a center of truth

    1. Consolidate: We found asset and media specs outlined in Confluence, some linked resources in JIRA, all kinds of duplicative docs on google drive and other Figma files leftover from external agencies.

  2. Create easier ways to find what you’re looking for

    1. Include an index page for components in Figma.

    2. Include a glossary page to define all the different systems and where to find them.

    3. Create an entry point for non-Figma users (revamp existing online style guide).

  3. Define a process for onboarding & off-boarding

    1. Offer weekly office hours and scheduling options for personalize sessions.

 
EXPERIMENT

Prototype, design, iterate

Finally, where the rubber meets the road, we can start designing and implementing our ideas to see what sticks.

Example of index page that jumps to component documentation

  1. Centralize truth by reorganizing pages in Figma, adding in:

    1. Glossary

    2. Index of components

    3. Accessibility

    4. Assets

      • Specifications

      • Brand guidelines

    5. Hand-off to engineering

  2. Clearly define a path for designer's and non designers

    • Figma is for designers & engineers.

    • Refresh online style guide as entry point for non-designers serving as a quick view summary on the system with consolidated resource links.

  3. Create a process for onboarding & off-boarding

    1. Announced weekly office hours sign-up for design system questions which I led to consult on any issues.

    2. Offered a form submission link to schedule customized onboarding sessions that I would lead and tailor to the teams needs.

 
BUILD & TEST

Solidify

Once the solutions were implemented and carried out, several iterations later, communications had to go about the new changes. This is how I communicated the changes:

  1. Announcements via slack channel

  2. Add to agenda in office hours (discuss changes in person briefly)

  3. Add announcement to monthly department email

  4. Include notes via ‘publish’ in Figma