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. 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.

IA and UX review

We began 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 😕


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?


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
We didn't want to penalise mobile users by hiding content. For such a data heavy site, this was a challange.
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.


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