The Custom Commands landing page needed a UI uplift as well as improved overall user experience. This project spanned three months and allowed me to learn a new skill with React JS.

User flows
Wireframing
Interaction design
UI Design
HTML and CSS developer
React developer

My Team

Catherin Anderson, Research
Enrique Corona, Developer
Vishesh Oberoi, Project manager
Jonathan Palmer, Developer

Figma
Sketchbook
Visual Studio Code
Visual Studio
Visio
Azure DevOps

Website

https://speech.microsoft.com/customcommands

There was no existing baseline with measurable metrics to identify usability issues that impact navigation and understanding of the content on landing pages for Custom Commands that a redesign could be measured against. My team conducted a study with 30 participants. While we could not conduct this study before the redesign, we found the results proved our hypothesis. We had hypothesized that the original design had confusing navigation and did not provide enough information about the product to the developers.

Based on interviews and research, the population of our users was narrowed down to three groups.

• Works in a midsize to a large company
  
• Is a business or project manager​
  
• Works on products that involve voice control

• Has 2+ years experience
  
• Programs in a professional capacity at least 11 hours a week
  
• Has used cloud computing and AI before

• Has 2+ years experience
  
• Programs in a professional capacity at least 11 hours a week
  
• Has used cloud computing and AI before​
  
• Has 1+ year installing and configuring computer applications using voice

An initial user flow audit for Custom Commands revealed a redundant navigation and navigation site that was poorly worded, causing ambiguity to where the links would lead.

I wanted to do more than give the page a facelift; I also wanted to improve functionality and offer a wow moment to the users that visited. To do this, we added a demo of Custom Commands to the page and an overview video.  I also identified that the existing page was not brand-compliant, and I sourced brand subject matter experts to ensure that our new design was on brand.

​My next step was to simplify the navigation. I went through multiple iterations with my team before we landed on two easily navigable designs and told a story. One layout had multiple images highlighting points of interest in the product, while the other used two images that mapped to content. I decided to go with the first design to provide a more in-depth overview of the product, and I felt the other layout could become confusing.

​As the page grew, I recognized an area of opportunity, do we alternate the content or not? So I took to the internet to see what the UX masters had to say about the alternating of pictures and text. I recommended going with an alternating layout after researching. I found that data shows people slow down and read more of the content on a page when the image alternates. This was a product we wanted people to really digest and not just peruse.

I had been honest when I was hired that I did not know React JS but was willing to learn it. My next months after being brought on to this project was to learn  React and start the design.  I and the others on my team were happy with the progress I had made in the development of the page, but we were blindsided when one big problem arose at the end. I had been hired to build the page using React JS when it needed to be in TypeScript. This caused a scramble at the end of the project to switch the page to the new language, but In the end, we were able to rally together and release the product on time.

The final product was well received by the customers and the testers for our second round of research. There was some debate on the page's length as decision-makers felt the page was too detailed, but developers appreciated the extra information. The largest surprise and delight was the demo. 

The new architecture of the site was more intentional. It offers purposeful links that ensure the developer is getting the information they need to start using Custom Commands and feel set up for success. 

This was a fun project, and considering the hurdles my team and I had to go through, we are all be proud of it. The project had a lot of instability with reorgs and changing members. I learned it was imperative to stay connected with the people and the importance of finding an expert in an area that I am unfamiliar with. To make this a successful project, I had to be comfortable reaching out to engineers and designers who did not know me and ask questions. I learned that not being afraid to reach out and ask for support and help drives success. It is important not to be paralyzed by a fear of failure when things get tough. It was honesty and transparency with my manager when I ran into blockers that created this project's success. It was also my ability to recognize that I can't do everything, like TypeScript. However, I can still use my skills when needed to support my team, and that's what I did when I worked with the dev to refit the CSS and HTML to work within Typescript and not React JS.