Microsoft

Edge Browser

In 1995 the internet was magical and Internet Explorer was at the center of the net. Fast forward 30 years and Internet has become so integral to everyones lives.


Unfortunately browsers have not kept up with the innovation of the web itself. I was part of an ambitious team to fork away from the chrome experience & codebase and forge our own internet experience

Impact Summary

I’ve collaborated within my own team & the broader windows team in feature creation. I’ve also independently designed and pitched features that were interaction focused.


In addition I’ve built the presentation for edge browser that was delivered to leadership with rubrics of color, typography & interaction design.


The results of the presentation were unanimously positive & later became a north star to future design within the edge browser. A few of my features that I directly created are now in production including split-tabs, micro-interactions, and detail work all around the browser itself. 😀


For the general windows design org, I was 1 of 2 motion designers.


I was tasked to work end to end in feature creation and direct motion UX between adjacent teams which include, other manager, designers, PM, Engineering.


Features that I self created & pitched for Edge Browser has successfully shipped.


Launched a North Star of a motion design system that other teams can follow; covering animation theory & direction, use of color, typography & documented a way to standardize a production pipeline to organize new work going forward.


Advocated to integrate Lottie as a means as faster development & cohesion between design/dev instead of raw C++


Built prototypes in Figma & after effects to justify budgets for new features to leadership


In addition I’ve built the presentations for edge browser that was delivered to leadership with rubrics of color, typography & interaction design.
The results of the presentation were unanimously positive & later became a north star to future design within the edge browser. Here.


With all that done I also made time to revamp the Edge surf game (chrome dinosaur game competitor) and reached 2nd most used feature in Edge itself.

The Process

The following is a breakdown of one of the features I have worked on and the process that helped justify the end result and ultimately getting implemented to production.

Split tabs

Spit tabs is a feature directed towards power users of the edge browser. With our ownership between windows and edge we are able to make feature that has a cohesive UX between the OS and browser.


Split tabs asks a simple question of how would a common action like breaking your browser into 2 windows to compare side by side become a first party experience?

Design

I design with the understanding for humans. People want features that interface with how they observe and interact with the world. Pointing, dragging & feedback all relate to our senses of sight & touch.


I iterated over a few tab designs to convey the split. Dropdown menus, added icons & highlights felts probable but not correct.

Ideation

An idea for me starts with a vision or a collection of thoughts that stir around a context that comes from a topic.


I usually start with a broad composition that gets to the intent without being weighted down by details that can be refined later.


I want to give it that human quality & people want features that interface with how they observe and interact with the world. Pointing, dragging & feedback all relate to our senses of sight & touch.

We finally settled on a tab design that encapulates 2 tabs while being the same shape as current tabs, thus being backwards compatible with normal tab functions.


You may drag and drop other tabs into this group and swap pages out, & even swap the tabs side by side.

While the super tab is in its inactive state, they resemble a normal inactive tab thus not ruining the consistency of tab design & also reducing work needed to maintain this feature in the long term.

Focusing to how tabs split, dragging a tab into the content window, either the left or right will highlight with a blue border around the active area. If content is exisiting, a blur will convey feedback that you are about to replace with your dragged tab.

I find that giving multiple dimensions of feedback reduces confusion to what the user is interacting with. In this case utilizing a visual screenshot of their tab content with the title of the web page aligns much closer to their content than just a text overlay.In additon having large previews, this opens the door to touch controls that are contextual to their content while not having to design 2 paradigms for mouse and touch.

Super Tabs

Solution

Splitting a tab with another tab is just a simple drag gesture. Edge would understand your intent and give a familiar experience from mobile gesture controls but on desktop.


No drop down menus, no contextual menus, just drag a tab into your window and Edge would understand your intent.


UX design does not stop with image stills to convey functionality... Sometime motion is the only way that a feature can exist.

Fluid UI

We wanted to bring adaptive UI for computers with limiting screen real estate. Familiar to the mobile realm, minimizing browser UI while engaging in content can now be had on a “desktop” experience

Micro-Interactions

Thoughtful Micro-interactions existed throughout my product design but there were certain instances where the micro-interaction was the sole feature of the task


Unique icons & actions were created to facilitate applets that run in the background of your browser without having the need to open new tabs

Individual tabs open with kinetic momentum left to right. Active tabs highlight when hovering over. [x] close tab buttons unfold open & hover state is enabled during a new tab to establish interactivity.

● Credits

Microsoft

2022

Date

Michael Diaz

Parker Young

Daniel Krenn

Team

Figma

After Effects

Pipeline

Thanks for looking!

Back