The Solution (Warehouse)

Warehouse images for export_The Solution.png

2 MINUTE READ TIME

I evaluated the original Warehouse website and created a design proposal based on the Neilson principles of usability. I gathered feedback from my peers on my proposal, and created a set of user stories that set actionable tasks for me to complete for the client. I then created a mockup and used HTML and CSS to fix each problem. Here is a point-by-point rundown on how I met the criteria for improving the usability of the Warehouse website.

 

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


I chose a color scheme and created a uniform style across all pages. I created a consistent style for hover states, buttons, links, grids, and text forms.

2.1 consistent styling index.png
2.1 consistent styling deals.png
2.1 consistent styling cart.png

2) Sufficient use of grid element spacing and margins.

I completely redesigned the footer, job postings, and sell feature. I added negative space and typographical hierarchy that made the text more legible and easier to navigate.

2.2 grid:margins sell.png
2.2 grid:margins jobs.png
2.2 grid:margins footer.png

2.4-typography-full.png

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

I chose fonts and created a typographical hierarchy that I applied uniformly across the website. I used color to increase legibility and accessibility of text on different backgrounds.


the solution image edits-04.png

4) Links are distinguishable from body text.

I added hover states to clickable areas and varied the font and color to distinguish clickable text from non-clickable text.


the solution image edits-03.png

5) Navigation and breadcrumb links work.

I added breadcrumbs on all pages, and ensured all the breadcrumbs and navigation links were working properly.


the solution image edits-02.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.

I added HTML5 tags and Aria labels on every page, and changed the typography in instances where the text was illegible.