BoilerJuice Case Study

  • BACKGROUND

I joined BoilerJuice as a UX designer in 2018. BoilerJuice is an independent heating oil supplier located in St. Ives, Cambridgeshire that introduced a new service to clients, the Connected service.

  • TEAM STRUCTURE

Worked as part of a medium-sized team of product managers, marketing creatives and web developers. I was mainly reporting to the product managers, and occasionally to the managing director.

  • MY RESPONSIBILITIES

Introducing a new service and user journeys, making buying heating oil easier by connecting a home as if it was on a mains supply. Redesign old pages and creating new ones for the Connected service on the company’s public website, www.boilerjuice.com and an app.

BoilerJuice website, heating oil reading device and app
BoilerJuice website, heating oil reading device and app

Business Research

Organised different meetings and workshops with stakeholders, customer service, product managers, developers initially to gather what was working and what was not and, try to understand the new service, the Connected Service.

During this process used sketches and the Lean Canvas to quickly define the current problems, business goals, value propositions and metrics to try to achieve a market-fit product.

Lean Canvas is a one-page template worksheet created by Ash Maurya that helps the deconstruction of concepts, ideas, problems into key assumptions. It's a good start for researching a system or process. Lean Canvas was reshaped from the Business Model Canvas created by Alex Osterwalder and optimized for Lean Startups.

Lean Canvas example
Lean Canvas
  • Main points considered:
  • Defining main problems, win points and challenges, especially the current main blockers and customer pain points on the journey and how returning users behaved generally.
  • Tried to access how the new Connected Service would measure against the competition. Would it bring advantages by meeting the underserved needs of users on the current market?
Task analysis post-its example
Task analysis using post-its
Lean Canvas example
Lean Canvas

Task Analysis

Meeting managers and product managers, we mapped user goals with diagrams where we broke each goal into subtasks (around 4–8 subtasks).

We also accessed the cognitive load and user mental models from previous users and potential users.

User journeys with goals in mind example
User journeys with goals in mind
Task analysis diagram example
Task analysis diagram

Design Review

Review of current website and "Buy Now" journey. Evaluated what worked and needed changing to improve accessibility and user journey, with assumptions from my professional point of view.

BoilerJuice old website example
BoilerJuice old website

WHAT WORKS:

  • Hypothesis 1
  • Website is relatively quick in providing quotes for customers.
  • Hypothesis 2
  • Current quote form requests a quote in 5 simple steps.
  • Hypothesis 3
  • The main proposition is descriptive of the service being provided.
  • Hypothesis 4
  • The proposition value is supported by 4 extra key points at the bottom.
  • Hypothesis 5
  • The overall webpage provides a connection with users by displaying emotion.

WHAT COULD BE IMPROVED:

  • Hypothesis 6
  • The quote form doesn't include the new Connected service.
  • Hypothesis 7
  • Pages are confusing and cannot track heating oil levels.
  • Hypothesis 8
  • Accessibility is poor. Some text is not legible and the contrast ratio is not optimal.
  • Hypothesis 9
  • The main proposition becomes invisible on top of the current background image.
  • Hypothesis 10
  • The current form doesn't work well on mobile. The form is too long and clunky.

Accessibility Checks - Type A

Based on the accessibility checklist created by 18F (digital services agency within the United States Government) and recommended by Gov.uk for information and communications technology (ICT) to be compliant and according to the new 2018 2018 WCAG 2.1 accessibility regulations. They include A, B, C checks.

  • A CHECKS (Critical)

A - Critical issues that will cause serious problems and/or stop most users of assistive technology from using the site.

Accessibility Type A example image
Accessibility Type A example
  1. Site is keyboard accessible.
  2. Site is free of keyboard traps (the keyboard focus is never trapped in a loop).
  3. All form inputs have explicit labels.
  4. All relevant images use an img tag.
  5. All images have alt attributes.
  6. Multimedia is tagged (all multimedia has appropriate captioning and audio description).
  7. Text has sufficient color contrast (All text has a contrast ratio of 4.5:1 with the background).

Accessibility Checks - Type B

Accessibility checks grade B include problems that may cause frustration to certain users such as lack of fieldset (groups a set of elements) and legend (first child of a fieldset tag and provides context for those fields) tags.

  • B CHECKS (Less Critical)
  • B - Issues that may cause problems or increased frustration for certain users.
Accessibility Type B example image
Accessibility Type B example
  1. Site never loses focus.
  2. Tab order is logical.
  3. Form instructions are associated with inputs.
  4. Site doesn’t timeout unexpectedly.
  5. Tables are coded properly.
  6. Headings are nested properly.

Accessibility Checks - Type C

Issues that will cause problems or frustration for a small number of users and include language not being set, plugins not being linked and flashing elements that are not compliant.

  • C CHECKS
  • C - Minor issues that will cause problems or frustration for a small number of users.
Accessibility Type C example image
Accessibility Type C example
  1. Frames are named (identify all iframes on a page).
  2. Flashing elements are compliant (elements that flash on the screen do so at a rate of less than 3 Hz).
  3. Language is set (for instance, the lang attribute is not set with the correct language).
  4. CSS is not required to use the page (most assistive technology ignores CSS).
  5. Links are unique and contextual (links allow quick navigation on a site when someone is using AT. Often, screen reader users won’t read through an entire page to find what they are looking for. They simply move from link to link).
  6. Page titles are descriptive.
  7. Required plugins are linked on the page.

User Research

Understand the average user’s profile based on the current and prospective customer. Prove my & business’ hypotheses.

  • AVERAGE USER PROFILE
  • Retired and professionals
  • 0–65 years old | male
  • UK-based
  • Owning remote buildings
  • Doesn't want heating oil to run out

USER INTERVIEWS

I've arranged several meetings with the BoilerJuice Customer Service team and managers that had a close relationship with the users. I was trying to understand what influenced their decision of users to get a quote and order heating oil from the BoilerJuice website. 7 out of 10 people interviewed said it’s to do with the fact BoilerJuice compares heating oil suppliers and offers their lowest price, the remaining 3 said it was friendly customer service.

QUANTITATIVE STUDY

I wanted to quantify the feedback on the current website’s design. At the end of the interviews, I asked the attendees to assess the existing design of the website by completing a questionnaire that uses the System Usability Scale (SUS).

SUS SCORE

I’ve calculated the score using SUS calculator in Excel using relevant formulas.

System Usability Score Calculator example
System Usability Score Calculator
System Usability Questionnaire example
System Usability Questionnaire

User Research Analytics

user research continued

User Flow

user flow

User Journey

user journey

Information Architecture

information architecture

Wireframes and Prototypes

wireframes and prototypes

Accessibility and Inclusive Design

accessibility and inclusive design

Usability Testing

usability testing

A/B Testing

a/b testing

Business Sign-Off

business sign-off

Design Handover & QA

design handover and quality assurance

New Analytics

new analytics