Chrome Platform Status

Chrome Platform Status

Enhancing feature tracking and launch experience

Old Version

Final design

Launched

View design in the tool

Summary

My role

Lead UX Designer

Timeline

Launched

~ 8 months

Team

Principal SWE

PM

Technical Program Manager

Design Manager

Category

Web App

Mobile App

Chrome Developers Tools

Tools

Figma, TypeScript (code/CL reviewing)

Skills

UX research

Data visualization

Information architecture

Wireframing

Prototyping

Deliverables:

I cleared out ambiguity and set a solid UX Strategy to get the best outcome

I defined user flows and critical user journeys along with top tasks

I conceptualized ideas and aligned with Chrome team and stakeholders

I built prototype to define edge cases and test it with the Chrome team

at validation sessions

Iterated design multiple times before the final version after testings

Contributed design system with new components

Success metrics and KPIs

What success looks like

  • Overview of the feature that enables a quick assessment for the status of the feature

  • Integrated communication that enables communication between developers, feature owners, reviewers

  • Integrated tools that support the feature launch process across all stages of development, encompassing not only API owners gate but also managing from the 'In Development' phase to 'Shipped.' Also enables the

    • request for review

    • reviewers to receive requests and change the status

    • evaluating features post-development

  • Integrated tools that are used to supports feature launching process like every stages of the development not only API but from "In Development" to "Shipped, and ability torequesting review, evaluating feature after development

  • Integrated tools that are used to supports feature launching process like every stages of the development not only API but from "In Development" to "Shipped, and ability torequesting review, evaluating feature after development

  • Enable edit stages with ability to add requested data for stages and approvals.

  • Simple, unified and efficient feature launching process (clearing out friction for seamless experience)

Introduction

About Chrome Platform Status

Chrome Platform Status is a tool that maintained by the Chrome team at Google. It serves as a public dashboard providing information about the implementation status and progress of web platform features across different versions of the Google Chrome browser so that developers can check the compatibility and availability of specific web features across different browsers, and Chrome. And feature owners can develop their features in Chrome browser

Discover

Problem

While Chrome Platform Status serves as the primary tool for overseeing features during the Blink feature standardization and launch process, it falls short of supporting the entire process. Currently, it only supports specific steps, such as approvals by API Owners. However, a successful feature launch requires additional reviews, encompassing important steps like security, UX, testing, and more.

Findings

Who are the users and what are their goals

Who are the users &

what are their goals

Who are the users &

what are their goals

Feature Launching Process with Paint point areas

Feature Owners

Reviewers

As a starting point, I facilitated multiple sessions with the Chrome team to gain insights into both product and project requirements. Following that, I delved into understanding users' perspectives, capturing their top tasks, and pinpointing the challenges they encountered.

The launch process is intricate, comprising multiple steps, such as stages, each requiring additional actions. And it only supports specific steps such as approvals by API Owners. However, approvals, where the feature owner requests reviews from reviewers, are integral steps. To fully launch a feature, all stages must be completed, and approvals should receive unanimous approval.

Feature Owners

Reviewers

Primary objective is ensuring their features meet all requirements and are successfully launched on the Chrome browser.

Feature Owners

Focus on if features align with the Blink feature standardization and launch requirements like feature's quality, security, usability and more

Reviewers

Primary objective is ensuring their features meet all requirements and are successfully launched on the Chrome browser.

Focus on if features align with the Blink feature standardization and launch requirements like feature's quality, security, usability and more

Focus on if features align with the Blink feature standardization and launch requirements like feature's quality, security, usability and more

  • Priority on launching feature

    Goal: navigate the feature launch process efficiently

  • Review and Approval Request:

    Goal: Request review and approval for specific stages to facilitate feature launch.

  • Status Check for Action:

    Goal: Check the status of my launch request for timely actions, such as providing additional information.

  • Understanding Feature Stage:

    Goal: Understand the current stage of my feature's launch process for seamless progression.

  • Pending Approvals Overview:

    Goal: Identify launches awaiting my approval.

  • Comprehensive Feature Details:

    Goal: Access overall feature details for thorough review and the option to approve or request additional information.

  • Communication During Launch:

    Goal: Facilitate communication with other approvers or feature owners throughout the launch process.

  • Questionnaire Submission:

    Goal: Provide a questionnaire to the feature owner for a specific approval.

  • Priority on launching feature

    Goal: navigate the feature launch process efficiently

  • Review and Approval Request:

    Goal: Request review and approval for specific stages to facilitate feature launch.

  • Status Check for Action:

    Goal: Check the status of my launch request for timely actions, such as providing additional information.

  • Understanding Feature Stage:

    Goal: Understand the current stage of my feature's launch process for seamless progression.

  • Pending Approvals Overview:

    Goal: Identify launches awaiting my approval.

  • Comprehensive Feature Details:

    Goal: Access overall feature details for thorough review and the option to approve or request additional information.

  • Communication During Launch:

    Goal: Facilitate communication with other approvers or feature owners throughout the launch process.

  • Questionnaire Submission:

    Goal: Provide a questionnaire to the feature owner for a specific approval.

Primary objective is ensuring their features meet all requirements and are successfully launched on the Chrome browser.

Top Challenges

  1. Showing launches separately for that feature: Users face difficulty in tracking launches as part of a specific feature, leading to a fragmented view of the process.

  2. Multiple tool usage to be able to complete tasks: Users resort to multiple tools for accessing information and performing actions, resulting in a fragmented user experience.

    • Request review (Feature owner)

    • Review and change status of the request (Reviewer)

    • Communication

  3. Cluttered Arrangement of Stages and Approvals: The lack of clear guidance is attributed to the cluttered arrangement of stages and approvals within the tool.

  4. Lack of an overview indicating the status of the feature:

Feature Launching Process with Paint point areas

The launch process is intricate, comprising multiple steps, such as stages, each requiring additional actions. And it only supports specific steps such as approvals by API Owners. However, approvals, where the feature owner requests reviews from reviewers, are integral steps. To fully launch a feature, all stages must be completed, and approvals should receive unanimous approval.

Top Challenges

  1. Showing launches separately for that feature: Users face difficulty in tracking launches as part of a specific feature, leading to a fragmented view of the process.

  2. Multiple tool usage to be able to complete tasks: Users resort to multiple tools for accessing information and performing actions, resulting in a fragmented user experience.

    • Request review (Feature owner)

    • Review and change status of the request (Reviewer)

    • Communication

  3. Cluttered Arrangement of Stages and Approvals: The lack of clear guidance is attributed to the cluttered arrangement of stages and approvals within the tool.

  4. Lack of an overview indicating the status of the feature:

Defining Scope

Goal

  • A feature grouping mechanism within the tool to consolidate all launches associated with a particular feature. This enhances visibility and provides a cohesive overview.

  • Integrate features and functionalities that allow users to perform all necessary actions within a single, unified platform.

  • Optimize the tool's interface for reviewers, providing clear and streamlined functionalities for reviewing requests, changing statuses, and providing feedback. Ensure a user-friendly experience for efficient review processes.

  • Enhance the user interface to simplify the process of requesting reviews. Implement intuitive features that guide feature owners through the submission process, ensuring clarity and efficiency.

  • Integrate robust communication features such as comments, notifications, and messaging within the tool. This enhances real-time collaboration and ensures that all stakeholders are informed of updates and changes.

  • Summary section that offers a comprehensive overview of each feature's status. This allows users to quickly assess the current stage and approvals associated with a feature.

  • Improved User Experience: Simplicity and unity contributing to overall user satisfaction.

Design

Ideation

I engaged in an exploration of various design concepts, thoroughly examining each solution's merits and drawbacks. I collaborated with the Chrome team and my design manager to discuss these alternatives, carefully weighing the pros and cons of each. Our goal was to discern and select versions that would most effectively address the user needs, ensuring the chosen solutions align optimally with their requirements.

Sketches

I started my explorations with sketches to understand how layout should be by focusing on

  • Where feature and launch details should be presented

  • How to see approvals details

  • How feature owner and reviewers would communicate

  • How to request a review/where to see the response from reviewers

  • How to change review request status

  • What is the best way for user to have a quick analysis status of the launch

Wireframes

Then I developed wireframes for the optimal solution, then build the prototype to identify edge cases, and tested the design with the team. I iterated through multiple rounds of refinement before finalizing the high-fidelity design.

Defining interactions and the flow for how to

  • see stage details

  • reach side panel to see approvals details

Solution

Challenge: Cluttered Arrangement of Stages and Approvals due to not supporting all launches specific to that feature.

Solution: Implement a feature grouping mechanism within the tool to consolidate all launches associated with a particular feature. This enhances visibility and provides a cohesive overview.

Challenge: Lack of Overview Indicating Feature Status

Solution: Summary section that offers a comprehensive overview of each feature's status. This allows users to quickly assess the current stage and approvals associated with a feature

Treating each stage as an individual cards that "collapse" view summarizes;

  1. Stage status + action

  2. Displaying approval chips that communicates the statuses of the approvals without showing additional details

This UI treatment makes the UX simple and help users understand overall status of stages and easily find which stage needs their attention and/or which stage is completed so that they can move on to next stage

Treating each stage as an individual cards that "collapse" view summarizes;

  1. Stage status + action

  2. Displaying approval chips that communicates the statuses of the approvals without showing additional details

This UI treatment makes the UX very simple and help users understand overall status of stages and easily find which stage needs their attention and/or which stage is completed so that they can move on to next stage

Challenge: Users resort to multiple tools for accessing information and performing actions, resulting in a fragmented user experience.

Solution: Integrate features and functionalities that allow users to perform all necessary actions within a single, unified platform. This reduces the need for tool-switching, streamlining the user workflow.

Challenge: Lack of Overview Indicating Feature Status

Solution: Summary section that offers a comprehensive overview of each feature's status. This allows users to quickly assess the current stage and approvals associated with a feature


Capturing all details that contribute to understanding
the current status of feature launching, including:

  1. Identifying the active stage of the process.

  2. Determining the feature's current status.

  3. Monitoring the number of completed reviews.

  4. Identifying and addressing any existing blockers."


Capturing all details that contribute to understanding
the current status of feature launching, including:

  1. Identifying the active stage of the process.

  2. Determining the feature's current status.

  3. Monitoring the number of completed reviews.

  4. Identifying and addressing any existing blockers."


Capturing all details that contribute to understanding
the current status of feature launching, including:

  1. Identifying the active stage of the process.

  2. Determining the feature's current status.

  3. Monitoring the number of completed reviews.

  4. Identifying and addressing any existing blockers."

Challenge: Users resort to multiple tools for accessing information and performing actions, resulting in a fragmented user experience.

Solution: Integrate features and functionalities that allow users to perform all necessary actions within a single, unified platform. This reduces the need for tool-switching, streamlining the user workflow.

Challenge: Users resort to multiple tools for accessing information and performing actions, resulting in a fragmented user experience.

Solution: Integrate features and functionalities that allow users to perform all necessary actions within a single, unified platform. This reduces the need for tool-switching, streamlining the user workflow.

Ability to request review for specific approval

Ability to check status of the review (feature owner)

Ability to change the status of the review (reviewer)

Reviewer questionnaire that feature owner should answer them through comments

Integrated communication component

Recording all activities executed during the process for the chosen approval

Ability to request review for specific approval

Ability to request review for specific approval

Ability to check status of the review (feature owner)

Ability to check status of the review (feature owner)

Ability to change the status of the review (reviewer)

Ability to change the status of the review (reviewer)

Reviewer questionnaire that feature owner should answer them through comments

Reviewer questionnaire that feature owner should answer them through comments

Ability to communicate with reviewers and feature owners

Ability to communicate with reviewers and feature owners

Capturing all activities that is performed during the process for the selected approval

Capturing all activities that is performed during the process for the selected approval

Challenge: Users resort to multiple tools for accessing information and performing actions, resulting in a fragmented user experience.

Solution: Integrate features and functionalities that allow users to perform all necessary actions within a single, unified platform. This reduces the need for tool-switching, streamlining the user workflow.

Utilizing "approval chips" as a collapsed state for the details of approval cards, providing a status indication without the need to click for additional details. This approach not only enhances the user experience by offering an overview glimpse of the feature launching process but also efficiently communicates the active stage and the status of approvals in reviews or approved.

Improving UX by using color coding and icons

Using "approval chips" as an collapse state of the details of the approval cards that indicates status of the approval without have to click to see details of the approval.
This treatmnet also help us to improve UX of how to give overview glimpse of the fetaure launching process such as which stage is active and which approvals in reviews or approved

Using "approval chips" as an collapse state of the details of the approval cards that indicates status of the approval without have to click to see details of the approval.
This treatmnet also help us to improve UX of how to give overview glimpse of the fetaure launching process such as which stage is active and which approvals in reviews or approved

Using "approval chips" as an collapse state of the details of the approval cards that indicates status of the approval without have to click to see details of the approval.
This treatmnet also help us to improve UX of how to give overview glimpse of the fetaure launching process such as which stage is active and which approvals in reviews or approved

Post launch monitoring

Did we achieve our goal?

After launch, I closely monitored the KPIs to evaluate its success. I collected feedback from Chrome team to identify any areas that needed improvement.

Improved tracking feature and launching process experience, and it resulted in faster, smoother, and more efficient feature launches

Reduced the time needed for task completion from initiating the creation of a new feature to its successful launch.

Reduced the time needed for task completion from initiating the creation of a new feature to its successful launch.

Improved tracking feature and launching process experience, and it resulted in faster, smoother, and more efficient feature launches

Reduced the time needed for task completion from initiating the creation of a new feature to its successful launch.

Increased task completion by ~10%

Reduced number of errors in the feature launch process by ~15%

Reduced number of errors in the feature launch process by ~15%

Retrospective

What I learned

  • Collaborating closely with the Chrome team and design manager, to align on goals, gather feedback, and make informed design decisions helped so much to clarify ambiguities with baseline concepts and pushed the project forward.

  • Being familiar with the Android Release process helped me lot on developing a deep understanding of the feature launch process, including the various stages, approvals, and the complex system

Old Version

Proposed solution

Launched

View design in the tool

Old Version

Final design

Launched

View design in the tool

Old Version

Final design

Launched

View design in the tool

Techinical details

My role

Lead UX Designer

Timeline

Launched

Team

Principal SWE

PM

Technical Program Manager

Design Manager

Category

Web App

Mobile App

Chrome Developers Tools

Tools

Figma, TypeScript (code/CL reviewing)

Skills

UX research

Data visualization

Information architecture

Wireframing

Prototyping

Information architecture

Deliverables:

Clearing out ambiguity and set a solid UX Strategy

for the best outcome

I cleared out ambiguity and set a solid UX Strategy to

get the best outcome

Iterated design multiple times before the final version

after testings

Contributed design system with new components

Defining old/new user flows

I defined user flows and critical user journeys

along with top tasks

Conceptualize ideas and aligning with multi-stakeholders

I conceptualized ideas and aligned with Chrome team

and stakeholders

Prototype and validation

I built prototype to define edge cases and test it with

the Chrome team at validation sessions

Techinical details

My role

Lead UX Designer

Timeline

Launched

Team

Principal SWE

PM

Technical Program Manager

Design Manager

Category

Web App

Mobile App

Chrome Developers Tools

Tools

Figma, TypeScript (code/CL reviewing)

Skills

UX research

Data visualization

Wireframing

Prototyping

Information architecture

Deliverables:

I cleared out ambiguity and set a solid

UX Strategy to get the best outcome

I conceptualized ideas and aligned with Chrome team and stakeholders

I defined user flows and critical user

journeys along with top tasks

I built prototype to define edge cases and test it with the Chrome team at validation sessions

Iterated design multiple times before the final version after testings

Contributed design system with new components