THE PROJECT

 

Extra Energy Supply is an independent retail energy supplier. The company was launched in 2014 and has boosted up and become the fastest growing energy supplier in the UK. Due to the high demanding of customer phone line, Extra Energy wanted to improve their customer support page on the site to free up support resources and reduce telephone hold times.

 

 


 

DESIGN PROCESS

 

 

 


FIELD RESEARCH

 

I started to take a look at some competitors or similar platforms that do great customer support. Customer support resource is such an important key for supplier company, I’ve analysed UI, UX and the highlighted features from other platforms and come out some main concepts first.

 


PERSONAS  +  SCENARIOS

 

I identified few personas which have different needs and goals. It will be useful to improve the user experience for each one of them.

 

 


 

USER REVIEWS

 

Took a look at their facebook page, I’ve found out there are a lot of complaints in the comments and reviews. This is where I’ve learned and understood the issues and built up empathy from these frustrated users.  The most frequent issues can be categorised into below categories:

 

 


 

GUERRILLA USABILITY TESTING

 

 

I’ve done a guerrilla usability test on their current site to see what might occur to general users.
I’ve found out that the current design is very difficult to find out what they need and almost all of the users got confused by the navigations. This is the main reasons that the website FAQ doesn’t service the users what they need, so they prefer to make a call to customer support line. I’ve wrote down the analysis and organised the issues that occurs to users at the moment.

THE FEEDBACKS FROM THE USERS:

 

  • The long page design makes it very easy to get lost.
  • There is no get-back-to-top button which is very frustrated.
  • The text are too much, and it’s very difficult to read.
  • The design is not attractive due to heavy copy.
  • The phone number is on the top and the navigation is confused, I would just call the line.
  • Questions categories are not clear, I’m not sure which I should go for.
  • Navigation is confusing, it’s very hard to find the right page.
  • The navigation is confused, I wish I can just search what I need.
  • Misleading colour scheme on this site, keep clicking the wrong place.
  • Most of answers lead you to call them in the end, but the phone line seems taking long waiting time.

 

 


 

THE SOLUTIONS

 

  • Add in a search bar on the top so the users can type in what they want to find. Also provide the keywords indications for easier research experience.
  • Reduce the copy, and use iconography to navigate, we can break down the heavy contents into a few categories to allow the users to define their questions in the first place.
  • Based on the data, we can highlight the popular question section to make their researches easier and quicker
  • Provide the related questions on the same page at the bottom. If the user cannot find the current solutions useful, they can also find out related options on the same page, so they don’t need to go back to previous page.
  • To keep improving the user experience, it’s important to get the feedback from the customers. Add a simple feedback question at the bottom of the page so we can know does this answer work well for them.
  • To encourage the customers to search our site before they make a call. We add another search bar at the bottom of the footer again, just before they reach out to the customer support line number in the footer.

 

 


 

WIREFRAMES

 

 


 

THE DESIGN

 

After sharing the prototypes, I then moved this project to next stage: UI design. I’ve designed the support page, so the search box was the first thing the customer saw. I also created divided subtopics that allowed the customer to find specific areas of issues in case they do not know what which area to look in. Each question page will also provide users relative questions.

For getting more feedback from the users, I added in a face emoji section so customers can quickly feedback if they are happy or not. It allows the client to measure and improve their service to the customers.

If users can’t find the answer for their need, the number is provided in the bottom of the page, but it also provide the other search bar to engage customers search again before they phone the customer resources.

 

 

 

Homepage Re-design

 

 

Help Page

Bitnami