Microsoft Edge Developer Portal

Overview | Discovery | Define | Phase 1 | Phase 2 | Phase 3 | Phase 4

Project overview:
The Microsoft Edge's Developer Portal is a hub providing tools, resources, and news about the browser for developers. Over 12 months, Plain Concepts worked through the multiple phases of the project.

My role:
As UX lead at Plain Concepts, I was involved in the ideation process, wireframe design, visual design, creative direction, building the design system, and collaborating on the product roadmap. 

Stakeholders
Microsoft Edge team — The team works closely with engineers to promote Microsoft Edge through informational websites that share resources and updates about the browser.

What is Microsoft Edge?
Microsoft Edge is the default web browser replacing Internet Explorer 11 and Internet Explorer Mobile. It was first released in 2015 for Windows 10 and Xbox One.

Who are the end-users for the Microsoft Edge Developer Portal?
Developers are the primary user of the Microsoft Edge Developer Portal. 

How do people find this page?
Roughly 80% of users find the page via organic search or referral.
20% of users land on the page by direct URL and through social channels.

The Edge Engineering team was pushing a new version of the Chromium-based Edge browser on Januar y 15, 2020. We were tasked to review the existing website, identify new opportunities, and implement changes that aligned with the product launch. We worked closely with the Program Manager, the Edge Engineering team, and internal teams to define a roadmap for the Microsoft Edge Developer Portal.

Product roadmap

The primary goal for Phase 1 was reviewing the existing Edge Developer Portal to identify new opportunities and promote the latest release of the browser.

PHASE 1 - RESEARCH

Survey
We surveyed users to understand their needs better. The full survey had ten questions, ranging from the user's technical backgrounds to resources preferences. We received 32 responses; below are a few key insights.

Competitive analysis
We reviewed other developer websites and analyzed the content on those pages.

PHASE 1 - IDEATE

With a large percentage of users coming from organic search, we used this scenario to build a user journey map to discover opportunities and Aha moments.

User Journey Map - Looking for Microsoft Edge Reference

Information Architecture Iterations

• We created an information architecture proposal based on the research results and the user journey.

• We were tasked to find a solution to manage and organize the old and new Edge content.

• Some content applied to one version of Edge only and some applied to both.

Based on the findings of users, we avoided taking users out of the Edge Developer Portal from the main menu.

Final information architecture
After a few work sessions with internal teams and external clients, we came to the final content structure.

In November 2019, the new Edge branding was announced. In Phase 2, we included the main content in the wireframes design, worked on the design system based on new branding, and redesigned a few main pages of the Edge Developer Portal for the January 15 launch date.

Wireframe design

Because the primary goal was to announce the new version of Edge, we put more focuses on news and community-related content on the home page to align with the new Chromium-based Edge release efforts.

PHASE 2 - RESEARCH

Before we began visual design, we reviewed the other Edge related pages.

New Design proposals
We presented two different design options.

Design option 1
The design integrated the colors from the updated Edge branding to create a modern look and feel. We are followed the Microsoft page structures closely and created a layout that aligns with other Edge pages.

Design System

After deciding on the direction, we created a design system for the Microsoft Edge Developer Portal based on the Edge brand guideline's color and font requirements. The design system worked as a blueprint for our design process and as an interaction guide for the development team. We took some essential elements from the Microsoft Fluent Design system and further developed components and controls that fit our Edge Developer Portal needs.

Building a design system helped speed up design time and increased productivity by 30% for both design and development.

The final design

After a few rounds of iterations, we landed on a new design. We took ideas from the creative option and integrated illustration graphics in a fun way to make it look fresh.

PHASE 2 - RESULTS

The January 15th launch went very well. We compared analytics between 1/1 - 1/14 to 1/15 - 1/28 and saw:

• +18% increase on daily average user

• +31% increase on daily page views

• +27% increase on daily unique page views

In Phase 3, we focused on launching the Origin Trials developer console and the WebView2 page. We also reviewed all the newly published pages to ensure the language and style were meeting the accessibility requirements and conducted a usability review.

Origin Trials
Original Trials allows developers to safely experiment for a fixed period and provide feedback on new platform features. It also helps the Edge team prioritize features based on user feedback.

Wireframe

Design
Since we had a well-defined design system, the development team can quickly built the pages with approved wireframes and design guidelines. The design system helped reduced design time by 20% for Origin Trials.

WebView2
The Microsoft Edge WebView2 control enables developers to embed web technologies (HTML, CSS, and JavaScript) in your native applications.

Work in progress. In Phase 4, we continue to refine the home page and identifying new content for the Edge Developer Portal.