Case Study.

Equate Book-Keeping Services.

The Company.

Equate provides book-keeping and financial management services. It allows clients to "hand over" financial administration tasks, simplifying the financial side of running a business by taking care of "boring spreadsheets".

The company competes against existing software that already makes financial administration relatively fast and efficient. Therefore, their client base and target market primarily consists of those who are uncomfortable with such software, or possess an aversion to technology, financial details or administrative tasks. However, their existing website failed to address the needs of these users, producing a very low conversion rate and a number of complaints from new clients.

The Challenge.

My task was to investigate the website's low conversion rate and build an entirely new website that made the company "feel" more approachable whilst maintaining a professional and efficient impression; and to improve the clarity and consistency of the company's branding. My involvement was, therefore, wide-ranging, and included UX research and design, visual design, copywriting and hand-coding.

The Tools.

Pen and paper sketches, a voice recorder, Adobe Illustrator, Adobe Photoshop, Sketch 3.0, Balsamiq, Brackets code editor.

Personas developed from user research

Research

The majority of Equate's target market are self-employed freelancers or small business owners, typically within the 35-50 age bracket. Therefore, I selected the majority of user-test participants from this demographic. Several were existing clients who had complained about the website, while others had not heard of the company but were part of the target market.

Interviews and open discussions with users about their needs and requirements highlighted several key themes. Working long hours and worrying about management decisions, they did not want to have to think about everyday financial management tasks in addition to the many other stressors in their working lives. A majority were quick to feel overwhelm in the face of "boring" administrative tasks, and several exhibited some anxiety about financial management, driven by low confidence in their mathematical abilities.

"I just want to forget about spreadsheets and do what I'm good at"

Discoveries

When users were observed attempting to perform specific tasks, such as finding information or booking a particular service, several clear problems with the existing website system emerged. The site suffered in particular from opaque navigation, with users often getting lost when trying to complete tasks; and a lack of clear explanation, leaving many users struggling to understand what the company did or did not offer, and what the process would require of them.

The process of hiring also involved a number of steps inside and outside the website. Several users abandoned the tasks, confused by what they viewed as a convoluted system, and alienated by the jargon used in the explanations of services.

User Journey: 'Daniel' persona uses existing website

"I don't understand how this would actually work"

Solutions

Therefore, in order to reduce users' confusion and overwhelm, the company's services needed to be clarified, and the process explained, in much more simple and accessible language. A friendlier, more reassuring impression needed to be created, as well as a sense of confidence in the company's ability to help. Additionally, the navigation and hiring process needed significant simplification.

Storyboard: 'Daniel' persona's 'ideal' scenario

An Ideal Interaction

With storyboarding and user flows, I produced a vision of an ideal interaction with an ideal website. While deviations and compromises from this ideal vision would, of course, be necessary (sadly, we don't, to my knowledge, live in a utopia), I made several key recommendations based on this outline:

  • Reduce or remove several sections of the site, such as explanations of the difference between accounting and book-keeping
  • Significant reduction and re-writing of copy to clarify and simplify
  • Consistent, clean and simple branding to remove clutter and "white noise" from the website and increase impression of professionalism
  • Photos of staff members to reduce alienation and increase reassurance and approachability
  • Staff profiles detailing experience, to increase confidence in abilities
  • A simple navigation system structured around user requirements rather than financial information
  • An intuitive hiring system with easy contact options
  • Improved responsive performance

Site maps

Information Architecture

The size of the website was significantly reduced, to eliminate information and explanations that had low click-rates and were unnecessary or overwhelming to users. The existing navigation structure, which required pre-existing knowledge of services, was completely overhauled to address frequent user queries that emerged during testing, such as "what does the company do?" ('What We Do'), "who will I actually be working with?" ('Our Team'), and "how much will it cost?" ('Request Quote').

Additionally, a simpler hiring system was designed which included phone, email, and online form options, with automatic confirmation.

Single-page wireframes

Designing A "Feel"

Despite the apparent corporate nature of the services that the company provides, the "feel" of the site was very important. Users frequently exhibited negative emotional reactions to financial administration, from boredom and overwhelm to anxiety and lack of confidence, and generally abandoned tasks for emotional rather than practical reasons. Therefore, I paid a lot of attention to details that could effect the "feel" of the interaction and visual design.

As well as putting friendly faces to a previous faceless company and simplifying copy, I used microinteractions, such as subtly animated icons and frequent confirmations of actions, to increase the reassurance that the site could provide.

Final prototypes

Prototype

After additional user testing, I further reduced the copy in the final prototype (the third incarnation), since testing showed that introductions to the 'What We Do' and 'Our Team' sections were either not read or were deemed distracting. 'Hire Us' and 'Request A Quote' buttons were amalgamated, as users experienced confusion in differentiating these functions, and contact options were reduced, eliminating a webchat option that appeared to cause trepidation in some users and was avoided by all participants.

Visually, I used warm hues and textures to soften the previous site's impression of clinical corporate polish, and to calm negative feelings of alienation. A sense of professionalism and efficiency is maintained by a cleaner, more minimal logo, and simplified icons that are more consistent with the company's branding.

I hand-coded the prototype in clean, semantic HTML5, CSS3 and JQuery, commented to enable easy later development. It is constructed as a fluid single-page layout that uses ems and percentages rather than pixels, responding seamlessly to the width and height of the user's screen, making it fully functional on all devices with no loss of content.

"It feels like a team of friendly assistants saying Hello"

Results & Reflections

Several issues were divisive in testing, such as the balance between comprehensive information about services and simplicity and clarity, as some users requested further simplification while others would have preferred more detail. The majority of users, however, were satisfied with the compromise that was reached. The site receive a very positive overall response in testing, and subsequently improved the visitor conversion rate, as well as existing clients' opinions about the company.

This project was, for me, a valuable opportunity to be involved in a longer process of development across multiple stages of design. It generated several unexpected design challenges, such as the importance of the emotional "feel" of the site, and the research that I undertook in responding to these challenges continues to inform my subsequent work.