Checkout System

~ A seamless purchase experience

OVERVIEW

Project background and scope

This is a project I worked on for DPG, a private educational company specialising in the sale of online courses aimed at providing students with professional qualifications.

The opportunity
In an increasingly digital world where online purchasing is the norm, we were behind our competitors by not offering our users the option to buy our products online. It became evident that introducing an online checkout feature on our website was essential. Until now, our sales process relied solely on telephone interactions with our sales team. We needed to conduct thorough market research, analyse the sales process, understand user needs, and design a seamless, trustworthy checkout system to maintain our competitive edge.

This presented an exciting opportunity to enhance the purchasing experience for our users.

Managing stakeholders

To develop a new checkout system, I needed to understand the needs of our users. However, it was equally important to manage the expectations and requirements of stakeholders. A key part of my role involved aligning my designs with their strategic objectives while gaining insight into their challenges and goals.

The company also had specific requirements that needed to be implemented, such as offering users the flexibility to pay either in full or in instalments.

Key Responsibilities & Deliverables:

I conducted a User Survey and Competitive Analysis to understand our users needs and the market.
I planned and conducted interviews with our sales department to gain a deep understanding of the user journey
I drew sketches and developed high-fidelity prototypes, validating design solutions through iterative feedback.
I wrote a script and facilitated usability testing to observe real-time user interactions and identify pain points.
We monitored and analysed metrics and traffic data to understand how users were interacting with the new checkout system.

Company:
DPG

Tools:
Google forms, pen and paper, Confluence, Figma, User Brain, Clarity & Google Analytics.

Role:
UX Researcher and Designer.

Timeline:
8 weeks.

The Design Process

DEFINE

Setting direction and goals

Mapping the solution

After gathering data and speaking with the sales team, the user flow became clear. The user follows a series of steps, starting from the moment the idea of learning a new skill arises, all the way through to the purchase of a course.

User Journey

The checkout flow screens had to be simple, straightforward and easy to understand.

DISCOVERY
& RESEARCH

Gaining knowledge and understanding

Understanding the user's needs

There are excellent examples of checkout systems that we could have emulated and adapted to meet the requirements of our organisation. However, the first step I took was to ask our users directly about their needs.

I designed and conducted a survey among our users to gain insights into:

Their experience and behaviour when purchasing a course with us over the phone.
Pain points: The information they felt was missing and the frictions they encountered during the purchase process.

I would have liked to also conduct in-depth interviews with our users, but due to time and budget constraints, running only a survey became the most practical option in this case.

472 responses

5 Questions

Results

The survey revealed that our Sales team was delivering an excellent user experience, with over 96% of users rating it as good or excellent. It also highlighted that the instalment payment option was the preferred choice among users.

The survey also brought to our attention the importance of providing information on how many months of tutor support the user gets when studying a course and information on extra fees such as exams.

Understanding the market

I began by examining what our direct competitors were doing. I analysed their online checkout systems and conducted a heuristic evaluation of their products as part of a competitive analysis.

What can I learn from them, and what should I avoid?

I also turned to the leading players in our industry, as well as unrelated but well-known companies with strong brands and reputations. My goal was to understand how they approached their checkout systems and, more importantly, why. This enabled me to identify best practices that could be adapted to meet the needs of both our users and our company.

Avado
Why? Within the industry, this company is our main competitor. They offer the same products and target a similar audience.

Coursera
Why? Coursera is one of the leading players in online education, operating as an aggregator that offers courses from a wide range of institutions worldwide.

Shopify
Why? Shopify is an excellent benchmark for designing a checkout system due to its optimised and refined design through millions of transactions. I looked into several business using this platform to see real-life examples. Some of those companies are Saguaro, Biomel and GymShark. Their checkout flow minimises friction with features such as autofill, guest checkout, and clear progress indicators while maintaining high trust and security standards. Shopify’s mobile-friendly design ensures a seamless experience across devices, making it a strong reference for best practices in usability, payment processing, and error handling.

Order Summary drop-down
The order information is still available in a drop-down offering the user the option of checking this information while hardly taking space on-screen.

Error visibility - Heuristic #9
Indicate the problem and constructively suggest a solution.

Recognition rather than recall - Heuristic #6

Display the title of the input field at all times so users don’t have to remember.

Payment details
Clear, simple and trustworthy layout not asking for unnecessary information.
Terms and conditions
Various payment methods if possible.

Interviews

Talking to Sales

Our sales team interacts with users on a daily basis, guiding them through the purchase process. I arranged two interviews with our colleagues from sales to walk me through the sales process when they speak with users. I aimed to understand:

The steps involved in the call.
Pain points users encounter during the sales process.
The frequently asked questions (FAQs) from users.
Entry requirements and terms and conditions.
Payment and finance options.
Additional fees and discounts.

It was noted that many of our potential users were inquiring about purchasing courses online, as they found it 'easier' and offered 'the freedom to buy anytime without needing to speak to someone during office hours'.

These interviews proved invaluable in gathering insights into the user journey, from the moment they pick up the phone to the final stage when they purchase a course.

IDEATION

Conceptualising ideas and solutions

Sketches

I was ready to begin sketching the initial drafts of the checkout steps.
For this checkout process, the following options were required:

Pay in full or in 12 monthly instalments.
Choose a nominated day for the instalments to be taken.
Add any extra fees specific to the course being purchased.
Redeem discount codes.

The user had to feel at ease navigating a checkout that felt familiar and trustworthy.
Heuristic #2 - Match between the system and the real world

It was vital to keep the flow as simple as possible without unnecessary steps or asking for non-essential information that could confuse or overwhelm the user.

I ensured the relevant information for the user was displayed in a logical and clear sequence so they could understand what was happening at each stage of the checkout.

Basket screen - Mobile

Checkout Screen - Mobile

TESTING

After designing an interactive high fidelity prototype, we reached the stage of testing it with our users. I wrote a script and conducted usability tests on UserBrain, using both the desktop and mobile versions of the prototype.

06 Users

08 Tasks

02 Devices

Key insights:

The overall result of the tests was positive. Users successfully completed the tasks and navigated the checkout flow without major issues. They understood the process and were clear about what was happening at each stage.
However, users pointed out that once the purchase was completed, there was no 'order confirmation number' on the confirmation page. Although an automated email is sent with the invoice and relevant details, the reference number was missing on the final screen, which led to confusion. This issue was addressed by displaying the order confirmation number on the confirmation page.

RESULTS

Data Analysis

Clarity & Google
After the launch of the checkout on the website, we monitored the performance by analysing metrics.

Session Recordings
Traffic
Heatmaps
Site speed

It became clear early on that the new checkout system was very popular with our users.
Within three months we were processing 65% of our sales through the online checkout, selling courses directly on the website.

Key Insights & Next Steps

Summary

In this project, I followed Jakob Nielsen’s 10 usability Heuristics for interface design as broad guidelines to guide me throughout the design process.
Feedback Survey: To ensure a continuous flow of feedback, the next step was to implement a feedback survey at the end of the checkout process, once the user had completed the purchase. This will help us gain further insights into their experience throughout the checkout process.
Ongoing monitoring and reviewing: User needs may change or evolve over time, so it is crucial to regularly review the current design and adapt it accordingly. The company’s needs may also shift, and this must be considered if new features are required.

PROTOTYPE

An interactive High-Fidelity prototype - Desktop and Mobile versions.

I developed a high-fidelity, clickable prototype in Adobe XD, and later in Figma for updated versions, simulating the entire checkout process. This prototype followed the user flow from the basket stage, through data input, to the payment process.

After several rounds of iteration, the final design struck the balance I was aiming for. I focused on clearly displaying the relevant information users needed to see, while ensuring they felt confident about payment security.

Google Analytics & Clarity
Who is our audience?