Microsoftstore.com Business Category Page

Redesign of the business category page within Microsoftstore.com. It was overdue for a new design as the old business category page had a terrible combination of colors and an overall a very spammy feel. I wanted to make it clean with neutral colors. Other than visual design, I used several other really important UX design components during the process. In version 1 of the design, the black "sticky" navigation was part of the teal color "slim hero" module. We had a restriction that if you wanted to keep the black "sticky" navigation you would have to keep the "slim hero" module too. I really didn't like how busy it looked having the "slim hero" along with the bigger hero image below it. In version 2, I got rid of the "slim hero" module which meant the "black sticky" was also removed. By removing the "black sticky," I lost the navigation links which are very important for users to have. I came up with a solution by creating a four-across grid module to replace the "black sticky" links. Using light grey as the main background color, the entire redesign looks much more cohesive. The four-across grid will provide users a quick way to navigate to the top category page without having to go through a drop down menu at the top.

The problem: Outdated design. Need new design to implement promotional items to increase usability and visibility. 

The solution/ goal: Improve design to increase visibility and usability. Decrease clutter. 

UX Design // Visual Design // October 2015

Old Screenshot

Old design had too many colors and it was very distracting for our users. 

Wireframe

Version 1

Another important UX component on the new design is to add a "Why buy from us" module. Letting our users know the advantages and why it was important for businesses to buy from the store. 

Version 2

Only difference is removing the "slim hero" module and adding four-across grid as main category. 

Mobile View

Redlines

Redlines helps developers build out the design. It is probably one of the most tedious tasks in design but also one of the most important. You have to work closely with the developer who is building out the page. A developer looking at the comp won't have the same experience as a designer looking at the comp. The really small details will get overlooked so having a good working relationship with a developer is a must in the UX design world.