CodeFest 2026 · UI/UX Challenge
A student website
that finally does
the student's job.
A mobile-first redesign of acesknust.com. Ten pages rebuilt around four things students actually open the site to do — find course materials, buy from other students, catch an event, and know who to ask.
01 · Audit
What we found on
the live site
Ten findings, each one traced to a real page and measured on the live site. Every fix later in this document points back to a numbered finding here.
{{ f.no }}
{{ f.sev }}
{{ f.page }}
{{ f.title }}
{{ f.problem }}
02 · Information architecture
Fourteen flat links
became five tabs
The old footer navigation grouped pages by how the site was built (Explore / Marketplace / Resources), not by what a student wants. We regrouped around intent, and gave the two commercial journeys their own tabs because they carry the most steps.
Before · 14 links, 3 groups
{{ n }}
No search. Login, Register and Vendor Dashboard sat inside a footer column beside product browsing.
After · 5 tabs + sheet
{{ n.tab }}
{{ n.holds }}
Search sits in the header on every screen. Overflow pages live in one bottom sheet reachable from Home.
03 · Live prototype
Try it —
everything works
Not a mockup and not a separate demo — the phone below is running the shipped site itself. Scroll it, open the menu, filter the courses, tap an event. Whatever works here works at the live URL, because it is the same build.
Live build · scroll and tap inside
{{ j.no }}
{{ j.name }}
{{ st }}
{{ j.why }}
04 · Design system
Tokens the web
team can ship
The brand palette is the brief's, unchanged. We added the semantic and neutral steps the palette was missing, plus one dark surface ramp — nothing here needs a designer to interpret it.
{{ c.name }}
{{ c.hex }}
{{ c.token }}
Type scale
Space Grotesk 700
Display · 31/25/22/19/15 · tracking −3%
Public Sans 400 — body copy set at 14–15px on mobile with 1.6 line height, never below 12.5px for metadata.
Body · 15/14/13.5/12.5
IBM PLEX MONO · CE 353 · GH₵ 120 · AUG 14
Labels, course codes, prices, dates, IDs
Components & the states each one ships with
05 · Responsive scaling
How the mobile system
grows to desktop
Optional per the brief, included to prove the tokens hold. The bottom tab bar becomes a horizontal nav, cards keep their radius and spacing, and the grid goes from 2 to 4 columns.
06 · Coverage
All ten pages, and
what each one now does
{{ p.no }}
{{ p.name }}
{{ p.what }}
{{ p.state }}
07 · Motion
Motion that does
a job
Every animation here is CSS-only — scroll-driven timelines (animation-timeline: view()) rather than scroll listeners, so nothing costs a frame on a mid-range Android. All of it collapses under prefers-reduced-motion.
{{ m.dur }}
{{ m.name }}
{{ m.what }}
Against the rubric
Where to find
each scored item
{{ r.pts }}
{{ r.item }}
{{ r.where }}
Brand guardrails honoured: the ACES name and crest are untouched, the palette stays blue-and-white with the brief's exact hex values as its base, and every screen is built from plain HTML and CSS the ACES web team can ship on their existing Next.js stack.
