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
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 engineering team velocity
Based on % FE UI JIRA tickets closed
AA
Product achieved minimum level accessibility based on WCAG
100%
All new features planned and built
with Feather Design System
90%
Components compliant with
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.
Explore more projects
Explore more projects
Explore more projects
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 engineering team velocity
Based on % FE UI JIRA tickets closed
AA
Product achieved minimum level accessibility based on WCAG
100%
All new features planned and built
with Feather Design System
90%
Components compliant with
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.
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.