Phase 2: Design & UX

Our design process is a journey. A journey we like our clients to be involved in as much as possible. As a result, the visual language that comes out of the process is very much a combined effort. We have found this to be a highly efficient and effective way of working.

Our Tools

We use a number of industry standard tools as part of our design process:

• Abstract - version control for designs and developer specs
• Sketch - digital design toolkit
• Photoshop - image editing/optimisation
• Dropbox - client feedback

Pre-Discovery Requirements

There are a number of things we require before we start the design process:

1. Client to fill in a design questionnaire
2. Client to provide a supporting written brief, outlining key design requirements, goals, expectations etc.
3. Client to provide their brand guidelines and associated assets (logo, fonts, image library etc.) - see our design requirements document for a full list.

Design Exploration

Once we have received a brief and completed design questionnaire we like to research current web design and UX trends, and then create an exploration document containing our findings (example). This document usually encourages a lot of interesting discussion and provides us with a useful steer on the client's likes and dislikes. 

Design Workshop with Client

We use this initial discovery meeting to present/discuss:

1. Design questionnaire
2. Brand guidelines
3. Design exploration document

Style Tile / Brand Mood Board

We take the things learned from the discovery process and create a style tile / brand mood board.

A style tile usually includes things such as logo, colours, fonts, icons, and various other frontend elements/components. Its purpose is to communicate the essence of a brand, to find a common visual language - they are not fully designed web pages (example).

Design System & Style Guide

Once a general style has been established we create a Design System. A Design System comprises of all the core visual components that make up your digital brand style - it's the source of truth for all ongoing design decisions. This usually includes (but is not limited to):

• Logos
• Colours
• Fonts
• Typography
• Icons
• Buttons
• Form inputs
• Menus/dropdowns
• Tabs
• Notifications
• Navigation/pagination
• Badges
• Carousels
• And so on...

The design system is presented as style guide (example).

Component and UI Design

Now we have the Design System we can start to look at specific components and UI elements, such as header, footer, menu systems, product grids, slideshows, light boxes etc (example). The Design System provides visual consistency across all elements from this point in.

Hi-Fidelity Designs

Once we have established the overall style and designed many of the core components and UI elements, we can start to pull everything together into hi-fidelity designs of 'critical path pages', e.g:

1. Home Page (example)
2. Category Page (example)
3. Product Page (example)
4. Cart
5. Checkout

If appropriate to the context, we create designs at the most common widescreen, desktop, tablet and mobile sizes. Currently these are:

• Widescreen: 1920 x 1080
• Desktop: 1368 x 768
• Tablet: 768 x 1024
• Mobile: 360 x 640

In-Browser Pattern Library

Once we have sign-off on all the designs we move 'in-browser' and create a pattern library that comprises of the global styles, utilities, objects, components etc. (example).

This is the point where the client actually gets to see things working, but it also serves as a reference for developers and content editors working on the site.

Frontend Development

The task of the frontend developer(s) is to fully implement the spirit of the designs throughout the site. Much of the core styling (fonts, colours, icons etc.) will have already been done as part of the in-browser Pattern Library, so this will mainly consist of layout and styling as per the hi-fidelity designs.