Hello!

My name’s Lewis, I'm a UX Designer, Developer, Dog lover, Gymnast, Fitness enthusiast & Metric lover.

Located in Sydney, Australia
menu

Lewis Healey

UX Designer & Developer
in Sydney, Australia 🇦🇺

hello@lewi.sh

arrow_back
Date

May 2017 - Sep 2017

My role

UX Designer, Project Manager, React Developer

Client

Firebox.com open_in_new

Team

Key stakeholders, Brand Manager, Senior Designer, Back-End Developers

Project Summary

  • Redesigned entire site in line with the new brand direction
  • Developed a component-based site in ReactJS
  • Successfully project managed deliverables and communication across multiple departments
  • Designed a new internal tool for the homepage, which increased daily efficiency for the design and content teams
  • Significant improvement in MoM sales (vs prior year)
  • New SEO optimised site moved Firebox up to #1 ranking for target keywords

Research

The Problem

I was tasked with redesigning firebox.com to align with the new brand direction and target customer. A 20-year old e-commerce platform with a lot of technical debt, Firebox.com lacked a coherent style. The problem was establishing a consistent style when building a new brand.

See the examples of our old layout below

New Brand Direction

Working with marketing and brand, we completed some substantial insight on the type of customer we want to target. This developed the personas I that would be used as direction for how the site should look at feel. The objective was to move away from the current ‘laddy’ gadget feel to a cool home & lifestyle brand.

Competitor Analysis

I conducted interviews with the target demographic about the coolest home & lifestyle brands (Urban Outfitters, Bando & Nasty Gal). Photography, illustrations, and copy were the clear reasons why the brands were ‘cool’, which was interesting as from usability tests I conducted on the same sites, there were quite a few issues. After conversations with the team, we agreed that we would focus on usability, delight, and SEO.

Style Guide

Additionally to the competitor analysis, I produced a visual audit which looked for similarities in layout, typography, spacing, iconography, and colour, which acted as a foundation for our style guide. Working with the design and brand teams, we then built a comprehensive style guide that focused on responsive typography, spacing & buttons, an accent only colour scheme and a card based layout.

I spent some time working with the developers to design and build React components into the style guide. Having a single “source of truth” for all code and design ensured the objective was met by having a consistent UI in the future.

Design

Design approach

As well as collecting general pain points and bugs, I wanted the new website to have an overall objective: to focus on the product. I was inspired by Stanley Wood’s Design Doesn’t Scale, in particular, his discussion on Spotify’s design principles, when contributing to Firebox’s rebrand. This, combined with user interviews, screen recordings and heat maps, ensured a cohesive and focused approach to the product - Firebox’s USP.

Designs

Collaborations with illustrators gave the site personality and substance. These illustrations aided as micro interactions too, for example when a customer adds to basket or signs up to the newsletter.

Homepage & Builder

As well as improving the experience for the customer, I wanted to enhance the Firebox employee interaction with the site. Having interviewed and ran usability tests with the existing homepage builder power users within the content and design teams, I was able to establish if there were any issues.

I found that the design team had frustrations making content live. For example, if a promotion started at midnight, a member of the team would need to set an alarm and manually make the promotional graphics live. In my experience, not enough companies invest time building effective internal tools, and I get a real buzz from making an employee’s life more efficient by automating processes.

Product Focused Product Page

Due to high organic traffic to the product page, we had to strike a fine balance between brand and product information, whilst maintaining focus on SEO. The previous product page was confusing in hierarchy and this was resolved by fixing the left-hand main image and making it full screen, ensuring the product photo was always in view.

Category pages

In line with our ‘focus on product’ goal, it was imperative to show as much of the product image as possible, removing the obstructing text overlapping the image.

Development

From mobile-first to responsiveness

Having previously duplicated the code for the completely different mobile UI, versatile components this time around facilitated a single source of code and focused on an effective responsive design, resulting in less technical debt.

SEO

A firm believer that UX and SEO go hand-in-hand, I worked closely with the marketing department to ensure the new website was optimised for search engines. We converted images to srcset, set-up AMP for our blog, embedded SVG’s and improved our internal linking equity.

Current results

  • Redesigned entire site in line with the new brand direction
  • Developed a component based site in ReactJS
  • Successfully project managed deliverables and communication across multiple departments
  • Designed a new internal tool for the homepage, which increased daily efficiency for the design and content teams
  • Significant improvement in MoM sales (vs prior year)
  • New SEO optimised site moved Firebox up to #1 ranking for target keywords
Current results