The Odin Project

An open source code learning web platform featuring a full stack developer curriculum.

ROLE

Lead UX/UI Designer

YEAR

2017 - Ongoing

DESIGN TASKS

I led the web design, branding and collaborated with a team of developers to maintain the ongoing evolution of the web platform. The design tasks include, but are not limited to creating: user-flows, wireframes, mockups, icons, illustrations and production ready assets.

DESIGN GOAL

One of the primary goals was to refresh the visual identity while preserving the integrity of the original "Odin" theme. Another area of focus was the refinement of the student onboarding userflow and creation of a personal student dashboard that holistically captures the learning progress.

Branding & Badge Design

Redesigning The Odin Project website included refreshing the original mascot logo of the Odin head.

A set of badges were designed to depict each course's code language. The badges are unlocked one by one when students start each course. The typography is "Norse" (Freeware License).

Isometric Illustrations

Designed in Affinity Designer using an isometric grid.
The Odin Project resembles a university featuring high quality code education, but it's entirely free.

Dashboard Design Iterations

The student dashboard showcases personal learning activity, course progresses and submitted project solutions.

The latest iteration of the dashboard consists of curated learning paths that group together necessary courses that optimizes learning for beginners. The dashboard activity grid shows an overview of lesson completions throughout the year and provides a motivational aspect to learning. The early iteration of the dashboard displayed all courses individually (image on right).

The Odin Project Dashboard Design by Ada Chiu

The Odin Project - Dashboard Iteration by Ada Chiu Design

Information Architecture

The sitemap is structured to focus on the primary design needs of the website: learning and progress tracking.