PROCON Redesign
& Checkout Flow

Product Design

Visual Design

Project Academy is a leading education platform helping Year 9–12 students excel academically. This checkout flow redesign aimed to simplify course sign-ups, allowing students to enrol in up to four classes at once. The solution improved user experience, boosted conversion rates, and increased market engagement during the Procon campaign.

Client

Project Academy

Tool

Figma, Photoshop

Year

4 weeks Dec 2024

Role

Product Designer

PROCON

(Context)

©2025

PROCON

(Context)

©2025

PROCON

(Context)

©2025

Context

(Procon)

01
Problem statment

The Procon page lacked clear structure, making it hard for users to navigate course offerings. The checkout flow only allowed one course per transaction, creating friction and limiting sign-ups.

01
Problem statment

The Procon page lacked clear structure, making it hard for users to navigate course offerings. The checkout flow only allowed one course per transaction, creating friction and limiting sign-ups.

01
Problem statment

The Procon page lacked clear structure, making it hard for users to navigate course offerings. The checkout flow only allowed one course per transaction, creating friction and limiting sign-ups.

01
Problem statment

The Procon page lacked clear structure, making it hard for users to navigate course offerings. The checkout flow only allowed one course per transaction, creating friction and limiting sign-ups.

02
Goal

Redesign the Procon page and checkout flow to improve UI clarity, usability, and engagement. The new Procon page enhances navigation and visual hierarchy, while the updated checkout flow allows multi-course sign-ups, boosting conversions and strengthening brand engagement during the Procon campaign.

02
Goal

Redesign the Procon page and checkout flow to improve UI clarity, usability, and engagement. The new Procon page enhances navigation and visual hierarchy, while the updated checkout flow allows multi-course sign-ups, boosting conversions and strengthening brand engagement during the Procon campaign.

02
Goal

Redesign the Procon page and checkout flow to improve UI clarity, usability, and engagement. The new Procon page enhances navigation and visual hierarchy, while the updated checkout flow allows multi-course sign-ups, boosting conversions and strengthening brand engagement during the Procon campaign.

02
Goal

Redesign the Procon page and checkout flow to improve UI clarity, usability, and engagement. The new Procon page enhances navigation and visual hierarchy, while the updated checkout flow allows multi-course sign-ups, boosting conversions and strengthening brand engagement during the Procon campaign.

03
Success Metrics

• Increase in average courses per transaction. •Improvement in checkout completion rates. • Reduction in course non-attendance. • Positive feedback from students and parents.

03
Success Metrics

• Increase in average courses per transaction. •Improvement in checkout completion rates. • Reduction in course non-attendance. • Positive feedback from students and parents.

03
Success Metrics

• Increase in average courses per transaction. •Improvement in checkout completion rates. • Reduction in course non-attendance. • Positive feedback from students and parents.

03
Success Metrics

• Increase in average courses per transaction. •Improvement in checkout completion rates. • Reduction in course non-attendance. • Positive feedback from students and parents.

Result

Result

Result

Trial PROCON students

+0.0%

+0.0%

+0.0%

+0.0%

+0.0%

+0.0%

Relative

3-4 session sign ups

+0.0%

+0.0%

+0.0%

+0.0%

+0.0%

+0.0%

Relative

Incremental revenue

$0

$0

$0

$0

$0

$0

($170,000 forecasted)

Overview
Overview
Overview

Project Overview

The Procon page and checkout flow had usability and UI issues that hindered engagement and conversions. The unclear visual hierarchy on the Procon page made it hard for users to navigate course offerings, while the one-course-per-checkout flow created friction. Since Procon is a key post-HSC campaign, the redesign aimed to enhance clarity, accessibility, and multi-course sign-ups to improve user experience and boost conversions.

Research & Discovery

Pain Points

Pain Points

Pain Points

Visual

Lack of Hierarchy

Lack of Hierarchy

The Procon page lacked clear visual hierarchy, making it difficult for users to navigate course offerings.

Emotion

Negative user feedback

Negative user feedback

The flow was restrictive, allowing only one course per transaction, leading to a frustrating and time-consuming sign-up process.

Patten

User behaviour

User behaviour

Users were unaware they could sign up for multiple courses, causing confusion and missed opportunities.

Research

Target User

Year 9–12 students and their parents looking for high-quality academic programs and seamless course enrolment.

Research

Target User

Year 9–12 students and their parents looking for high-quality academic programs and seamless course enrolment.

Business Context

PROCON is a key post-HSC campaign aimed at attracting new students and increasing course participation. To maximise engagement and conversion rates, the redesign focused on improving UI clarity, simplifying sign-ups, and optimising the multi-course selection experience while ensuring efficient resource allocation.

PROCON is a key post-HSC campaign aimed at attracting new students and increasing course participation. To maximise engagement and conversion rates, the redesign focused on improving UI clarity, simplifying sign-ups, and optimising the multi-course selection experience while ensuring efficient resource allocation.

Overview

Project Overview

The Procon page and checkout flow had usability and UI issues that hindered engagement and conversions. The unclear visual hierarchy on the Procon page made it hard for users to navigate course offerings, while the one-course-per-checkout flow created friction. Since Procon is a key post-HSC campaign, the redesign aimed to enhance clarity, accessibility, and multi-course sign-ups to improve user experience and boost conversions.

Research & Discovery

Pain Points

Visual

Lack of Hierarchy

The Procon page lacked clear visual hierarchy, making it difficult for users to navigate course offerings.

Emotion

Negative user feedback

The flow was restrictive, allowing only one course per transaction, leading to a frustrating and time-consuming sign-up process.

Patten

User behaviour

Users were unaware they could sign up for multiple courses, causing confusion and missed opportunities.

Research

Target User

Year 9–12 students and their parents looking for high-quality academic programs and seamless course enrolment.

Research

Target User

Year 9–12 students and their parents looking for high-quality academic programs and seamless course enrolment.

Business Context

PROCON is a key post-HSC campaign aimed at attracting new students and increasing course participation. To maximise engagement and conversion rates, the redesign focused on improving UI clarity, simplifying sign-ups, and optimising the multi-course selection experience while ensuring efficient resource allocation.

Ideation & Solutions

💡 Why a Four-Course Limit?

Project Academy offers 6–8 courses, varying by year level. A four-course limit provided flexibility while preventing excessive sign-ups that could lead to resource waste.User testing confirmed that most students naturally selected up to four courses, making this the optimal limit.

🧠 Communicating the Multi-Course Sign-Up

Initially considered a cart display (0/4 sessions), but it risked misleading users into thinking they had to choose four courses. Final solution: A placeholder-like prompt that subtly encouraged users to add more courses while keeping the process optional and intuitive.

🧠 Communicating the Multi-Course Sign-Up

Initially considered a cart display (0/4 sessions), but it risked misleading users into thinking they had to choose four courses. Final solution: A placeholder-like prompt that subtly encouraged users to add more courses while keeping the process optional and intuitive.

Design & Prototyping

Inspo

Design Decisions

Colour

Colour

Retained the existing brand (Red/Violet) colours, aiming to maintain consistency and ensure immediate recognisability among our users.

Retained the existing brand (Red/Violet) colours, aiming to maintain consistency and ensure immediate recognisability among our users.

Layout

Layout

Introduced a sidebar for multi-course selection, avoiding major structural change to navigation bar per dev/PM feedback.


Introduced a sidebar for multi-course selection, avoiding major structural change to navigation bar per dev/PM feedback.

Error Handling

& Accessibility

Added icons to signal errors, such as duplicate session sign-ups.Integrated early visual warnings to help users resolve issues before submission.

Error Handling

& Accessibility

Added icons to signal errors, such as duplicate session sign-ups.Integrated early visual warnings to help users resolve issues before submission.

Technical Considerations

Technical Considerations

Designed a cart-based checkout system that minimised user friction while accommodating the absence of a login system.

Designed a cart-based checkout system that minimised user friction while accommodating the absence of a login system.

Ideation
Ideation
Ideation
Ideation

Iteration

WIREFRAMES

Low-Fidelity Mobile Prototype

The low-fidelity prototype aimed to test the structural flow and core functionalities of the platform, particularly how users interact with course booking and the checkout flow

Low FI wireframe

WIREFRAMES

Mid-Fidelity Mobile Prototype

The mid-fidelity prototype was designed to test key functions of the proposed checkout flow—such as course selection limits, duplicate session warnings, and cart updates—as well as core platform interactions, including how users sign up for events and navigate the hybrid app–bracelet system for session check-ins.

Iteration
Iteration
Iteration
Iteration
Final delivery
Final delivery
Final delivery
Final delivery

Final Delivery

Final Delivery

Final Delivery

Final UI

Mobile Checkout Flow

The redesigned Procon checkout experience supports seamless multi-course sign-up on mobile, improving usability and clarity for high school students and parents.

Key enhancements include:

  • A guided cart flow allowing up to four sessions

  • Real-time feedback on session availability

  • A clear order summary with promo code support

  • Friendly visual cues and a smooth confirmation screen

The redesigned Procon checkout experience supports seamless multi-course sign-up on mobile, improving usability and clarity for high school students and parents.

Key enhancements include:

  • A guided cart flow allowing up to four sessions

  • Real-time feedback on session availability

  • A clear order summary with promo code support

  • Friendly visual cues and a smooth confirmation screen

The redesigned Procon checkout experience supports seamless multi-course sign-up on mobile, improving usability and clarity for high school students and parents.


Key enhancements include:

  • A guided cart flow allowing up to four sessions

  • Real-time feedback on session availability

  • A clear order summary with promo code support

  • Friendly visual cues and a smooth confirmation screen

The redesigned Procon checkout experience supports seamless multi-course sign-up on mobile, improving usability and clarity for high school students and parents.

Key enhancements include:

  • A guided cart flow allowing up to four sessions

  • Real-time feedback on session availability

  • A clear order summary with promo code support

  • Friendly visual cues and a smooth confirmation screen

🖥️ Before & After

🖥️ Before & After

Final Desktop UI

Procon Page Redesign

The redesigned Procon landing page improves clarity, structure, and user flow.

Key updates include:

  • Stronger visual hierarchy and clearer call-to-actions

  • Modernised card layout for each subject

  • Seamless integration with the new multi-course checkout experience

The redesigned Procon landing page improves clarity, structure, and user flow. Key updates include:

  • Stronger visual hierarchy and clearer call-to-actions

  • Modernised card layout for each subject

  • Seamless integration with the new multi-course checkout experience

Impact & Result

By optimising the ATC sign-up flow and landing page design, we significantly improved user behaviour quality (attendance rate +7%), trial conversion (+52%), and actual revenue (+$85K), while also reducing operational workload by 75%.

By optimising the ATC sign-up flow and landing page design, we significantly improved user behaviour quality (attendance rate +7%), trial conversion (+52%), and actual revenue (+$85K), while also reducing operational workload by 75%.

💡 Key challenges

Balancing needs

Had to prevent resource waste while enhancing user freedom.

User Communication

Needed to educate users on the new multi-course flow without overwhelming them.

Technical limitations

Absence of a login system complicated cart management, requiring creative solutions.

Collaboration constraints

Major layout overhauls were restricted to avoid affecting site-wide functionality.

🙌 Major takeaways:

This project taught me how to balance user needs with business constraints, make informed design trade-offs, and navigate technical limitations. Working closely with developers gave me a deeper understanding of engineering considerations, while tight deadlines taught me how to prioritise core features to meet conversion goals without compromising user experience.

Impact & Result

By optimising the ATC sign-up flow and landing page design, we significantly improved user behaviour quality (attendance rate +7%), trial conversion (+52%), and actual revenue (+$85K), while also reducing operational workload by 75%.

💡 Key challenges

Balancing needs

Had to prevent resource waste while enhancing user freedom.

User Communication

Needed to educate users on the new multi-course flow without overwhelming them.

Technical limitations

Absence of a login system complicated cart management, requiring creative solutions.

Collaboration constraints

Major layout overhauls were restricted to avoid affecting site-wide functionality.

🙌 Major takeaways:

This project taught me how to balance user needs with business constraints, make informed design trade-offs, and navigate technical limitations. Working closely with developers gave me a deeper understanding of engineering considerations, while tight deadlines taught me how to prioritise core features to meet conversion goals without compromising user experience.