Supertest

Product design and frontend

A study platform for the ICFES, Colombia's university entrance exam. I built the product from zero and shipped most of the frontend myself.

Context

Every Colombian student takes the ICFES. It decides scholarships and admissions, and most students prepare for it with a prep book and a mock exam that returns a score with no instructions attached.

Two things were broken. Preparation was an event instead of a routine, so students studied in bursts three weeks out. And feedback stayed general: a school tells a student they scored low in math, never which competency inside math to work on.

The framing became Duolingo, but for the ICFES.

Research

The work started with interviews. Students, teachers, school directors, ICFES specialists.

Directors and teachers wanted visibility: performance by group, subject, and competency, in a form they could take into a class. Students wanted something else. Not a study plan, just an answer to what to do today, in under ten minutes.

That gap set the thesis. Institutions buy the visibility, students stay for the loop, and the loop gets designed first.

Sitemap and core flows
Student journey, first session to exam day

Daily loop

The first thing I built was the Misión Diaria. A banner names the subject and the specific competency you're working on, then gives five questions. Five is short enough that you don't negotiate with yourself about starting.

Personalization runs on the ICFES classification model: subject, component, competency, claim, evidence. Every answer writes back into that tree, so the next mission targets what's actually weakest. Streaks, XP, and multipliers sit on top.

It's still the most used surface in the product.

Daily mission sequence
Streak and XP states

Then simulacros. Full mock exams, personalized, targeted by subject, or assigned across a school. And live sessions, scoped as a workaround so we could test the format before committing engineering to it.

Simulacro flow and results
Live sessions

System

I designed the design system and translated it to code, then packaged it as an npm module so the team consumed one source of truth. Several refactors followed to keep the components modular on both sides.

That changed the role. I stopped handing off designs and started shipping them, which removed the gap between what was drawn and what reached production.

Tokens, type scale, components
Figma component, code, rendered result

Screens

Home and progress
Responsive: mobile, tablet, desktop
Theory module
Registration and acquisition flow
Teacher and admin dashboard

Supertest has over 3,000 students and ships weekly. Making the interface better was never the hard part. The hard part was getting a student to open it on a Tuesday when nothing is due.

Ask about this work


I owned product, research, UX, UI, and the design system, and shipped frontend to production alongside the engineering team.