Redesigning the Eglass Estimate Form
Summary: The incentive behind this project was that the main lead generating aspect of the Eglass Railing website ( Eglass Railing is an ecommerce website that sells DIY glass railing products) is people filling out the estimate form. I was asked to redesign the Eglass Website the main objective of my website redesign was to get people to click the button “Get a Free Estimate” where people are directed to a form that asks them questions about the railing system they want to get so the sales teams can give them a quote. I was curious about what the form was like and if one of the issues with the site having low conversions was the estimate form itself. The form is long, asks people to submit project measurements and feels like a commitment. I wondered why they were asking so much of people so I looked into it and redesigned the form to be more user friendly.
Overview
Roles and Responsibilities
I managed the full process of this project from defining the issue, research, competitive analysis, user flows, mock ups, usability tests and presenting the idea to stakeholders.
Audience
Business owners, marketing team and developers.
Problem
A long form may deter customers from sharing their information and choosing to follow through with buying the product.
Solution
Create a form that is interactive, displays the questions in a way that is more interactive and give the user less cognitive load so that they are more likely to fill out the form fully.
Discovery & Research
Why ask so many questions?
My initial approach was to get the estimate form down to the bare bones. Can someone get a quote by just giving their contact info and letting us know that they’re interested in glass railing?
To me it seemed like we were losing opportunities for the sales team to interact with customers and make the sale.
Asking questions is a filter
Having more questions on the form makes it so that the sales team isn’t wasting time talking to people who aren’t yet sure that this is the product they want to buy. By having a detailed estimate form we get insight into how serious a user is about purchasing the product.
Form completion shows high intent to buy
In the past the company had a shorter form and the sales people ended up spending days on the phone trying to get the info they needed and missed opportunities to interact with serious buyers.
Data
I looked into Google Analytics to see how many people who visit the site reached the estimate page. This chart showed that the majority of people who entered the homepage left immediately, this showed me that the primary concern was redesigning the homepage to get people more interested in the product. So at this point I switched gears and focused on that but I still went back to redesign the form in case it became relevant post site redesign.
I was curious about what the user behavior was on the existing estimate form and asked to install HotJar to look at a heat map, the company denied my request because previously it slowed the site down.
User Testing
For context this the image to the left is the existing estimate request form. I did usability tests on the old site and asked users to share their thoughts as they interacted with the site.
When the users got to the estimate form some quotes that stood out were,
“This feels like a lot”
“I don’t feel like I know what I’m selecting”
and
“I’m confused about the difference in top rails”
I thought about these pain points when I started doing my competitive analysis.
Competitive Analysis
Stair Supplies & Viewrail
Strengths:
CTA “Build your project”
Signifiers showing how far along you are
Images
Clear illustrations
Weaknesses:
Gives the user the impression they are going to be able to buy the product
Infers that the user has a basic general knowledge
Opportunities:
Make it clear that users are filling out a form
Threats:
High quality images
The color options look realistic
User Personas
User Flows
I sectioned out the estimate form to 3 parts so that it was less cognitive load for the user and it made space for more images.
Wireframes
Brand Development
I used the same colors and fonts used in the Eglass website to design the estimate form
Mockup 1
In my first mockup I used icons to differentiate the top rails and had round buttons that would press down when selected. I received feedback from the client that they felt it was too light and it would be better if there were actual images. They didn’t like how much baby blue was used so I changed the design to something that reflected what my client asked for.
Usability Tests
In my usability test for this version people expressed that the light colors made it hard to look at. With that in mind I added more contrast to the colors in my second mockup. When people interacted with the new form many were pleased by the ease of the flow and enjoyed interacting with the form. People shared that they felt like they were building something which made for a more positive user experience when filling out the form.
End Result
Conclusion
This project was an important component of understanding the final step in the conversion process. The majority of what the business relies on comes from this interaction and I feel that it is an important aspect to not be overlooked. When the site went into development we decided to leave the estimate form in the old format so that we could better conduct our A/B tests. It was important to be able to measure the specific changes that were impacting the business, given the data gathered from the bounce rate from the homepage investing in the website redesign was more valuable to stakeholders.
Although this project is still up in the air if it will be developed or not this project exposed pain points that we may have missed had we not taken the time to understand the final interaction that we use for conversion measurement.
Discovering that asking users to provide more data could act as a way of filtering out leads was a surprising thing for me to learn. Being a niche company with limited resources I expected the goal of the company to be get as many leads as possible. Using the form to generate high intent leads makes it so the business can ensure the team isn’t overloaded. This contributes to faster shipment, better service and less wait time for customers to receive their quote.
Learn about the Eglass redesign here …