Header-gradient5

MAPLIN

Responsive user interface design

aq_block_2

Maplin website redesign

Maplin is a leading UK electronics store operating in the UK and Ireland. With over 200 stores Maplin offers a wide range of electrical products and tech services.

The challenge

Maplin wanted their online customer experience to keep inline with their new brand look and feel. In addition they wanted to improve the overall user experience on the site whilst making it easier for new and existing customers to find and purchase products and services.

Overall project goals:

• improve navigation experience
• Create a seamless in-store experience
• Bring new brand identity to life online
• Increase online product/service sales
• Improve overall customer experience

  • hero-context-mockup

My role

My role was to focus on the UI/UX design, working alongside the lead UX designer to translate wireframes, and user flows into a visually pleasing interface design across desktop tablet and mobile.  In addition I assisted with updating wireframes and assisted in usability testing.

I started my design process by analysing some of the relevant project material gathered during the early stages of the project. Such as the core user, their needs and issues with the existing website.

I also analysed some of the relevant UX material that had been created prior to me joining the team. Such as

• Personas
• Wireframes
• User flows

This provided me with greater understanding of the project goals and user needs.

Research

During the research process I discovered a few critical issues with the existing site. Some of these include:

• Homepage gets seem by 1 in 4 visitors on the website
• 51% of click throughs on the homepage were to promotions.
• 50% bounce rate on the product list page
• Only 3% users on product detail page proceeded to basket

aq_block_15

The Redesign

I started the redesign visual process by defining the granular elements of the UI. Such as -

• Colours
• Buttons 
• Typography 
• Iconography
• Form elements

I followed the atomic design principle to help guide me through this process as these elements would later form the components of the UI.

Colours
aq_block_22
Typography
aq_block_26
Buttons
aq_block_30
Form elements
aq_block_34
12 column Bootstrap grid system
aq_block_38
Header & Footer

Bold and confident header and footer is clear and easy to user whilst matching the in store uniforms to drive trust and expertise.

aq_block_42
Homepage
aq_block_46
  • hero-device-mobile
Category page
aq_block_52
Product list page
aq_block_56
Product detail page
aq_block_60