Checkout Flow
Landing Page Design • Wireframes • User Interface • Prototyping
Project Overview
The goal of this project was to redesign the checkout flow for our online energy marketplace. Once a user selects an energy plan based on their zip code, they are taken to this checkout process where they fill out their personal information. This checkout flow was implemented across four energy marketplaces including ChooseEnergy.com, the second-largest online energy marketplace in the U.S. behind SaveOnEnergy.com, which was acquired by Red Ventures in 2012.
My Contributions
I worked alongside another Senior Product designer, Sarobar Kasaju, to develop wireframes, final UI designs, as well as prototypes built in Principle to aid in developer handoff.
Competitor Research
I started this project doing a competitive analysis of 5 different websites to see the good, bad, and ugly about buying an energy plan online. I wanted to see the layout of elements and what was successful. I discovered that the main energy plans were relatively the same across the board. The differences of the designs mainly consisted of the information on the left or right and the location of pagination if there was any.
Mapping the User’s Journey
When designing the user journey, it was important to highlight the steps that come before the checkout flow. Realizing how much choice the user is confronted with, we decided to display their plan at all times during checkout on desktop. Since we couldn’t reduce the amount of questions being asked, we had to decide how many “steps” or pages to include, along with how we’re dividing up the questions.
Wirefrmaing
When designing the wireframes, I wanted to make sure it was clear what step a user was on in the checkout process. A goal of mine was to reduce the amount of steps from the original checkout process. We did this by having certain inputs fade in after completion as to not overwhelm users on any particular step.
The Social Security Number input resulted in the highest bounce rate so it was imperative we designed the input differently and added context on why we’re asking this question.
Final UI Designs
After the wireframes were complete and we got stakeholder approval, I moved on to designing the UI. It was important that the final design be easily implemented across 4 different brands. I tried to keep the interface simple so it could be scaled in the future if need be.
