Case Study

The DJ Shop

UX • UI • UCD

An overview

When the DJ Shop approached us, their Magento 1 site had rapidly aged, the UX/UI suffered and it no longer reflected their status as one of the UK’s leading suppliers in DJ equipment and accessories. Read on to see how we propelled them to the forefront of their industry, online, with an innovative mobile first Magento 2 site.


👨🏻‍💻 Role: UX/UI Lead
💻 Platform: Magento 2 eComm
👥 Team: 2 Devs, 1 Designer
👁 Vision: Mobile 1st eComm
Delivery: 3 Months
💼 Agency: Advantec

thedjshop.co.uk

djs-mob-grid.png
djs-ucd.png

Defining the problem

When we sat down with the DJ Shop team, it was clear that they had passion for their industry. As former DJs themselves they had a great deal of understanding of the requirements and challenges that their customers faced. After running through a short user centred design process with a cross section of their team, it became clear that the main problems that their users faced was that the site had very poor and dated UX/UI. It was not mobile friendly, which meant they were missing out on conversions due to a time poor target market, primarily using mobile, and the product range was lost due to poor information hierarchy.

djs-3-mob.png
djs-cat-filter-mob.png

The challenges

As this industry was fast paced and highly competitive, we needed to make sure that we were aware of the market. A comprehensive competitor analysis was carried out to determine what rivals were doing well and where they were weak. From this tear down, we were able to formulate a set of strong ‘How might we’ (HMW) statements. These were democratically selected as follows: 1. How might we improve the mobile experience for busy DJs on the move? 2. How might we lift the brand to bring it back up to date online? 3. How might we better convey our tech heavy product range to our users? Once we had defined these areas, we were ready to innovate around them.

djs-hover-icons-1120px.png
djs-mobile-icons-1120px.png
intro-djshop.png

The concept

Focusing on our 3 key HMW statements and the user, I started the design process by defining a watertight design system to align the components of the site and build a shared vision for the interface. A duotone effect for imagery was introduced, along with a sleek gradient that pulled in to emphasise containers; an evolution of the original branding. Custom icons were designed to visually communicate categories alongside labels at both mobile and desktop, This addressed the problem of visually communicating categories.

The mobile experience has been vastly improved, with early prototype tests justifying the design of an innovative, icon led, ‘fixed to bottom’ navigation, proven to be more intuitive to use. The new design gives the content the luxury of space, from containers to simplified product cards, lifting its perceived value.

Homepage concept

 
djs-home-desktop-full-1440px.png
djs-dt-home-ds.png

The results

The prototyped design work was well received across the company and most importantly by their users. Currently going through build, The DJ Shop are confident that their new Magento 2 site will be a market leader once again.

What the client said

 
 
clients-DJShop-grey.png
 

Dan Apps

eCommerce Manager at the DJ Shop

“Being a leader offline, in the world of DJ equipment, we were very aware that our online offering needed to be brought up to date to reflect our status in the industry, with a new Magento 2 eCommerce site.

Joe made sure that he spent the time needed to understand our industry, our needs and those of our customer base. He quickly defined the problems that needed to be addressed in design with his user-centred design process and communicated well at each step of the process, bringing it to life through prototypes that we could test out and get an understanding of what it would be like to interact with before it was coded. 

We put our trust in Joe and his design process and are pleased that we did as it resulted in a stunning industry-leading site which went over and above our expectation on design, Catapulting us ahead of our competition once more.”

Next project Visit Winchester

Got a design problem?
Let’s talk.