The Problem (Warehouse)

Warehouse images for export_The Problem.png

2 MINUTE READ TIME

I evaluated the user tests and came up with a list of changes that needed to be made in order to improve the user experience of the Warehouse website. My success would be determined by my ability to create a website that met the following criteria:

 

1) The website uses color, imagery, and fonts to give a sense of personality and branding. Styling is consistent across pages.

Initially, it wasn’t so much that the styling of Warehouse’s website was inconsistent. There just wasn’t much in the way of styling at all. The typography was the same across the entire website, with no consideration for hierarchy, and grid spacing and margins were so inconsistent they seemed chosen at random.

1.1 consistent styling.png

2) Sufficient use of grid element spacing and margins.

A grid system was employed to showcase categories of furniture, but went off the rails on the footer, and all text fields. Text was piled top of other text, creating a website that was not aesthetically appealing. The lack of sufficient spacing increased the likelihood for error when customers tried to click on links, but accidentally clicked on other nearby links because they were stacked so tightly.

1.2 grid spacing & margins footer.png
1.2 grid spacing & margins sell.png

1.3 grid margins jobs.png

3) Pages have a typography hierarchy using fonts, font size, and font color so that the body text and headings text are distinguishable.

Text hierarchy was completely absent from Warehouse’s initial website. All text was exactly the same font and size, and mostly the same color.  


4) Links are distinguishable from body text.

Buttons were present on the initial Warehouse website, but no clickable text had any sort of hover state, and body text was indistinguishable from links, so it was unclear what was clickable. The only indicator that a link was clickable was that the cursor turned into a hand, so the user had to wave their cursor around the page to figure out what text was linked.

1.3 text hierarchy.png

5) Navigation and breadcrumb links work.

The original website had breadcrumbs only on a few random pages, and they weren’t distinguishable from body text. Users were unclear about where they were on the website, and the website offered little in the way of hints.

1.5 navigation & breadcrumb links.png
1.4-products-hover-state.png

6) The website includes HTML5 tags and any additional aria roles, labels, etc. so a screen reader is able to scan the website for a user.

The website was not accessible for a lot of users because HTML5 tags and Aria labels were absent. Additionally, text on top of images did not have enough contrast to be legible by users with sight limitations.

1.6 accessibility.png