AND Digital Website Refresh: How We Did It
13 November 2017 |
About a 10 minute read
If you are a frequent reader of our blog articles or simply one of our site users, you would have noticed that we recently updated our website. As a reminder here is how it looked like before:
As hopefully you would agree, it was a good looking site which served us well but we knew it could be greatly improved especially when it came to user experience (UX). For reference, this is how the leading body in UX, Nielsen Norman Group, defines the term: “User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”
In this article I will walk you through what happened behind the scenes and explain the steps, frameworks and tools we used in order to arrive at something which we are really proud of. This is something that you can also apply to your own websites when it comes to refreshing your site.
Stage 0: Ground rules
Before you get your hands dirty it’s a good idea to plan and set some rules, right?
So that we know what success is our Marketing Lead and Product Owner (Claire Baxter) defined the following:
a user goal:
“To create a genuinely compelling experience. To find a remarkable digital service provider or a dream digital job or stay up-to-date with the latest in the digital world.”
a business goal
“A remarkable website with an amplified look and clarified voice. Attract both target clients and recruits and convert them in to applying to our services or company. To build raving fans of AND Digital and at the same time expand our network and credibility in the digital space.”
And a set of key performance indicators (KPIs).
Finally, our UX Lead (Igino Fucci) drew up a UX plan which outlined the steps the team were to follow to identify usability issues on the website to enable us to provide tactical improvements within the time, budgetary, technology and resource constraints.
Stage 1: User research
The main objective of this research was to identify the website users and their typical behaviours in the decision-making process. It aimed to find answers to questions such as: who are our users? What are their motivations to visit the site? What are they trying to get out of it?
The easiest way to get yourself into the mindset of your users is usually to create personas. UX Booth defines personas as “a representation of a user, typically based off user research and incorporating user goals, needs, and interests.” Using Google Analytics and taking into account the user goals, we derived four personas. Then we mapped their journeys together with their goals and use cases on top the site map helped us assume the pages that are visited the most and have biggest importance.
From the user research we drew up a few areas to focus on which we used as the building foundation for the next stages.
Stage 2: UX audit
The purpose of this audit was to determine the usability pitfalls and identify areas for improvement as well as look through the content and interface and compare it to key competitors.
We started off with content inventory which was a list of all the site content to gain insight in terms of location, context and value. We identified the number of people editing content, its structure and how often it is updated.
The interface inventory check helped us make a list of all the elements in the website interface to help gain insight on the consistency, accountability and help set up a style guide or pattern library. We mapped global elements, navigations, imagery, forms, calls to action, typography, interactive components and colours.
Next, we looked back at Google Analytics to understand the user flow drop offs, where our users start and how they interact with the pages. This was followed by a competitor analysis where we completed an expert review of the websites of our top three main competitors with their respective strengths and weaknesses. This enabled us to determine how our website is stacking up to the industry standard.
Stage 3: Usability evaluation
By this stage we had enough data in order to make assumptions of what are the user pain points and where there is room for improvement.
The main objectives of the usability test was to assess and evaluate the usability (content, flow, architecture, CTAs) of the AND Digital website. The measurable outcomes assisted us in aligning business goals to customers needs and were used to define the roadmap of features and functions to improve the user experience of key journeys. The usability principles we used were based on the standards created by the International Organisation for Standardisation (ISO 9241), which cover the Ergonomics of Human System Interaction. The metrics used to summarise the findings of the test are based on the Single Usability Metric (SUM) theoretical foundations (CHI 2005).
We decided to opt for an unmoderated remote test due to time and budget constraints. Based on our personas we recruited 10 participants who were asked to complete eight tasks across the four personas using the think-aloud protocol, probing questions to understand expectations, motivations, pain points and attitudes. The test was conducted using an online tool – TryMyUI where each individual session lasted between 30 and 45 minutes and commenced with an impression test where participants were given 15 seconds to look at the site and give initial thoughts. At the end of the test, the participants were asked a set of questions regarding their overall opinion of the site and to agree or disagree with a series of statements.
All of the results were analysed and translated into a few key recommendations which focused on specific areas for improvement.
Stage 4: Wireframing and prototyping
Easy to use – Make it simple and easy to use, clean and straightforward in its design to promote frequent use.
Informative – Provide useful and relevant information and zone content efficiently to promote scanning.
Clear – Provide clarity to help users understand, experience and perform with confidence and avoid uncertainty.
Consistent – Enable familiarity in ways that users would expect the behaviours and enhance intuition by applying the same solution to the same problem.
Transparent – Be clear, honest and upfront about what users would expect from the experience and why.
Human – Focus on the user tasks and context giving them what they need to accomplish their ends in ways that would feel like there was a real person at the other end.
and Information principles:
Anticipatory – Bring to the user all the information tools needed for each step of the process.
Clarity – Information should be conveyed quickly and accurately.
Discriminability – Make it possible to distinguish information accurately.
Conciseness – Provide only information necessary to complete the task.
Consistency – Present the same information consistently.
Detectability – Direct the user’s attention to the information required.
Legibility – Information should be easy to read.
Comprehensibility – The meaning should be easily understandable.
as well as emotion design metrics:
Enjoyable – How does it make the user feel?
Usable – Can the user use it?
Reliable – Can the user trust it?
Functional – Is it useful to the user?
Our Design Sprint lasted two days and involved people from different departments: Our UX and Marketing Leads, UX Analyst and Subject Matter Experts (SME).
We printed out the above assets and added the personas descriptions, user journeys, site map, user flow drop offs, KPIs, business and user goals, pain points and usability test findings. We stuck them on the walls so that they are always visible and use them for inspiration and guidance.
First, we decided on a set of seven main pages to be ordered by frequency of update and user conversion stage (acquisition, activation and retention). For each page we then brainstormed what content can be included and what pages and information from the current website can be reused, repositioned or scrapped. Second, each main page was broken down into a set of subpages which was aimed to break down the quantity of information. Each piece of information was then prioritised by importance and quality. Finally, a site map was generated which gave us a holistic overview of the site.
The wireframing started by us agreeing on four page templates based on the Atomic Design methodology: home, landing, multi-record and single-record pages, in order to keep the site consistent and increase learnability. Subsequently, everyone on the team sketched low-fidelity wireframes of some of the key pages which were discussed in great detail and were then translated into high fidelity prototypes using Axure RP. Each decision was checked against our personas, their use cases and design principles.
Stage 5: UI design
The deliverable for the UI design was to produce responsive user interface mockups for desktop and mobile using the wireframes as a blueprint and the new AND Digital brand guidelines for the look and feel. The mockups were led by Google’s Material Design framework and followed a component based approach. They were created in Sketch and then exported to Zeplin to ease the collaboration between designers and developers.
However, the work didn’t stop there! Before the pages went into development, front end guidelines were established by our UX Lead so that we ensured the developers who were going to pick up the stories will already have a set of standards to work against. Everything was documented in Google Drive for future reference so that the process is clear and there is an understanding and appreciation of the decision that have been made.
Thanks for reading and we hope you like the new website! If you want us to help you with building your website, please get in touch.
Senior Magento Developer
Technologists, experts in their domain, inspirational mentors and coaches.
Technologies you will be using
Leader in Product Delivery AND passionate about developing others.I'm Interested