We set only the cookie that remembers this choice. Analytics and marketing cookies stay off unless you allow them. Cookies policy

Start a brief

Room 15 · Online learning academy · Concept

Rungwise

One step at a time, visibly.

Rungwise, a fictional online academy where a learning path is drawn as a staircase and every step is as wide as the course is long.

Concept project — fictional brand. This project was created by ARTLOGIC to demonstrate a possible brand and digital experience. The organization, name, people, prices, and data shown are fictional. This is not client work and does not represent measured business results.

Explore the concept site

Opening screen of the Rungwise site on a wide display: One step at a time, visibly.
Opening screen, desktop

01 The brief

The brand
Rungwise is a fictional online learning academy for adults and career changers, built on short lessons and visible progress. Its tagline is "One step at a time, visibly."
The problem
Course sites ask for commitment before they show where a learner will end up. This site shows the path first, with honest durations, and only then asks for enrolment.

02 The idea

The ladder: a path drawn as steps

What you see
The visitor picks a goal and a ladder of courses is drawn as a staircase. Each step is as wide as the course is long, on one constant scale used on every page. The current step takes the sunflower tread.
How it works
The ladder is built from course data in SVG and CSS, at 24 px per hour. An ordered list under the drawing says the same in words, and a polite live region announces the result of a change of goal.

03 Design system

  • White#FFFFFF groundPage ground.
  • Navy#14213D inkText, done steps, borders.
  • Sunflower#FFC93C accentOnly where something is pressable or current.
  • Muted slate#545C6E mutedSecondary text.
  • Rule #C9CFDB. Hairlines.
  • Wash #F4F6FA. Quiet background panels.
Type
  • Bricolage Grotesque
    Headlines, titles and large figures, heavy and tightly set.
  • Figtree
    Body copy, labels, hints and forms.
Edges
Square plates with a 6 px radius, hairline rules and flat fills. Step state is shown by fill, outline or dots, and always with a text label as well.
Motion
Ladder steps animate in order over a short stagger when the goal changes. With reduced motion the ladder renders instantly.

04 Process

  1. Pre-production

    Pre-production set the direction before any code: a thesis, a pinned art direction and a short list of what the site must refuse. The result was a sitemap, a build plan with the ladder specified in detail, and a decision to use no photography.

  2. Build

    The site was built from that plan: catalogue with filters, course pages with a curriculum accordion, learning paths, instructors, FAQ, a three-step enrolment form and a dashboard preview with synthetic learner data.

  3. Finish review

    Finished pages went through Impeccable review rounds against the direction and the quality bar, covering hierarchy, contrast, focus, responsive behaviour and copy.

  4. Fixes

    The review produced an ordered list of fixes, which were applied and then checked again.

05 Technology and accessibility

Stack
Next.js 16, Tailwind CSS 4 and TypeScript, inside the studio's single application.
Particular to this site
  • Ladder drawn in SVG and CSS from course data
  • Constant scale: one hour is 24 px everywhere
  • Interactive sample lesson with a quiz and transcript
Access
  • Every ladder has a text equivalent: an ordered list of steps with state
  • Arrow, Home and End keys move between ladder steps
  • Polite live region announces the ladder for the chosen goal
  • Accordions are buttons with aria-expanded
  • Skip link and visible focus styles
  • Reduced-motion media query turns animation off
Tests
Covered by its own Playwright end-to-end spec and a unit test file for its logic.

06 Honest notes

Rungwise is a fictional brand and this is a concept project by Artlogic. Courses, instructors, prices and the dashboard learner are invented, and the site makes no claims about accreditation or student outcomes.

The enrolment form is a demo. It says so on the page and stores nothing.

There is no photography, stock or generated. The ladder and dashboard are drawn from data, and instructors appear as initials, because portraits would present identifiable people as teachers who do not exist.

07 See it

Explore the concept site

Fictional prototype. A concept by ARTLOGIC for a fictional brand. English only.