Problem

Develop customer type-specific value propositions. We needed to underscore the value of the USS brand, product, & service. It needed to show why USS was better than competitors and list key features.

We knew the key target markets for USS were the Construction, Events, Industrial industries.

The former website was dated, without much direction or a sense of purpose. There were several ‘get a quote’ features without clarity on what was going on. There was a lot of repeated content. Within the search features – which is a key area user used blog posts were predominantly ranking higher than sales/information posts .e.g. searching for “toilets for events”.

Understanding the customer journey

I did a thorough deep dive into the customer website to understand the site structure and journeys different types of users needed to take.

To then collaboratively work up a proposal for a new condensed site.

Website Audit

I lead the investigation of the current USS website, analyzing the user experience (UX), user interface (UI), and highlighting improvements. Focused on accessibility and highlighted barriers that prevent interaction and access to the website. I analyzed the current site map and identified areas of improvement. Lastly, collaboratively carried out an in-depth analysis of all interaction elements and identified current pain points on the website with suggested improvements.

User Personas

Working collaboratively in creating user personas to identify pain points, goals, and how users would interact with the website.

Sitemap

Wireframes

I led the content structure of arranging which contents were vital and how to make it customer-focused. I worked alongside two other designers who created the wireframes.

A few highlights from the homepage are highlighted below:

1. Funneling and directing the user straight away, we knew the core three industries that required the service though we didn’t want to eliminate the rest of the industries – and they were still mentioned
2. As the search was still of importance, this was presented high on the page accompanied with a map that would help to give users guidance if USS can fulfill their location required

Wireframes were created for both mobile and desktop for every page/page type.

UI guidelines

Working collaboratively with the brand director and another designer, we worked together to create a style that suited the rest of the systems built and set a unique style for USS. I aided the direction and setting guidelines of which components were needed.

Designs

A few key areas are highlighted below:

Get A Quote

We wanted ‘Get a Quote’ to be consistent and the same throughout the site – it was a floating bubble on the site to the right-hand corner of the site on desktop and bottom right on mobile, to give it more prominence we expanded the bubble on hover (on desktop), and on clicking a roll outside panel opened out.

We know users are familiar with an e-commerce websites online so we tried to showcase a familiar e-commerce type of experience so users felt like they were shopping and knew exactly what they were requesting a quote for.

Landing pages

We had landing pages for the core industries with targeted & relevant content. Below is an example of the construction homepage.

Displaying Products

Previously USS featured products with single pages clicking through and loading every product. This required a fresh page load each time. The usability of product pages was poor as a lot of the contents is very similar – there wasn’t a need for a whole page other than SEO. Navigating and comparing products was difficult.

The new approach was to feature ‘product overview widgets’ which open in a lightbox for further detail making navigation easier. Users were also able to add straight to quote wherever they saw the product and adjust its quantities.

Once the user opens up the product details, we broke the contents down into sections and categories so users weren’t bombarded with contents and only browsed more details such as size and specification if they wished to find out more. Related products were also added in case users felt they wanted to uncover related products that may be more suited and compare more easily.

If you would like to see more design and more detail. Please get in touch madebyfarha@gmail.com.