Wavoto

Course Builder


Shortly after a rebrand, Wavoto prioritizes a new feature for creating and managing online courses.

Most of the work I've done up to this point has been confined to extant frameworks. Course Builder is the first product I will get to design in a vacuum.

With the team's approval, I decide to use the project as an opportunity to craft a new design system that will not only align with Wavoto's new brand, but also serve as a model for renovating our existing UI.
Process Overview
 

Overview


The C.B. project has a short timeline: eight weeks end to end, with the design deliverables needed by week five. 

It is also, by nature, massive in scope. Entire platforms are built around this sort of feature. Plus, I'll be creating a new design system at the same time.
Continue
 

Research


Competing platforms
I explore the eco-systems of Teachable & Kajabi, paying careful attention to the core features, interface copy, & workflows.

User interviews
With the help of the sales team, I interview several users, developing use-case archetypes & prioritized requirements.

Design system research
I want the new design system to be clean, unobtrusive, & avoid clashing with users' site styles. I draw inspiration from Gooddog.
 
Course Builder Architecture

Framework


I use our research findings to map out the composition of a robust course creator, fitting each requirement into a cohesive framework.

The framework helps me segment the project into clear deliverables: the C.B. window, its major tabs and subtabs, and the student-side webpages.

The team reconvenes at this point. I walk them through the workflow, taking feedback and incorporating additional requirements. 
View in Detail Continue
 
CB Wireframes on Whimsical

Wireframing


While our backend developer uses the workflow to configure C.B.'s internal logic, I build out wireframes for each deliverable. 

Most of what I wire up during this process will make it into the first version of C.B., but early user feedback helps to refine out certain extraneous aspects.

A few key decisions are made during this process, including the idea to deploy content from the curriculum editor to the student-side webpages, rather than requiring the user to leave C.B. and make those pages in Site Builder.
View Wireframes Continue
 
XD Prototype

Design Prototype


Before we can progress any further, we're going to need that new design system.

C.B. will incorporate a broad range of interactive elements, so I am able to design an extensive component library in Adobe XD without wasting time on unused materials.

I then use the contents of the new library to translate my wireframes into an interactive XD prototype. 
Open XD Prototype Continue
 

HTML Prototype


To solidify the new design system, I create a CSS library with class definitions for each component and its various states. 

I then prototype the HTML for each C.B. screen based on the XD designs, leaving comments for the backend developer as needed.

Feedback from users who tested the XD version inform several usability changes during this step, such as clarifying the boundaries on input fields, and hiding tooltips to reduce visual noise.
Continue
 

Student Pages


Our developer connects my HTML prototypes to the system he has created on the backend. Meanwhile, I build templates for the student-side pages using Wavoto's Site Builder. 

The templates are configured to obey "My Brand" — a product I built in 2019 which uses a separate CSS library to automatically adjust website content to match a user's selected styles. 
Continue
 

User Tests


We have one of our clients put C.B. through a stress test: first, by creating a course of her own, then by sharing that course to members of her team.

There are a few stumbling points. One example is the partition between Units and Lessons (not all courses have distinct Units). We adjust accordingly, making Units an optional feature.
Continue
 

Refinements


Course Builder is currently in closed beta. So far, most of the refinements we've made have been on the frontend pages. 

For example, we recently modified how the overview cards for units and lessons respond to different amounts of text input.

Since the soft launch, I have extrapolated C.B.'s CSS library for application across our other products. This process remains ongoing.

Currently, I am formalizing the documentation for Wavoto's new design system in Figma.
Return to Portfolio