Jesse Yuen

Hot Copper

  • UX
  • Design
  • 2018

This was a research, strategy and design project I worked on at Humaan. The project spanned months (and months) and involved several members of our team (creative director, researcher and myslef in ux and design) over this period. There is a lot of ground that could be covered here but we can discuss that anytime right? I'll focus on my involvement on this rather complex project and have selected a few of insights/outcomes gained along the way for now.

Here is the old Hot Copper site for reference.

IA and UX review

I began my involvement on this project with a comprehensive site-wide audit. Many questions were asked. What does each page do? What does the UI on each page to do? Does it function as expected? Is it placed intuitively? Do we need it? Are we missing anything? What is broken? What works well?

The UI audit looked something like this.

Things that make you go hmmm

Our initial suspicions was that the information architecture was overly complex and contributing to a somewhat confusing experience for people navigating the site. We decided to set up a tree test using Treejack to evaluate how findable key parts of the site where for visitors.

Creating a tree test allows you to see a sites structure without the influence of navigation aids and visual design and in doing so we realised while that the current IA was actually rather rather straightforward and not too much needed to be re-jigged.

Insight! It wasn't as much poor IA but rather a limited visual hierarchy and busy UI that gave the impression of cluttered structure, in the process increasing the cognitive load and creating a baffling experience ๐Ÿ˜•

Qualitative and quantitative

I interviewed staff in support roles within Hot Copper to help identify common pain points that users experienced on the site. Many of these followed a similar theme of onboarding, account management and forum engagement... all priority tasks for the site.

Stakeholders 'from the trenches' are often able to share insights that are impossible to see with quantitative data alone.

We didn't have access to users for interviews in this case so another member of our team ran a site-wide survey gathering 3000 or so responses.

This kind of qualitative data proved very helpful as began problems and patterns began emerging and we could prioritise the ones we hoped to fix and how.

For 2 weeks we ran heat mapping on key landing pages to identify navigation patterns. We discovered quickly that many items occupying space in the primary header region were in fact collecting no clicks whatsoever.

Insight! Only a few links in the header, the search component and an obscure sidebar widget partway down the page appeared to be the primary methods of sitewide navigation for a large amount of users ๐Ÿ˜ฎ

The Hot Copper homepage. Ok ok, you got me. This isn't the real heatmap. I lost those screenshots but you get the idea right?

Desire paths

We found the heavy attention on a remote sidebar widget the most fascinating observation from the heat mapping.

The fastest way from point A to B on a users journey isnโ€™t always the intended way, and website users will find an alternative paths if it's easier. This is known as a desire path, with users showing their needs through their behaviour.

A desire path in the wild. Why go the long way around when you can easily cut through the middle?

Photo by Kake Pugh.

Instead of clicking 'Latest Posts' in the header, a large portion of Hot Copper users were preferencing a small widget (accessed only after scrolling!) to first view then access popular topics in the forum.

With data on what header UI people actually used as well as an indication of what the users needs really were based on the traffic to the sidebar widget we had some pretty clear ideas on what we could adjust to make it easier for visitors to perform their desired tasks.

Design

To kick off design I wireframed oodles of screens across viewports and states and captured intended layout for the site based on our research and these informed conversations with internal stakeholders and third-party collaborators such as SEO types.

Wireframes for days (and days).

Our final design included a strict audit of links in the header with an emphasis on a prominent search component and clear typographical hierarchy.

The revised header in various states.
Homepage concept
Mobile users shouldn't be penalised for their device choice and deserve accesss to the same content as a desktop user.

In our final design the popular sidebar widget with has been split into two succinct lists, thus removing the necessity for tabs and is positioned centrally on the homepage. We've increased the amount of items in these lists with the aim of increasing visibility of and access to popular content.

Extensions of the final design included an editorial section.

The client hoped to start generating editorial content. We designed a series of modular pages that allowed for a mix of text and video based media that conveyed a sophistication and trust as a source of news.

A common issue raised by Hot Coppers support staff was that users often created multiple accounts instead of logging in. We hoped that by visually separating the two tasks (yet keeping them in close proximity of each other) users would have less trouble performing their intended task. View the original login screen for a comparison.

A consistent style to rule them all

Part of the brief from the client was to establish a consistent and appropriate visual language for UI used within the site. A comprehensive list of components were designed with the intention that an in-house development team could follow our direction when building bespoke features in the future.

A collection of UI components designed to support the refreshed Hot Copper site.

Outcome

The designs are currently with the clients in-house developers with the intention of releasing beta access to a smaller user base for evaluation. I'll keep you posted on the results. ๐Ÿ‘

โ‡ค View more work