• 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.

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.

• 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?

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.

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.

• A CHECKS (Critical)

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

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).

• B CHECKS (Less Critical)
• B - Issues that may cause problems or increased frustration for certain users.

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.

• C CHECKS
• C - Minor issues that will cause problems or frustration for a small number of users.

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 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.