Browser Essentials
My role: Product designer
Tasks include: Designing user interfaces, Creating design framework, Reducing component sizes, Collaborating with PMs and Engineers.
Tools used: Figma
Heard of Browser Essentials?
What is Browser Essentials?
Browser essentials help users gain additional insights about the healthof their browser. It shows up on the right side pane of the Microsoft Edge browser.
How to open Browser Essentials?
Browser essentials is already on and will provide notifications whenattention is required.
Users can access additional information about the performance and security of your browser by selecting the heart icon in the browser toolbar or by clicking the 3-dot icon at the top right corner of the browser and thenscrolling down to “Browser Essentials”.
How can Browser Essentials help me?
It will notify users when their attention is required towards their browser’s performance or security and offer recommendations that can help improve the performance and security of their browser.
The problem
The bundle size keeps increasing and there is a lack of space as each new feature that gets added adds complexity, more decisions, more special cases to the flat view
There is no consistency or reusability of web-components. Each team creates their own web-components and thus no common design pattern among the components.
Current display does not provide enough details for users to engage with.
The customer needs
Customers would like more details such as the graphs and charts presented, details about leaked and weak passwords totake the necessary measures.
The goal
- Create a UI toolkit that creates coherence and systemization of controls,provides a consistent look and feel for the UI and continuity of designs and optimize the bundle size.
- Provide our users with more details.
How will success be measured?
We will measure success by looking at metrics such as:
- Bundle size decrease
- Consistency in use of components
- Increase in DAU
Dashboard
The design story
I worked on some principles that could be applied across all teams in a variety of cards in Browser Essentials to ensure coherence and consistency for all teams and features added.
I worked with a team of engineers and 3 design PMs, we did twice a week design sprints and meetings where, in each meeting, we discussed design feedback and had weekly design updates.
Designs were done in four (4) weeks with continued support given to engineering after design handoff.
The design decisions
Before and After
I worked on some principles that could be applied across all teams in a variety of cards in Browser Essentials to ensure coherence and consistency for all teams and features added.
Before redesign
After redesign
After: Initial layer for the resource usage card
Principles applied
- Utilized components to ensure a consistent look and feel, making it easier for users to understand and navigate the interface.
- Hover state so users can satisfy their curiosity by providing more details without cluttering the interface.
- Utilized a card structure to create clearly defined boundaries.
- The second layer shows more details about the progress bars upon hover over the bars or info tip.
- Saved vertical height by rearranging the card and reducing the progress circle size.
- Made key features on card more visually distinctive.
- Provided more details for users to interact with.
After: Second layer for the resource usage card showing a more expandedview
.png)
After: Second layer for the resource usage card showing a more expandedview with hover
Before redesign
After redesign
Principles applied
Utilized components to ensure a consistent look and feel, making iteasier for users to understand and navigate the interface.
Hover state so users can satisfy their curiosity without cluttering theinterface
L2 level shows more details about Balanced mode in Efficiency mode onhover over info tip. It also shows user how long they have been in each mode.
Introduced battery icons into cards to show the state of Efficiency modevisually.
After: Initial layer for Efficiency mode card
After: Second layer for the Efficiency mode card with expanded viewshowing more data on activity
After: Second layer for the Efficiency mode card with expanded viewshowing more data on activity with hover card
Card principles
This section shows the anatomy of the cards and design system principles guiding their layout.
.png)
Lack of space in Browser Essentials
With the refresh, we have also been able to optimize the size of thepane by using smaller card components and showing only essential information while providing an opportunity for users to click the cards to gointo the L2 to see more details.
Before redesign: Involved more scrolling to get through the features.
After redesigns: Initial layer showing smaller cards.
After redesigns: Second layer showing smaller cards.
Conclusion and Key takeaways
This was one of the design projects I led while at Microsoft. Here are some of my learnings:
Understanding the business and impact: I learned that although designs are important, but it is also important to understand the business goal and impact. This helped me to create more informed design decisions that truly aligned with the overall goals of the project and company.
Transparent management of tasks: With working with different partners, and constantly shifting priorities, it is important to have a unified task list or loop document that is accessible to everyone working on the project. This helps keep everyone on track and on the same page when it comes to what needs to be done, timelines etc.
Communication: Working with a team of PMs and Devs meant ensuring everyone was constantly aligned on the progress, tasks and timelines. It was therefore important to have weekly syncs to keep everyone on the same page and discuss concerns, questions and get feedback throughout the process.
%20(1).svg)
