James Finch

Digital Product Design

Menu

Iconic Store — Major Redesign

libertylondon.com

Transforming Liberty online, London's most iconic department store. An end to end redesign of Liberty's e-commerce website, emails and digital marketing. The goal of the redesign was to keep libertylondon.com relevant and a leader in the department store e-commerce arena, improving the overall customer experience and performance to increase online sales. The redesign improved the user interface and user experience allowing quick and fluid journeys through the shopping pages, checkout, content and account pages on all devices. The overarching goal; to create a front-end that unifies e-commerce, storytelling and service to create a proposition that elevates Liberty London across all channels. The key pillars of the redesign were the customer (services, loyalty and account), a great shopping experience (product content and presentation, refinements, search and navigation, video, speed and UGC), international growth (locale aware product availability, currency conversions, locale specific content), storytelling and brand building (the site is the brand and story, educate and teach customers about brands, founders and makers, engage and endorse and authoritative content to help boost organic SEO).

Liberty Redesign Mobile Homepage
Liberty London Homepage - Large Tablet View

Below screenshots are of core journeys on mobile devices, starting with global navigation moving through the landing pages for shopping categories to listing pages, basket, checkout login and finally the content hub.

← PrevNext →

Liberty saw a year on year increase in conversion after the redesign and re-platform adding to a 600% increase over 10 years

As Head of Digital Design at Liberty I oversaw the delivery of two entire site redesigns and 2 re-platfoms, leading a team of designers and developers ensuring that the digital products where what a multi million pound luxury retailers customers expected. The ultimate goal being to increase revenue and visits whilst remaining an authority in the department store arena, the site performed well during my time working on the digital products with an increased revenue of over 600%. Designing a rich e-commerce feature set ranging from seamless shopping journeys with integrated story telling to express payments, wish lists, stored value purchase and redemption.

Liberty London Product Page Design
Liberty London Mini Cart Design

During the redesign I looked at all touch points a customer might make, ranging from their account dashboard (profile data, loyalty, subscriptions and more), through the entire shopping journey from Search, PLP, PDP, Basket and checkout. The end to end lifecycle was also designed including order lifecycle emails and follow up email programmes.

Liberty Loyalty Landing Page

Liberty Account Dashboard Page

Loyalty Issuance Email

Liberty Account Dashboard

Design System

Snippets from the Design System; this system defined all the branding choices (colours, logos, icon-set), re-usable components like buttons, form UI and notifications plus a typographic guide. Alongside this was a supporting layout modules document that has all the tools the design team needs to create new iterations for upcoming features quickly.

Colour Palette

Primary Scheme
#4f0341 P
#7B4271 P — Light
#29001b P — Dark
#F9E9B8 S
#FEFBF1 S — Light
#C5B788 S — Dark

Buttons

Primary Buttons



Primary – Loading

Secondary – Loading


Iconography

A selection of icons from the design system
Wish List
Shopping Bag
Search
Hamburger/Menu
Pin
Shield
Return
Chat
Camera
Zoom
Loyalty
Close
Close Small
Up Arrow
Right Arrow
Down Arrow
Left Arrow

Interaction Design

The small details really do count, micro interactions and UI animations that are subtle yet feel premium were a key in the redesign. During the process loading states, panel animations, icon state animation and modules entering/leaving the viewport where considered amongst many others. Please see below some examples of the animations and interaction designed and built.