Koder U

Live classes taught by the coders already on Koder’s network. One screen carries the whole product: a member profile that doubles as a schedule, where every class is a row and every row has exactly one action.

Product UIUX / UIDesign system

ClientKoder

Year2020

RoleProduct design

Timeline5 weeks

Request an audit ↗Talk about a similar project

The profile: identity and links at the top, then upcoming classes by week and previous ones below.

Work details

TypeProduct UI · live-class platform

IndustryDeveloper education

ClientKoder (US)

RoleProduct design and UI

Year2020

Timeline5 weeks

StatusShipped

DeliverablesProfile and schedule screens, row and state system

Fonts

PoppinsInter

Colours

Built with

InVision

Bootstrap

JavaScript

Built as one row component with a state machine on its action button, so the schedule, the teacher view and the past-class list are the same code.

What it needed

A schedule you can read without reading.

A live class is only useful if you notice it in time. The first version showed classes as cards in a grid, which looked fine and made the two questions that matter — when is it, am I in — impossible to scan. Nothing on the screen told a member whether a class had started, whether they had a seat, or whether it was over.

What I did

Structure

Two sections, upcoming and previous, each with a count. No tabs: the whole schedule is one scroll, grouped by week so time is a heading rather than a field to compare.

Row

One template for every class — date block, subject icon, title with its tags, track and duration, attendees, action. The eye lands in the same place on every line.

States

The action button carries the status: join now with a live timer, you’re in, count me in, view class. Colour is reserved for the one row that needs a decision right now.

Identity

The profile above it stays factual — role, links, counts of classes taught, students, sessions — because the credibility of a teacher is the reason to book.

Reuse

Free and 18+ tags, class type and duration are the same chips everywhere, which is what let the past-class list ship as a configuration of the same row.