Hoppa till innehållet
celinefrostberg@gmail.com
Laptop on a dark shelf showing the new Sundsvall Energi website with Get your personal electricity price

Sundsvall Energi

UX research, UX & UI design

Year
2022
Role
UX/UI designer
Client
Sundsvall Energi
Workplace
Oh My / Consultant for three months

Sundsvall Energi is the largest supplier of electricity and district heating in the Sundsvall area. After Oh My developed their brand identity, they wanted to work on a new website to implement the new brand and improve the user experience and accessibility. The design was created to suit the Sitevision platform.

Go to live website ↗

Process

The project followed the double diamond: first widening the understanding of the problem for their target audiences, then narrowing it down, before exploring and refining the solution.

Discover

  • Internal workshops
  • Interviews with private customers, business customers and non-customers
  • Competitive analysis and trends

Define

  • Insights and focus areas
  • Prioritising what makes a customer sign up
  • First draft of the sitemap

Develop

  • Wireframes and user flows
  • Continuous testing with users
  • Iterations based on the feedback

Deliver

  • Design system, icons and process illustrations
  • Accessibility in focus
  • Handover and updates in collaboration with Sitevision partner

The starting point

The old Sundsvall Energi website with a stock photo hero and a long text about electricity contracts
The old website

You almost need to be a technician to understand that website of theirs.

The website is nothing out of the ordinary.

I think you get too little information on the website.

Internal needs & user research

Miro board from the internal workshop with sticky notes on the value proposition: taking over the environmental responsibility for customers’ waste, recycling 99 percent into heat and electricity
Internal needs analysis workshop in Miro

We need to be clearer about what we do. Talk more about the cycle! People in general don’t understand the whole picture.

From the internal needs analysis, translated from Swedish. It later led to the process illustrations that explain the district heating cycle step by step.

I spent the first month of the project gathering user needs and insights. The tools I used were internal workshops to understand the role of the website in different contexts, qualitative research on Sundsvall Energi’s private customers, corporate customers and non-customers, competitive analyses and trends.

From insight to decision

01 Insight Price matters most

02 Insight Customer service

Both people in the Sundsvall region and in the rest of Norrland say that low prices matter most when choosing an electricity supplier. Another important aspect is that the supplier works well with environment and sustainability.

I contacted them about an invoice question through the website. The answer I got was satisfying, but it took them several days to reply.

I had a question about district heating and they were going to get back to me, but they never did.

This is why we created “Get your personal price”, to convert new electricity customers, both private and smaller businesses. Larger companies more often need a tailored solution, and they were also the ones most interested in sustainability.

Insights like these made us rethink the customer service part of the site. We made it more trustworthy and simpler, so that it answers as many questions as possible directly, and guides customers to the right person when they do need to get in touch.

Focus areas

  1. 01 A clear path to a personal price Price is what matters most when choosing a supplier, so getting a personal price and signing a contract should take a few simple steps.
  2. 02 Customer service that answers directly Answer as many questions as possible on the site, and guide customers to the right person when they do need to get in touch.
  3. 03 Explain what we do, step by step Make the services and processes easy to understand, from the district heating cycle to what happens after an order.

Prioritising & structure

Workshop board with four prioritised needs for converting to an electricity contract: 1 contract packages and prices, 2 top three benefits, 3 customer ratings and testimonials for trust, 4 frequently asked questions via chat with customer service
Internal workshop prioritising what a user needs to sign an electricity contract
Sitemap with three navigation levels for private customers: electricity, district heating, charging services and solar panels
Sitemap first draft during workshop

Final site structure

Final sitemap: the start page branches into Private, Business and housing associations, Customer service, About us, My pages and other pages, with subpages and order flows in steps
Final sitemap, with the order flows shown as steps

Wireframes & testing

I created wireframes and we continuously tested on users to make iterations in the process. Once we had defined the user flow, it was time for the design phase.

Annotated wireframes of the three-step flow for getting a personal electricity price
Annotated wireframes of the flow for getting a personal electricity price
Wireframes of the customer service landing page with help categories, outage notices and searchable questions, and the contracts and moving page with tasks, terms and frequently asked questions
Wireframes of the customer service landing page and the contracts and moving page

Design system and UI design

I designed the website by creating a design system based on their brand and extending the identity to the digital environment by producing icons and process illustrations.

Process illustration of district heating: waste is collected, burned and heats the home
Icon set in red line style for electricity, district heating, solar and charging
Phone on a desk with the Sundsvall Energi mobile menu open
Laptop showing the first step of the personal electricity price flow

Accessibility & delivery

A project where we put the customer and accessibility in the main focus through an iterative process of testing. After delivery to the developers, I worked closely with the team for updates according to Sitevision guidelines.

Contrast matrix of the brand colours showing which combinations pass accessibility requirements

Results

+21% Increase in people ordering an electricity contract through the new order flow.
WCAG 2.1 AA Accessibility level reached for the new website.
#5 Ranked number five among Swedish municipally owned companies on Webperf during the first half of 2023.