Background

In my role as a Product Designer at Payasugym (currently Hussle), I was the Lead Designer of a significant digital transformation.

Our primary objectives were to enhance conversion rates for both first-time and returning customers, reduce the time it takes for users to complete a purchase, and minimize cart abandonment – all within the context of adding a product to the shopping cart and finalizing the acquisition of a pass.

Process

Across the different workstreams, we worked in Product teams with a business analyst, product owner and developers. We also had the customer service team sharing insights and feedback from our users that was thoroughly documented.

Discovery

We worked with the customer service team to pinpoint the users' main issues and contacted us during the checkout process. We were lucky enough to have a set of customers who collaborated with us to share their experiences and frustrations.

We also worked with our Data Analyst to help us understand the numbers: in which pages the users were exiting the checkout, time for completion, and the average lifetime value of our customers.

User Flows

We mapped a typical user flow that outlined the different steps users needed to take, to complete a purchase on the website.

We set up a number of workshops to talk with developers, managers and product owners to collectively envision the bigger picture which helped identify any hidden messages, pages, or edge cases that may not be visible in a standard flow. This helped us to start shaping our approach and prioritising a starting point. 

Breadboards

We started by breadboarding flows for each step of the checkout. This format helped to avoid getting too concrete too early, working quickly and flagging any problems to solve. For instance, one of the biggest attritions of the checkout was a mandatory form that the users needed to fill in in case of any health conditions.

Wireframes

Next, we developed a set of wireframes that clarified the content hierarchy and form design elements.

Unexpected turn

The business had decided to include PayPal as a payment method. This required understanding the API's features and limitations and integrating it into the existing workflows. Low-fidelity prototypes with more complex integrated logic were created for various use cases using Axure to achieve this.

Design

Once we received the final approval from PayPal to integrate their API into our checkout process, we created high-fidelity designs to showcase the concepts to our customer testing community and the business.

Test, learn & iterate

The designs were taken to the next level by creating InVision prototypes, which were used for demos and user testing. To conduct remote user sessions, we chose Usertesting.com as the test platform and organized groups of five active Payasugym users. The feedback and findings obtained from these sessions were then used to update the product team backlogs. Finally, the prototypes were iterated and made ready for MVP production.

Diverted traffic

In order to minimise risks in such an essential part of the user journey, we diverted 50% of the traffic to the MPV and used Optimizely to compare both live and MVP versions.

User sessions & Heatmaps

After launching the first MVP, we analysed user sessions and used heatmaps to understand user behaviour during checkout. This helped us quickly identify any potential usability issues, bugs, or technical problems. For instance, we noticed that users were clicking in two different areas on the confirmation page to figure out how to redeem the product they just purchased and what the next steps were.

Iterations

After discovering a usability issue on the checkout confirmation page, we added visual guides for the next steps and linked the "receipt" to the customer's account page under their orders.

Results

We observed a notable improvement in our conversion rate, with an increase of 3% (from 5.05% to 5.20% in absolute terms). Additionally, the average time required for users to complete the checkout process decreased significantly, reducing from 5.3 minutes to 3.20 minutes. Remarkably, our upsell banners contributed to a substantial boost in the lifetime value (LTV), jumping from an average of £40.30 to £130.
This data served as a valuable indicator of the successful resolution of usability issues identified during our research phase. With unanimous satisfaction from stakeholders, we confidently rolled out the new checkout experience to all users.