The purpose of this project was to redesign the main product page of an independent Italian hiking boot company.

To achieve this goal, I looked to implement a new content strategy and design a more intuitive information architecture for the site.

I also updated the overall look and feel of the web page and created a style guide for reference in the process.

While I was working on the project, the company's original website had actually undergone a significant update. Most of the issues that I addressed however, still seem to be present in the new version. Notwithstanding, for the purposes of this project, I will be referencing the original web page.

From start to finish the project took around 2 weeks to complete. I took care of every stage from analysing the usability and context of use to specifying the user requirements and producing design solutions as well as the microcopy.

The main usability issues in this experience largely stem from the awkward sitemap navigation and obscure product category display - there is no discernible content hierarchy or any form of progressive disclosure.

Everything seems to come at you at once, which is not ideal when you are trying to figure out what sort of outerwear you need. This is made worse by the careless use of spacing and design components.

Moreover, the use of screen real-estate is suboptimal and content layout is severely lacking in terms of variety. Typography choice is questionable as well as the overall style and design, which feels inconsistent throughout the website.

Some hover states' colour contrasts have clearly not been checked for accessibility.

In the short video below (3 mins) I go over the main pain points and usability issues I faced when navigating the site. The webpage was tested using Google Chrome on a 15.4-inch (2880 × 1800) Macbook Pro.  

Below is the initial information architecture I laid out for the redesign. 

Initial testing of the paper wireframes revealed the possibilities for an even leaner sitemap. This lead to the omission of the search bar and cart - since I was dealing with a family-owned boutique brand and not a large manufacturer, it made sense to forgo these typical e-commerce features.

Once I'd sketched out a few ideas on paper I was ready to start wireframing. 

At this stage I was able to address the structural problems that I mentioned in the design critique, namely typography, navigation bar, use of negative space, layout variety and screen real-estate optimisation. It was crucial to give users an arial view of the product categories as well as giving them the option to learn more about the categories as a whole. The category panel allows the user to see the products without the additional cost of interacting with the navigation bar.

I ran a couple tests with a few colleagues to see if there was anything that needed tweaking before jumping into the hi-fi mockups.

It was a simple moderated test involving the (directed) task of finding their way to the general product overview page (what do I need?).

It became immediately apparent that I needed to add an access point to the category panel. 

Below is the final user flow including the home screen of the mobile view.

TYPOGRAPHY: I went for a combination of Kanit and Figtree - two reliable sans typefaces that work well in conjunction with each other. I used Kanit mainly for button interactions and Figtree for the microcopy.

LAYOUT: Given the low text density, I chose to accommodate for a Z-shape reading pattern, intersecting the page with content blocks based on the information hierarchy.

COLOUR SCHEME: I adopted the brand logo colours and kept them present throughout the user path, all the while making sure colour contrast ratios were maximised.

NAVIGATION BAR: The navigation bar now sits atop the hero image and is fixed when scrolling. It also compresses slightly when scrolling down the page (see demo).

Below is a demo where I showcase the prototype (5 mins). Again, the prototype was tested on a 15.4-inch (2880 × 1800) Macbook Pro.  

Short demo of mobile home view (20s).

The main purpose of this project was to apply UX and content strategy principles to ameliorate a poorly designed webpage.

The final user flow was tested by fellow outdoor enthusiasts and subject matter experts. User satisfaction and perceived usability went beyond the expected outcome.

This project was also a chance to hone my skills in Adobe XD and building a responsive design.