CODEMUND

Codemund is an online learning platform for programmer of all levels. Unlike other e-learning platforms, Codemunds features an interactive "in-browser" learning and an engaging gamification aspect to the learning experience.

deliverable

Responsive Webapp

SKILLS & RESPONSIBILITY

UX Design, UI Design, Brand Identity, Character Design

TOOLS & SOFTWARES

Sketch, Invision, Adobe CC

THE CHALLENGE

BRINGING EDUCATION TO ONLINE SPACE

This project is all about good usability. An online learning platform should offer a well-structured learning experience and my task as a designer went far beyond designing a site that hosts PDFs and video streaming. I learned to judge the usability of my design from user's perspective and the importance of involving users early on in the design process.

COMPETITOR RESEARCH

Brainstorming Session

We started with a brainstorming session for feature list and planning our how those features and site pages link to each other.

INFORMATION ARCHITECTURE

INITIAL SITE Flow

Several issues came up as we were develop our site flow:

-Do users prefer seeing all classes? or a structured group of classes?

-Where does curriculum roadmap lays in the user flow? How often would a user need to consult this road map?

-How will the resuming of classes work for registered user. What will be the landing page for user who just logged in?

PERSONA AND USER FLOW

Understanding Current User Journey

We study the different learning platform to find out how user usually go about browsing for class. We realized that there are many ways to do this, depending on the classes grouping.

REVERSE CARD SORTING

Using Treejack to test our Site Flow

We use Treejack as a reverse card-sorting method. To make sure that users know how to navigate easily through our site, we asked users to complete a few task:

1. Find out of Codemund offer Javascript class for beginner. [success]

2.Resume my previous Go Language Class. [success]

3. Find out how much is the monthly subscription plan. [fail, need to fix this]

BRANDING DESIGN

REVISED SITE FLOW

This revised site flows answered the key questions we had earlier: In each language is a collection of classes. Class is a collection of lesson steps. Each steps progresses from video to quiz to code. Later on we will introduce the 'track' which is a collection of classes not necessarily from one particular language, but a collection if classes that is selected for certain needs such as becoming front-end developer.

HIGH FIDELITY WIREFRAME

PUTTING IT ALL ON SCREENS

I made sure I follow the site flow above and keeping a logical site hierarchy discovered during Treejack activity. I also put my design eyes at work by crafting visually pleasing layouts, thinking about proportions. Although we are not doing mobile site in this phrase, I aimed for responsiveness in my design and envisioned how elements on the page can be re-stacked fluidly.

BRANDING DESIGN

DEFINING BRAND LANGUAGE

I made inspiration board for the mood and tone for Codemund brand and website. We decided on having a corporate color to be user with various tonal scale. Fonts will be kept san-serif together with simplified Thai font.

BRANDING DESIGN

UI ELEMENTS

I finalized the brand identity of Codemund site and crafted out basic ui elements that will be used in the final design phrase of Codemund site.

CHARACTER DESIGN

PLAYFUL BRAND MASCOT

For a product that positions itself with the concept of speed, users must be able to complete their transaction quickly and effectively.