Challenge
Ownership of the purchase flow in the back end was split across multiple teams resulting in a disjointed experience, causing friction for our customers. We would need to migrate the back end to a new payment system which would allow us to create a seamless experience.
My task was to come up with the strategy around how customers purchase the product, design a solution, test it, and work with our engineers to build it.
Solution
I conducted extensive user testing to truly understand the problems customers were facing. I also uncovered additional points of friction along the way. With this feedback, I redesigned the flow and continued testing iterations until ultimately landing on a final design geared towards usability and desirability.
The original Central purchase flow included a customizer on the homepage followed by a 4-step flow. The process includes account creation, billing, payment, and ends with an order confirmation where they can begin using the software.
I kicked off the process by designing a consolidated flow and building a clickable prototype in Invision to test against the original. I wrote the script to bring users through a series of tasks asking them to navigate through each prototype, compare their experience, and provide feedback along the way.
The order summary of the original flow proved to be a consistent friction point for users as they expressed frustrations around the lack of transparent pricing on the order summary, specifically annual vs. monthly billing.
I redesigned the order summary to be transparent and familiar, similar to a receipt to gain their trust. This tested well with users and it matched their expectations.
Along with the new order summary, I was finding success with the newly consolidated purchase flow where users consistently appreciated the simplified process. I was ready to move forward with the next round of testing.
I conducted additional research and along with feedback from early rounds of testing, hypothesized that the flow would be greatly improved with the addition of a pricing page. So, I redesigned the flow by replacing the customizer on the home page with a new pricing page and set off to do more tests.
I ran tests with an additional 20 users, iterating until the new design was a winner. The final design made it easier to select plans with one click while seeing the order summary, total price, ability to research other features and choose add-ons.
The new pricing page was a success, as you can see this user appreciated being able to change their selections and see the price updated automatically in the order summary, instead of going back and forth from the homepage.
User testing also revealed a lack of clarity with product features. I designed this modal to educate the benefits of each add-on, providing them with additional information and context, while also making it easier to add them to the plan and see the price change.
I held a developer review where I demoed the mobile prototype along with the
tablet mockups to go over the specifications for all screen sizes and ensured
we could build the responsive layout as designed.
One of the final deliverables was the form validation and password requirements. This required a robust, thorough design and documentation for developer handoff, along with collaboration to make sure we could build the functionality as intended.
Results
The new pricing page was proven to be a winner over the customizer in user testing as people liked being able to change options and see the price update in the order summary. With the design complete, we presented to stakeholders and received approval to move forward with development.
The next step is to develop the new flow and begin testing in production. Additional future steps would be to address the overall design of the homepage, which will require close collaboration with product marketing for additional copywriting and content.