TWITTER / MONITORING PLATFORM

Increasing engineering team velocity by 55%

While a Senior Product Designer at Twitter, I drove the redesign of the Monitoring Platform UI and planned implementation milestones in partnership with Engineering and Product.


MY ROLE

Senior Product Designer


TEAM

Engineering Lead • 3 Engineers


USERS / PERSONAS

Software Engineers


ACTIVITIES PERFORMED

Proposal Development • Audits (workflow and component audits, accessibility assessments) • Wireframes • High Fidelity Mocks • Planning

TWITTER / MONITORING PLATFORM

Increasing engineering team velocity by 55%

While a Senior Product Designer at Twitter, I drove the redesign of the Monitoring Platform UI and planned implementation milestones in partnership with Engineering and Product.


MY ROLE

Senior Product Designer


TEAM

Engineering Lead • 3 Engineers


USERS / PERSONAS

Software Engineers


ACTIVITIES PERFORMED

Proposal Development • Audits (workflow and component audits, accessibility assessments) • Wireframes • High Fidelity Mocks • Planning

TWITTER / MONITORING PLATFORM

Increasing engineering team velocity by 55%

While a Senior Product Designer at Twitter, I drove the redesign of the Monitoring Platform UI and planned implementation milestones in partnership with Engineering and Product.


MY ROLE

Senior Product Designer


TEAM

Engineering Lead • 3 Engineers


USERS / PERSONAS

Software Engineers


ACTIVITIES PERFORMED

Proposal Development • Audits (workflow and component audits, accessibility assessments) • Wireframes • High Fidelity Mocks • Planning

Monitoring Platform Personas

Monitoring Platform Personas

Monitoring Platform Personas

The Monitoring Platform (Mon) empowers users to assess the functional status of their systems. It caters to all developers within Twitter. These developers construct a myriad of libraries, tools, and services that require supervision if any issue arises.

Site Reliability Engineer (SRE)

Power user/primary role is monitoring

Ensures that consistency of services, keeps systems running and plan for future needs


SRE Teams, Managers and Leads

On-call developer

Rotating role in a product team

Responds to system alerts, investigates graphs, identifies and remedies issues.


Product Eng Teams, Managers and Leads

Site Reliability Engineer (SRE)

Power user/primary role is monitoring

Ensures that consistency of services, keeps systems running and plan for future needs


SRE Teams, Managers and Leads

On-call developer

Rotating role in a product team

Responds to system alerts, investigates graphs, identifies and remedies issues.


Product Eng Teams, Managers and Leads

How can we improve quality of the Monitoring Platform user experience and increase engineering team velocity?

How can we improve quality of the Monitoring Platform user experience and increase engineering team velocity?

How can we improve quality of the Monitoring Platform user experience and increase engineering team velocity?

Challenges in prioritizing feedback

Challenges in prioritizing feedback

Challenges in prioritizing feedback

Feedback is typically unstructured and there is usually a reactionary approach addressing it. There needs to be a more structured way of identifying areas of opportunity for users.


The team struggles with balancing the release of new features versus addressing usability issues. Mon lacks features and the team is slow to deliver more.

Feedback is typically unstructured and there is usually a reactionary approach addressing it. There needs to be a more structured way of identifying areas of opportunity for users.


The team struggles with balancing the release of new features versus addressing usability issues. Mon lacks features and the team is slow to deliver more.

Nonintuitive user experience

Nonintuitive user experience

Nonintuitive user experience

Users are unaware of new features or unsure of how to use existing ones. They often depend on workarounds for interactions that should be straightforward.


Mon had been designed with strong domain-specific usability, but poor perceptual usability. As a result, the application presents a steep learning curve for onboarding developers within this domain.

Users are unaware of new features or unsure of how to use existing ones. They often depend on workarounds for interactions that should be straightforward.


Mon had been designed with strong domain-specific usability, but poor perceptual usability. As a result, the application presents a steep learning curve for onboarding developers within this domain.

Reaching the limits of a 3rd party UI library

Reaching the limits of a 3rd party UI library

Reaching the limits of a 3rd party UI library

Mon used a third-party design system that doesn’t meet complex needs. It did not have the support of a design system team to produce custom components specific to the user needs of Mon developers.


Poor accessibility. Users that have vision conditions, such as color blindness or far-sightedness, find Mon is hard to use.

Mon used a third-party design system that doesn’t meet complex needs. It did not have the support of a design system team to produce custom components specific to the user needs of Mon developers.


Poor accessibility. Users that have vision conditions, such as color blindness or far-sightedness, find Mon is hard to use.

Approach for the Monitoring Platform redesign

Create a culture of usability testing

I established a practice of making decisions based on user studies led by UX. I gathered assumptions and questions from the team and included them in the test plan. Team members were invited to participate in user sessions to take notes and ask questions. This helped everyone understand what their users' needs were and how design designs were reached.


We began triaging frontend issues and prioritizing what mattered the most. This allowed teams to plan and focus efforts.

Redesign for new and current users

The feedback from user studies helped inform the direction of the new Monitoring Platform. Improvements to the information architecture, simplified interactions, table stakes functionality for detail views and data tables benefited the power user and the occasional user alike.


A new feature intro modal was introduced that would trigger on arrival to a new feature page.


We also designed a docs hub to provide a central repository of everything under the umbrella of Observability Experience at Twitter.

Migrate to the Feather Design System

By moving to Feather, we embrace a common visual design language that was quickly being adopted across other internal engineering teams.


With Feather we get built in a11y wins. Feather adoption allowed us to modernize the UI while addressing many accessibility and usability issues at the same time.


The Feather Core team made up of designers and engineers focused on systems serve as support and advisors on components.

Audit: Reviewing the current state UX, components, events and accessibility

Audit: Reviewing the current state UX, components, events and accessibility

Audit: Reviewing the current state UX, components, events and accessibility

An audit of the current state UX, components, events and accessibility was performed. It helped to get an understanding of the existing site structure, interactions, and use cases. It also helped me to identify where gaps existing in the user experience and develop recommendations for change.

Workflow Audit

Listing of all the workflows, corresponding use cases, tracked events, event tracking software, etc.


This process helped us identify untracked workflows requiring instrumentation.

1:1 Component mapping

This showed us how much coverage Feather Design System can provide the existing UI and helped in estimating engineering effort.


We found that over 90% of components had a Feather counterpart.

A11y Review

We partnered with the Accessibility Team to evaluate the current accessibility of the existing Mon experience.


The results show that our score was below WCAG. Common issues were color contrast, font size, missing labels and poor keyboard navigability.

Roadmap and milestone planning

Roadmap and milestone planning

Roadmap and milestone planning

We timed the phases of the projects in a way to accommodate the design and testing of new features that would be designed with Feather components. We used learnings from testing these features to help inform the design of more complex components in Milestones 4 through 6.

Approach for the Monitoring Platform redesign

Create a culture of usability testing

I established a practice of making decisions based on user studies led by UX. I gathered assumptions and questions from the team and included them in the test plan. Team members were invited to participate in user sessions to take notes and ask questions. This helped everyone understand what their users' needs were and how design designs were reached.


We began triaging frontend issues and prioritizing what mattered the most. This allowed teams to plan and focus efforts.

Redesign for new and current users

The feedback from user studies helped inform the direction of the new Monitoring Platform. Improvements to the information architecture, simplified interactions, table stakes functionality for detail views and data tables benefited the power user and the occasional user alike.


A new feature intro modal was introduced that would trigger on arrival to a new feature page.


We also designed a docs hub to provide a central repository of everything under the umbrella of Observability Experience at Twitter.

Migrate to the Feather Design System

By moving to Feather, we embrace a common visual design language that was quickly being adopted across other internal engineering teams.


With Feather we get built in a11y wins. Feather adoption allowed us to modernize the UI while addressing many accessibility and usability issues at the same time.


The Feather Core team made up of designers and engineers focused on systems serve as support and advisors on components.

Twitter Monitoring Platform Redesign

The redesign provides Mon users with a fresh new look on par with other internal apps, while addressing existing accessibility issues and improved interactions.

Observability Docs

A central hub for all Observability documentation providing an overview of teams, blog posts and product updates, Mon product documentation, and other resources.

Observability Docs

A central hub for all Observability documentation providing an overview of teams, blog posts and product updates, Mon product documentation, and other resources.

Results

Results

This was the result of the design system work by the beginning of the next quarter — all desired metrics were hit or exceeded. Although it was not a success metric for this project, our users reported that they liked the changes overall.

+55%

Increase in engineering team velocity

AA

Achieved level AA WCAG compliance

100%

All new features built with Feather Design System

90%

Adoption of the Feather Design System

Observability Docs

A central hub for all Observability documentation providing an overview of teams, blog posts and product updates, Mon product documentation, and other resources.

I'm currently available for new opportunities. Feel free to reach out.

LET’S CONNECT

Twitter Monitoring Platform Redesign

The Mon revamp clarified data interpretation within the UI, defined next steps for users, and introduced a design system that not only simplifies but also speeds up the development of new features, all while staying true to the best usability guidelines.

Results

This was the result of the design system work by the beginning of the next quarter — all desired metrics were hit or exceeded. Although it was not a success metric for this project, our Users reported that they liked the changes overall.

+55%

Increase in engineering team velocity

AA

Achieved level AA WCAG compliance

100%

All new features built using Feather Design System

90%

Adoption of the Feather Design System

⭐️

Connect to Content

Add layers or components to make infinite auto-playing slideshows.

Approach for the Monitoring Platform redesign

Create a culture of usability testing

I established a practice of making decisions based on user studies led by UX. I gathered assumptions and questions from the team and included them in the test plan. Team members were invited to participate in user sessions to take notes and ask questions. This helped everyone understand what their users' needs were and how design designs were reached.


We began triaging frontend issues and prioritizing what mattered the most. This allowed teams to plan and focus efforts.

Redesign for new and current users

The feedback from user studies helped inform the direction of the new Monitoring Platform. Improvements to the information architecture, simplified interactions, table stakes functionality for detail views and data tables benefited the power user and the occasional user alike.


A new feature intro modal was introduced that would trigger on arrival to a new feature page.


We also designed a docs hub to provide a central repository of everything under the umbrella of Observability Experience at Twitter.

Migrate to the Feather Design System

By moving to Feather, we embrace a common visual design language that was quickly being adopted across other internal engineering teams.


With Feather we get built in a11y wins. Feather adoption allowed us to modernize the UI while addressing many accessibility and usability issues at the same time.


The Feather Core team made up of designers and engineers focused on systems serve as support and advisors on components.

Create a culture of usability testing

I established a practice of making decisions based on user studies led by UX. I gathered assumptions and questions from the team and included them in the test plan. Team members were invited to participate in user sessions to take notes and ask questions. This helped everyone understand what their users' needs were and how design designs were reached.


We began triaging frontend issues and prioritizing what mattered the most. This allowed teams to plan and focus efforts.

Redesign for new and current users

The feedback from user studies helped inform the direction of the new Monitoring Platform. Improvements to the information architecture, simplified interactions, table stakes functionality for detail views and data tables benefited the power user and the occasional user alike.


A new feature intro modal was introduced that would trigger on arrival to a new feature page.


We also designed a docs hub to provide a central repository of everything under the umbrella of Observability Experience at Twitter.

Migrate to the Feather Design System

By moving to Feather, we embrace a common visual design language that was quickly being adopted across other internal engineering teams.


With Feather we get built in a11y wins. Feather adoption allowed us to modernize the UI while addressing many accessibility and usability issues at the same time.


The Feather Core team made up of designers and engineers focused on systems serve as support and advisors on components.

Twitter Monitoring Platform Redesign

The Mon revamp clarified data interpretation within the UI, defined next steps for users, and introduced a design system that not only simplifies but also speeds up the development of new features, all while staying true to the best usability guidelines.