Aram Store

Creating a new online shopping experience for a high-end designer furniture retailer.

Visit project
E-commerce
B2C Website
UI/UX Design
Design System
Front-end Engineering

Project Overview

Aram was originally launched in 1964 as Aram Designs by Zeev Aram. From their showroom on King's Road in Chelsea, they introduced internationally sourced modern furniture and lighting to the UK for the first time. In 2000, they redeveloped a Victorian warehouse in Covent Garden to become Aram Store, a destination retail experience for designer furniture, lighting and home accessories.

Aram Store, London. Photo © Veerle Evens

My team were approached to undertake the migration of Aram's legacy Magento 1 site to Magento 2. A big part of the project was a complete design overhaul that would reflect the high quality and modern design of their products, and bring the site in-line with modern user experience expectations.

The Process

I led the redesign and UX of the project in collaboration with the client and my technical team. The main requirement was to produce a slick, modern and responsive site, recognising that increasingly users are browsing using their mobile devices. The design part of the project was split into a number of phases, using agile design practices and iteration.

1. Discovery

Discovery consisted of various fact-finding exercises, presentations and workshops. The purpose was to get to know the client, their customers, the business objectives, and to define the overall design goals. During this process I developed a good working relationship with the client, involving them at all stages of the project, which greatly helped things to run smoothly.

Below are some example screens from the design discovery presentation, exploring design and UX trends:

Design discovery presentation - web and UX trends

2. Establishing a Design Language

Based on the outcomes of the discovery phase and Aram's already strong visual identity, I established a new digital design language for them, creating a Style Tile/Mood Board, Style Guide, and a Design System/UI kit, from which I build an online Style Dictionary.

Style tile - establishing the design language
Online style guide and component library

3. High-Fidelity Designs

Using the Design System, I then created high-fidelity designs of the site and end-to-end user journey/UX, focusing on core components and pages such as:

  • Header (including navigation, search and minicart) and footer
  • Home page and key CMS/landing pages
  • Product listing page
  • Product detail page (including various product variants and states)
  • Cart and checkout flow
  • User account pages

Most designs were developed for a number of screen sizes, such as mobile, tablet portrait/landscape, desktop and widescreen. The client was involved at all times, providing iterative feedback, signing-off work and so on.

Some example high-fidelity designs are featured below:

Product listing page, mobile and desktop
Product detail page, mobile and desktop

4. Developer Hand-off

All designs were created in Sketch and delivered to the technical implementation team in Zeplin, along with any required design documentation and/or developer notes.

We took a staggered approach, with each member of the technical team concentrating on only one part of the UI/UX at a time. This allowed me to hand-off designs as-and-when they were finished, and feedback/iterate on design QA as needed.

Summary

Working on Aram was particularly enjoyable as it suited my design sensibilities perfectly. The client and I got on really well and, as a result, the project ran very smoothly. My extensive knowledge of Magento and ecommerce platforms in general, meant I was able to develop a flexible and modular, component based system, that not only respected the limitations of working with a monolithic framework such as Magento (and the client's timeframe and budget), but that also allowed a great deal of design flexibility.

The client was extremely happy with the result and, more importantly, has seen a marked increase in online revenue, conversion rate and average order value.