Iconic Store — Major Redesign
libertylondon.comTransforming 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 after a redesign and re-platform 4 years prior, 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 (a fully responsive site with app like design patterns on mobile). The overarching goal; to create a front-end that unifies e-commerce, service and storytelling to create a proposition that elevates Liberty London across all channels. The key pillars of the redesign were the customer (services, loyalty and account), great shopping experience (navigation and search, product content and presentation, refinements, personalisation, video, UGC, speed and reduced perceived complexity), international growth (locale product availability, currency conversions, locale specific content), storytelling and brand building (the site is the window to the brand, educate customers about the brands, designers and makers Liberty champions. A large part of the site is also serving authoritative content for our customers to inspire them and to help boost organic SEO).
Below are screenshots of core journey pages on mobile devices, starting with global navigation moving through the landing pages for shopping categories to listing pages, basket and checkout login. The last shots are of the content hub.
Liberty saw a year on year increase in conversion after the redesign and replatform
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.
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
Iconography
A selection of icons from the design system
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.