Company
Marco Schnorbus is product owner at co2online—a non-profit organization that focuses on climate change and helps people reduce their personal carbon footprint. His organization educates people about the actions they can take to reduce their energy consumption (and save money in the process).
Challenge
Marco and his team have created a free online calculator that gives you specific suggestions on how you can save energy at home based on your utility bill.
The problem? To get these specific suggestions, you’d need to fill out four forms with at least a dozen input fields while trying to find the data you didn’t even know existed in your utility bill and your lease.
Marco knew that the tips their calculator gave were very useful. If only more people would fill out the forms till the end to see those tips!
“We knew our tool was very useful, but our users seemed to struggle with it”
The HeizCheck is one of co2online’s most relevant calculators with a high potential for our climate protection goals. By calculating the costs of heating, the users get individual results on how to effectively reduce their heating emissions and save money in the process. But our users obviously had problems completing the steps, which led to a large number of canceled sessions.
Solution
Once I looked at the forms, it became clear to me that we should be able to get more people to complete the workflow if we made the forms look less complex, try to prevent as many errors as possible and show clear instructions for the errors that did happen.
Step #1: Add more forms
The first thing I suggested was… adding more forms and steps to the process. This may sound counter-intuitive till you see the monster input form that had the highest drop-off rate:
Before: A step with the highest drop-off rate
Will more but simple screens make it easier for users to get to the end of the workflow and increase conversion? Spoiler alert: Yes, they will.
Step #2: Identify & fix usability issues
Next, we needed to identify and fix usability issues that were making the forms look more complex than they were, making filling out the forms harder than it had to be.
Usability issues:
- The same highlight color (blue) for both inputs (radio buttons, yes/no switches) and call to action buttons
- Lots of radio buttons that were blowing up the size of the form and adding complexity to the form, because each radio button was perceived as a separate input field
- Yes/no switches that take longer to process and may be challenging to tackle on a mobile device
- A counter-intuitive alignment of radio buttons (two columns)
- Additional information (triggered by the click on the “i” icon) would move the content of the form—an unexpected behavior that startled the users and made them waste their time looking for the input fields of the form, which were now in a different spot
The fix:
- Blue color only for radio buttons
- Checkboxes instead of yes/no switches
- Drop-downs instead of radio buttons (whenever possible) to display fewer input fields and make the form look less complex, reduce clutter and make the forms easier to fill out on a mobile device
- Horizontal alignment for radio buttons (always)
- Right side of the calculator is dedicated to displaying additional info, keeping the form fields always in the same place
After: Two of the optimized screens
Step #3: Preventing errors
Another important reason why people don’t complete the forms is their frustration with errors—when the form keeps rejecting their inputs, even if there are clear instructions on how to fix them.
To prevent people from making mistakes in the first place, I suggested displaying the info that could prevent those mistakes right away, without hiding it behind the “i” icon.
I also optimized the copy and the layout of the additional information to make it clearer and easier to read.
Before vs after: Displaying additional information
Deliverables
To help Marco’s team implement my optimization suggestions as fast as possible, I sent the co2online team:
- Conversion-optimized mockups of every screen
- Updated copy for the additional information and the newsletter sign-up screen
- A video where I reviewed the old screens, pointed out the issues and walked the team through the new screens, explaining the rationale behind some important copy and design decisions
“Gill pinpointed our problems and offered actionable solutions”
Watching the video with Gill’s analysis felt like a relief. We had some similar ideas in the past, but we were not able to pinpoint them as precisely as she did. Seeing the mockups she created, it all seemed so obvious. Gill gave us loads of of new ideas as well, which we greatly appreciated. We almost immediately got to work.
The results
The co2online team did a great job implementing the optimized screens. We had to wait for the results till the new heating season started, but they didn’t disappoint.
The conversion rate from their online tool with the optimized forms almost doubled.
“Our conversion rate increased by 95%”
The results of the first evaluation, about a month after the implementation of the optimized screens, exceeded all our expectations. The conversion rate almost doubled and went from 20% to 39%. The increase in the completion rate in the most problematic steps of the calculator was especially amazing. Working with Gill was a very helpful experience for us and, hopefully, will be again in the future.
Want your website to convert better?
Let me review your web pages and suggest changes to design and copy that will get you more sign-ups, sales or inquiries.
