WARNING: THIS ONE IS VERY DESIGN-Y

Project
Design, branding
& web design…

(plus a bit of UX design too)

ABOUT THE PROJECT

From branding
to web design

Dns is a fast growing national accountancy firm, with more than 15 offices in England. With a new strategy in place, the board needed a new brand and user friendly website to reflect their vision, mission and values.

I set to work to re-think their overall brand, including messaging and visual identity. We agreed upon a light-touch UX approach to the new website, due to budget and time constraints.

WEBSITE

ROLE
Re-brand
Navigation
On-page navigation
Web designs

CLIENT

dns accountants

Behind
the scenes

A look at some of my thinking behind the project. From initial brand identity concepts through to the design of the website. A great all round project.

Sketching the first draft layouts

Ideation mock-ups

Sketching logo concepts

Desktop designs, using Adobe XD

Background

THE NEED

Dns has big ambitions and is an award winning company delivering a first-class personable and digital experience. Having already acquired a number of companies and developed accountancy software, they needed a new brand and website to reflect their vision today.

Let’s get started

The first part of the process was to analyse their existing brand and the competitive landscape.

Limited company page

Who we serve page

Resources index

Pricing page

The challenge

There is a vast amount of content buried deep on the existing website. The primary and secondary navigations are cluttered and in need of simplification. I needed to strip back to a user-friendly, simple navigation and on-page structure.

01

Research

I kicked-off the project by reseraching national accountancy and software companies. Looking at their unique value propositions, messaging, visual identity and digital experiences. Finishing up with a report on how dns could position themselves within this landscape.

1. COMPETITOR ANALYSIS

Brand identity
& messaging

Competitor analysis

The broader landscape

Design trend analysis

Summary

The objectives

During this particular user research round, I wanted to identify:

1. How competitors position themselves
2. How their brand is perceived
3. What trends can be applied to dns
4. Ignite conceptual thinking for the new dns brand

02

Concepts

The following 3 concepts were presented to the team.

2. CONCEPT ONE

Accounting “Anywear”

The “Anywear” concept

The thinking

The term, “accounting anywhere” is a great angle for dns, as they provide a face-to-face service through their branches and a 24/7 service via their software. This is already part of their everyday vocab.

The “Anywear” concept is a clever play on this, focusing on working with small businesses across all different types of sectors, no matter what the role. From medical consultants to freelance creatives, dns is always there to support “online and in-person.”

Bold photography represents the different types of jobs clients do, whilst communicating a more invigorating message from dns. This first draft, uses their original revised messaging which I later changed to “Accountancy at your fingertips. Online and in-person.”

3. CONCEPT TWO

Service focus

The “Service” concept

The thinking

This concept focussed more on service delivery, whilst still showing the types of clients they work with. This is represented using different “shapes” to show the individuality of clients and that clients come in all shapes and sizes.

With this concept, all of the accountancy services could be easily marketed separately, such as “VAT service” or as a package of services in general. This concept holds true to the “anywhere” angle, but sticks to the usual spelling to let the shapes shine.

4. CONCEPT THREE

Good accountancy

The “Good Accountancy” concept

The thinking

The “wild card” concept. This concept focussed on the re-assuring and balanced feeling that you get from using a good accountant that has your best interest at heart. Combined with the message that “good” accountancy “pays”, helping to save you money too.

With this concept, I explored mechanisms to communicate the balanced emotions, playing with animation concepts.

03

Logos, fonts, colours

Following a few briefing sessions with the team, I developed some sketched ideas for their new logo.

The team seemed open to new colour combinations but I also sensed a strong emotion towards the existing Indian blue colour palette. It was important to find a colour palette to complement this blue, whilst providing other options to test their response.

I looked for some strong and modern Google font pairings to support the sense of friendliness and professionalism.

1. LOGOS

Sketches & drafts

Ideation of logos

The thinking

My thinking can be split into 3 broad categories; the geometric nature of accountancy (mathematical shapes), helping businesses grow (leaves) and coming together (circles).

The more refined examples show how the logos could look in the context of a small area, such as the top left hand corner of a website.

2. FONTS

Font set pairing

Google font friends

The thinking

I was keen to explore the use of Google font pairings as they are widely available and accessible to all. I felt a more serif style font was appropriate for headers, offering a friendly yet bold, modern touch.

When used minimally and coupled with a plainer body font, this can result in a marriage made in heaven.

3. COLOURS

Colour palettes

A lick of paint

The thinking

I explored 4 colour palettes to test the response of my clients. Starting with an elegant take on their existing colours and working through to a completely different palette.

04

Brand guidelines

The brand guidelines provided a blueprint for all further design work, including the new website.

Navigating
the new brand

1. DEPLOYMENT OF THE NEW BRAND

The following images show snippets from the first draft of the brand guidelines.

Some pages from the brand guidelines

05

Structure &
navigation

I conducted some desktop research on competitor websites to analyse their positioning within the sector. Dissecting these pages helped my client understand the many opportunities.

Navigation
map

1. SIMPLIFYING THE NAVIGATION

Mapping out the new, simplified structure for the primary, secondary and footer nav.

Navigation mapping

2. SKETCHING THE TEMPLATE STRUCTURE

Sketches

Sketching some of the template structures pre-design

The Sketch Process

Sketching the page layouts enabled me to show my thinking to clients very quickly. It’s also great to do this before spending upfront time designing.

06

Template designs

Designing the agreed layout structures in Adobe XD, for mobile and desktop.

Mobile designs

1. MOBILE NAVIGATION
& INTERACTIONS

I explored how the “book a meeting” interaction would function on mobile, so that it’s easily accessible with a thumb. We went for a floating utility type interaction, with the chat icon opening up to actions. The mobile menu slides to show primary navigation and then secondary as required.