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.