GreenMatch—Sustainable Quote Form Redesign

Role: Solo UX/UI Designer

Timeline: 1 Week (Jun 2024)

Tools: Figma, Illustrator & Photoshop

Project Overview

Since 2014, GreenMatch has helped UK homeowners find affordable eco-friendly solutions like solar panels and heat pumps. They provide up to four quotes from local installers, saving time and money and supporting sustainable choices.

In this project, I enhanced the GreenMatch Solar Quote Form using user-centred design methods. I conducted usability testing to identify pain points and incorporated visual improvements to enhance clarity. My goal was to simplify navigation and ensure the form seamlessly matched the website's aesthetics.

Problem Statement

Users face usability challenges with the GreenMatch Solar Quote Form, prompting a user-centered approach. Through user feedback, we pinpointed areas for improvement to enhance usability, accessibility, and visual appeal. Here are the key user experience pain points uncovered during user research:

1. Confusing Navigation:

Users are not sure how many steps there are or what the next step” button does, which adds to their confusion.

2. Information Overload:

The form has too much information on the page, which makes it hard for users to focus. They want more space and clearer text so they can understand it better.

3. Visual Engagement:

Users think the form would be easier to understand if it had pictures or graphics. Adding visuals would make it more interesting and attractive.

4. Unclear User Steps:

Lack of upfront guidance leaves users confused about form steps, causing frustration, as they only learn about each step after answering the first question.

Empathy Map

Based on the user testing and my research on the GreenMatch website, I created two empathy maps for the two users I had user testing with. Empathy maps helped me gain a deeper understanding of users’ needs, thoughts, emotions, and behaviors.

Quick quote info is useful.
0% VAT on solar panels is helpful.
Time is clear, but steps aren’t.
Form is simple but small.
Are there different solar panels and batteries?

SAYS

Clicking the next step advanced the page instantly.
She answered the first question without confusion

DOSE

Camille

Overwhelmed by too much information.
More visuals needed for clarity.
Increase white space to reduce distractions.

THINKS

Too much information causes confusion.
"Next Step" button is unclear.
Shows time needed, but no step count.

FEELS

Place form on the left; it’s the key element.
Form is clear and concise.
Too much text, no images.

SAYS

Confused navigating to next question.
Took time to find back button after first question.

DOSE

KIM

He might feel overwhelmed by too much text.
He might need more visuals to answer questions.
He might initially struggle to find the back button.

THINKS

I don't like the form placement.
Too much text and not enough images.

FEELS

Project Goal

Improve usability, accessibility, and visual appeal.
Simplify the layout to reduce information overload.
Clarify navigation.
Maintain visual and functional consistency
Provide upfront guidance for user steps.

Design Process

I applied the design thinking process to understanding user needs, ideating solutions, and iterating designs based on feedback. By following this method, I was able to empathise with users, identify pain points in the GreenMatch Solar Quote Form, and iteratively design improvements that address their needs effectively.

User Research
Empathy Mapping

User persona
User Journey Map
Competitive Analysis

Brainstorming

Wireframe
Mockup

Usability testing
Future Directions

User Persona

created two personas using empathy maps and research to illustrate diverse user needs for the GreenMatch Solar Quote Form. Crafting personas helped me understand users, prioritize features, and design for a better user experience.

Goals:

Obtain a quote for solar panels quickly and easily.
Understand the benefits of solar panels
Navigate through the form seamlessly and efficiently.

Pain Points:

Feel confused by too much information on the page.
Doesn’t know how many steps are needed to complete the quote.
Find the form too small and lacking pictures or visuals.
Confused by the ‘next step’ button when the page moves on its own.

Background:

Camille is a 30-year-old homeowner interested in switching to solar energy to reduce her carbon footprint and lower her energy bills. She has some knowledge about solar panels but seeks more information to make an informed decision.

Camille

Goals:

Want to get the quote for solar panels quickly,
Want to Find information quickly and easily navigate through the form.

Pain Points:

Get confused when navigating through the form
Feel overwhelmed by too many texts
Struggle to find important elements, such as the back

Background:

Kim is a 38-year-old who cares about the environment and tries to live sustainably. He is looking into installing solar panels at his home to help the environment even more.

KIM

User Journey Map

I used user journey mapping to create a holistic view of the entire user experience, focusing on the sequence of actions and touchpoints users encounter. It helps identify pain points, optimize touchpoints, and uncover opportunities for enhancing the overall user journey.

User steps

Awareness

Find the Solar

Quote Form

Answer the question by their needs

Go to the

Quickly find and understand

information.

Use clear text and proper hierarchy

Answer the question to find the best solar quote

Locate the button to navigate to the next page.

Behaviors

First, prioritize reading bold and larger text.

Find form easily due to clear labels and its visual appearance

Give answers that match their needs for finding the best solar quote.

Tried pressing Next Step but moved to the next question

Touchpoint

The user sees the page screen.

User accesses the form

The user fills out the website form for a solar quote.

The user clicks the orange button to move forward.

Pain Points

Too much info without enough space.

The form surroundings look

messy and cause

distraction.

Answering is harder due to the lack of visual elements.

Users get confused about the steps required to proceed to the next step.

User Feeling

Confused

Happy

Dislike

Disappointed

Opportunities

How might we simplify the presentation of information to help users quickly find and understand what they need?

How might we simplify the form layout and labels to make it easier for users to find and navigate?

How might we enhance the user experience by incorporating visual elements to simplify the answering process?

How might we simplify the navigation process to ensure users understand how to proceed to the next step?

Competitive Analysis

I conducted a competitive analysis of GreenMatch, Solar Panel Quoter, and The Eco Experts to understand the strengths and weaknesses of similar services in the market. This helped identify opportunities for improvement.

Company Name

Priming

sets user expectations by

outlining steps

Provide instant

feedback

Using Visual

elements

Demonstrated Value

Show value to users.

Register at the End

Insights

GreenMatch and The Eco Experts provide clear value and a user-friendly registration process.
The Solar Panel Quoter lacks priming and requires early registration, potentially discouraging users.
Incorporating priming and visual elements from The Eco Experts could enhance the GreenMatch quote form experience.