UX Designer & Developer
in Sydney, Australia 🇦🇺
May 2017 - Sep 2017
UX Designer, Project Manager, React Developer
Key stakeholders, Brand Manager, Senior Designer, Back-End Developers
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
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.
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.
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.
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.
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.
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.
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.
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.
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.