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.
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
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
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
04
Brand guidelines
Navigating
the new brand
1. DEPLOYMENT OF THE NEW BRAND
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
06
Template designs
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.
The navigation on mobile
Mobile components
2. REUSABLE MODULES
I used components to build out the different sections of the website. It was important to keep everything simple, slick and user friendly.
The navigation on mobile
3. SOME DESKTOP DESIGNS
Desktop
Some of the design template drafts
The Desktop Process
Desktop designs could be easily tweaked and updated across multiple pages, following client feedback.