Contact form and information suite redesign

Product design project

A UX review and complete redesign of a contact form, help centre and FAQs.

Making it easier for our users to get the answers they need, while reducing the amount of customer queries our customer support team see daily.

Project type

As part of my role as a product designer at Confused.com.

My role

Primary designer, UX and UI.

Tools

Figma

Duration

Designs completed between July 2021-Sept 2021

The problem

Confused.com users need answers to their queries quickly so they can continue comparing or buying insurance.

User problem

The customer support team need a more effective contact process to reduce the number of customer queries coming through to them.

Business problem


The solution

Redesign the contact form, help centre and FAQ pages to help users self serve when they’re looking for answers.

Ensure answers to simple questions are easy to find and remove the need for users to get in touch and wait 2-3 days for a response.

Research

Research was comprised of 3 sections, user research, competitor research & feedback from our customer support team. The research led to some key findings:

User research showed users were frustrated by:

  • How difficult it was to find the correct way to contact us.

  • The time they needed to wait for a response to simple questions.

Competitor research revealed:

  • Many competitors would only display FAQs, with no way to directly contact customer support.

  • We had an opportunity to provide an improved experience.

Customer support feedback showed:

  • Users would get in contact with common questions daily.

  • We’d use a template response to respond to these questions which would take a lot of unnecessary time.

The current design: Usability issues

I then analysed our current contact form & FAQ pages, highlighting any usability issues that we would fix in our redesign: to each set of FAQs.

  1. The contact form was hidden at the bottom of a long page of FAQs.

  2. The heading (‘What’s your query about?’) was small and didn’t make it obvious that this was a contact form.

  3. The FAQ accordions are open on load, making the page longer.

  4. Users would see 2 email addresses before they get to the form. Neither email address was used for customer questions and could cause the user to contact an incorrect email address.

  5. The FAQs featured are not particularly helpful and didn’t line up with the most common questions our customer support team would answer.

  6. Our FAQ groups, featured on a different page, were not clearly grouped and there was no clear navigation to each set of FAQs.

I then started creating basic wireframes to solve the problems that came out of the research and usability assessment.

During this process we found that we could include helpful information within the contact form itself. This would help users get quick answers to common questions while reducing the amount of questions coming through to our customer support team.

Users would select the subject of their query and what they were having a problem with and we would show some information to help them with that topic. I used content design to improve hundreds of pieces of information, to make sure we’re providing the information our users need in the right way.

I then developed this idea into increasing levels of fidelity, while moving the design into our new design patterns.

It was important that we designed the contact form in such a way that the helpful information didn’t slow down users with complex queries. Users can still get in touch if the information didn’t answer their question.

Contact form redesign

Help centre redesign

I then focused on redesigning the help centre page to help users find FAQs, guides and helpful information.

Navigating between the groups of FAQs was a key issue, using a dropdown the choose the topic allowed us to display all of our FAQs on one page, rather than 10 separate pages.

I also rewrote all of our site FAQs and used content design to ensure there’s a consistent language throughout each piece of information.

Final designs

Laptop mock up that shows the confirmation screen, after a user has got in touch