Team: Engineers, Designers, PM Focus: UX Design
I helped design the entirety of https://myaccount.microsoft.com/. I re-imagined the business account portal to allow users to get more done themselves, saving IT helpdesk time across the 350,000 businesses that use Azure. I also added value to the platform by designing new features like user managed apps, groups, and access permissions.
For Microsoft stakeholders, this design effort had two goals:
Because My Account users could be anyone in any professional setting, I used heavy white-space, large text, and obvious calls to action.
I tackled architecture challenges early on to carve out space for proposed features. I knew I’d need to create stakeholder discussion and buy-in around the structure of My Account and ultimately got there with a “visual sitemap” that used wireframes to show where in the UI a user would go to move around key areas of the portal. Full wireframes here.
I created a custom component library for My Account by re-styling existing Microsoft design assets. I then re-created every component in a 78 page PowerPoint deck complete with UX recommendations and shared it with every PM and dev in our org. This gave the entire team the ability to experiment and visually communicate feature ideas, which made meetings smoother and cut down on misunderstandings.
The App Management System (MyApps)
Microsoft did already have an app system for its accounts, but it was just a basic list of every application the user had access to which buried useful apps under hundreds of minor system processes.
The old “Apps” UI.
I solved this problem by letting users organize and favorite apps, drawing inspiration from mobile patterns. I used a drag-and-drop pattern (with an accessible backup) to let users favorite or move an application in a single click. I set up and executed a prototype evaluation and it went well with each user finding it easy to sort and organize their applications once a teaching bubble let them know they could use drag & drop.
User hovers over the app they wish to move.
User begins dragging app.
User drags app to favorites, highlighting primary favorites list.
User drags app to a specific favorites list.
The Group Management System (MyGroups)
I handled many core flows for My Groups myself early on in my career, giving me a high level of comfort handling the UX of complex forms while leveraging existing assets to keep things easy on dev. Let’s walk through one.
I built the group member page by styling a Fabric list component in our custom colors (including standard, hover, selected, etc) and building sorting/filtering/commands on top, with some commands changing depending on which group members are selected. This is a very standard pattern for lists and it’s what most people are comfortable with seeing if they’ve experienced tools like SharePoint. I try to avoid re-inventing the wheel in screens like this since new patterns introduce more complexity for both users and dev in a flow that’s already going to be pretty complicated.
A list of members in a group containing one member.
Selecting “Add members” pops up a dialog box with a text input the user can type into, with names auto-filling based on the user’s organization. In more recent years, dialog boxes have become less common due to how how unnecessary it often is to block off the entire screen. If I were to re-do this design now I’d try a more lightweight approach with the text input opening either just below the selected “Add members” button, or in a flyout in the corner of the screen.
“Add members” dialog with text input selected.
Users can type multiple names, with previous names appearing as tictacs.
Add members dialog with one member selected; appearing in a tictac.
I used a toast to signal that the members had been added successfully.
Member list showing new members have been added.
The Login and Authentication System
The Microsoft Authenticator setup flow appearing in a dialog box over the Security Info section of My Profile.
This infamous pop up and others are among the authentication related challenges I took on when designing My Account, as a complete authentication overhaul was part of the project.
Each of these authentication-method setup flows had to be able to appear both on the Security Info page and as interrupts to catch users who hadn’t set up the authentication methods required by their organization. I solved this problem by building all authentication setup flows into a dialog box. Fitting complex workflows into dialog boxes can be overwhelming, but this allowed the flow to appear on any screen and in any context. I tackled the overload problem by taking the setup process slow in the dialog box, progressing the user forward one step at a time.
The Microsoft Authenticator setup flow appearing as an interrupt.
I designed all the Microsoft authentication setup flows you may be familiar with using, but my favorite was the one for authentication via USB security key because it was showcased at Microsoft Ignite 2019! The following mock-up was shown on the main event screen.
An interrupt where a user has chosen to authenticate using a USB security key.
