How might we help SMU students make informed bidding decisions to avoid wasting e$ while securing their
preferred modules?
UI/UX Hackathon, 12 - 20 May 2025
My team
Keith Tang, UI/UX Designer
Lam Xin Yi, UI/UX Designer
Nicole Chia, UI/UX Designer
What I did
Ideation
Prototyping
UI Design
UX Design
Software
Figma
Results
Ranked 5th out of 54 teams
The Design Challenge
SMU’s bidding system creates anxiety and inefficiency as students must bid for modules without knowing how much is enough. Many students tend to overbid and lose precious e$, or underbid and miss out entirely. There is currently no personalised, data-backed guidance to inform their decisions.
How Do We Solve This?
AfterClass envisioned a Bid Recommendation System powered by user input and data feedback. The hackathon was split into two phases:
Phase 1
User Flow 1: Input and Recommendation (before bidding)
Phase 2 (Top 10 Finalists)
User Flow 2: Actual Bid Submission (during bidding)
User Flow 3: Feedback and Reconciliation (after bidding)
Our team aimed to design an experience that’s not only data-driven but familiar, stress-free, and intuitive.
So, How Might We...
help SMU students make informed bidding decisions to avoid wasting e$ while securing their preferred modules?
Design System
Staying True to AfterClass
AfterClass's branding and components were provided during this hackathon. However, to ensure seamless integration, we also closely studied and familiarised ourselves with AfterClass’s current UI (web and mobile).
.png)
User Flow 1: Ideation
On a Time Crunch
With just 48 hours to design a hi-fi prototype, I rapidly sketched bold ideas inspired by familiar Gen Z experiences like online shopping, before regrouping with my team to consolidate and align our concepts.
Finalising Our Concept
Our team decided to go along with a module shopping experience, repackaging the entire process into a fuss-free and familiar online shopping checkout experience.
User Flow 1: Key Features (Web)
I was in-charge of the main page (empty and saved state), module selection flow and the loading screen.
Main Page: Empty State
I designed a clean and minimal empty state that aligns with AfterClass’s existing branding and UI system. A prominent call-to-action (CTA) is placed to guide first-time users intuitively, reduce cognitive load, and encourage immediate engagement.
Main Page: Saved State
After a bid is saved, the layout transitions from an empty state to a populated view while maintaining visual consistency and clarity.
The "+ Create new" button remains visually distinct and positioned for easy discoverability, supporting user control and freedom by allowing users to add more drafts at any time.
Module Selection
The module selection process is intentionally designed to mimic a familiar online shopping experience, enabling students to easily browse, customise their preferences, and add preferred modules to their “module cart”.
This approach leverages mental models and recognition over recall to create an intuitive and engaging user experience.
.png)
Loading Screen
To improve system transparency and keep users engaged during the bid generation, I designed a custom loading screen. It reassures users with clear feedback and incorporates a fun fact to subtly boost platform engagement and retention, balancing function and emotion.
User Flow 1: Key Features (Mobile)
For the mobile version, the layout was responsively adapted to accommodate the limited screen real estate, while preserving the core user flow and interaction patterns of the desktop experience.
Main Page: Empty State
Kept a consistent interface with a clear CTA, guiding first-time users to begin their bidding journey while reducing cognitive load.
_edited.png)
Main Page: Saved State
The “+ Create New” button is simplified to a floating round “+” button to optimise for limited screen space while maintaining clear affordance and accessibility.
_edited.png)
Module Selection
The "module cart" is streamlined into a shopping cart icon in the top navigation bar, maintaining functionality while maximising screen space and clarity.
.png)
The Results Are Out And...
We Made It to the Top 10 and Advanced to Phase 2!
🎉
Refinements to User Flow 1
With new information about Phase 2 (user flows 2 and 3), we refined user flow 1's main page for end-to-end consistency.
Empty State (Before)
Empty State (After)
-
Including tabs
-
“Drafts” - user flow 1 and 2
-
“Confirmed” - user flow 2 happening independently
-
-
A user-centric timeline of the bidding rounds to update and remind students to confirm actual bids
_edited.png)
.png)
User Flow 2: Ideation
On a Time Crunch (Again)
With just 48 hours to design a hi-fi prototype for two user flows, our team decided to split the work. I was in charge of user flow 2.
Two Scenarios
As user flow 2 can either happen without or after user flow 1, our team decided to create hi-fi prototypes for both scenarios.
Scenario 1: user flow 2 happening without user flow 1
Scenario 2: user flow 2 happening after user flow 1
User Flow 2 Scenario 1's Key Features (Web)
Input Confirmed Bids
Consistent with user flow 1's UI, a prominent (CTA) is placed to guide first-time users intuitively, reduce cognitive load, and encourage immediate engagement.
.png)
The user is then brought to this page, where they can easily use the dropdown button to find their required information. Buttons like "Input New Confirmed Bid" and "Save" are disabled for error prevention.
Disabled buttons are now active as all required information is completed, providing clear feedback.
Saving Confirmed Bids
The first checkbox is optional and linked to user flow 3.
.png)
_edited.png)
User Flow 2 Scenario 1's Key Features (Mobile)
For the mobile version, the layout was responsively adapted to accommodate the limited screen real estate, while preserving the core user flow and interaction patterns of the desktop experience.
_edited.png)
User Flow 2 Scenario 2's Key Features (Web)
After User Flow 1
To ensure a seamless flow from user flow 1, the user has an option to update and input their confirmed bids.
.png)
The user is then brought to the page with the courses saved from user flow 1.
The user can only key in their actual bid.
.png)
User Flow 2 Scenario 2's Key Features (Mobile)
For the mobile version, the layout was responsively adapted to accommodate the limited screen real estate, while preserving the core user flow and interaction patterns of the desktop experience.
_edited.png)
_edited.png)
Takeaways
1. Speed Over Perfection
With just 2 days to build a hi-fi prototype for each phase, we had to prioritise speed and functionality over perfection. Unlike long-term group or client projects, we could not afford lengthy research or endless iterations and had to make fast and team-aligned decisions to keep the momentum.
2. Design Cohesion Enables Iteration
When we moved into Phase 2, we quickly realised that disjointed flows create friction. By revisiting and refining user flow 1, we ensured a seamless, start-to-finish experience. Designing with cohesion from the start made the iteration process faster, smoother and more intuitive.
3. Simple, User-Centric Design Wins
At every turn, simplicity proved most effective. Since we were designing for fellow SMU students and had firsthand experience with the stress of bidding, every design decision was guided by one question: “Will this relieve the student’s stress during the bidding process?” This helped us prioritise clarity, familiarity, and minimal friction across all screens.
