Warehouse Main Photo Mockup.jpg

Warehouse

Case-Study-Banner.png

Warehouse

UX/UI, Front End Development, Concept Desktop Website

 
Case Study Banners-03.png

For my capstone project for CodeAcademy’s Build Website UIs class, I was charged with using HTML and CSS to perform a UI makeover on a fictional e-commerce site called Warehouse.

 
Warehouse Main Photo Mockup.jpg

#MINUTE READ TIME

0. Overview

In May 2018 I took a course on “Building Website UIs” through CodeAcademy.  For my capstone project I was given a scenario - a fictional furniture store called Warehouse recently completed a lengthy round of user testing on their website. My job was to analyze the user testing data, perform a heuristic evaluation on the existing site, and implement design fixes using HTML and CSS.

ROLES

Heuristic Evaluation, User Flows, Prototyping, UI, Front End Development

DURATION

2 weeks

TOOLS

Case Study Banners-03.png

My Goal

Keeping the general functionality of the website, improve the user’s experience by updating the website’s design.

 

1. The Problem

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.

Here were the major flaws with the website that I set out to address:

a) No branding or styling

  • Highly inconsistent grids and margins

  • No color palette

1.1 consistent styling.jpg

b) Insufficient use of grid element spacing and margins

  • Inconsistent grid systems between products, footer, and text fields

  • Extremely minimal margins between lines of text created legibility issues

  • High risk of error of clicking the wrong button because there wasn’t enough spacing between buttons, forms, and links

1.2 grid spacing & margins sell.jpg

c) No text hierarchy

  • Text hierarchy was completely absent from Warehouse’s initial website

  • All text was exactly the same font and size, and mostly the same color

1.3 text hierarchy.jpg

d) Links indistinguishable from body text

  • No clickable text had any sort of hover state

  • Body text was indistinguishable from links

1.4-products-hover-state.jpg

e)   Inconsistent/absent breadcrumbs

  • Inconsistent breadcrumbs only present on a few random pages

  • Breadcrumb text was indistinguishable from body text

  • Research indicated that users were not clear where they were on the website, and how to get around

1.5 navigation & breadcrumb links.jpg

f) Website does not follow accessibility guidelines

  • HTML 5 tags and Aria labels absent

  • Poor contrast in text on top of images created legibility issues for users with sight limitations

1.6 accessibility.jpg

2. The Solution

I evaluated the original Warehouse website and created a design proposal. 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 fixed the problems and improved the usability of the Warehouse website.

a) Unified branding & design patterns

  • Implemented a color scheme

  • Created a consistent style for hover states, buttons, links, grids, and text forms

2.1 consistent styling index.jpg

b) Improved legibility through spacing

  • Completely redesigned the footer, job postings, and sell feature

  • Added negative space and typographical hierarchy that made the text more legible and easier to navigate

2.2 grid_margins sell.jpg

c) Added typographical styling

  • Applied uniform typography across website

  • Chose fonts and created a typographical hierarchy

  • Used color to increase accessibility and legibility of text on different backgrounds

2.4-typography-full.jpg

d) Differentiated links and body copy

  • Added hover states to clickable areas

  • Varied the font and color to distinguish clickable text from non-clickable text

the solution image edits-04.jpg

e) Improved site navigability

  • Added breadcrumbs on all pages

  • Ensured all breadcrumbs and navigation links were working properly

the solution image edits-03.jpg

f)  Improved site accessibility

  • Added HTML5 tags and Aria labels on every page

  • Changed the typography in instances where the text was illegible



the solution image edits-02.jpg