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) 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.
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.
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.
5) Navigation and breadcrumb links work.
I added breadcrumbs on all pages, and ensured all the breadcrumbs and navigation links were working properly.
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.