Lectera
A course studio for teachers. A learning path for students.
I was the only designer on a platform where teachers build and sell courses and students learn step by step, across web, adaptive, iOS and Android.
- Role
- Sole designer
- Timeline
- May 2019 — Jun 2020
- Platform
- Web · Adaptive · iOS · Android
- Tools
- Sketch, Abstract, InVision, Zeplin
- Scope
- 100+ screens · UI kit
- Team
- Axon Development Group
(01) The challenge
Lectera helps students build skills across many industries, and helps teachers create courses and earn from selling them. Every screen had two audiences.
Teachers
Creating an educational project comes wrapped in financial and organizational complexity, and it isn’t always clear how to present a course so people want it.
The business
A static roadmap wouldn’t hit the client’s targets. The product had to react quickly to changes in the market.
Students
Learners needed a path they could follow step by step, not a pile of videos.
Goals
(02) Teacher ↔ Student
Teachers build lessons from five kinds of content. Students see a path with progress on every lesson. The two screens below are the real designs, rebuilt and wired together.
Teacher · course studio
Student · learning path
Try it: add a lecture, quiz or homework in the studio, then press Publish course.
(03) Wireframes → UI
Every flow started as a wireframe. Drag across each pair to see what the structure became and what changed on the way.
What changed
- 01Sections became lessons, and each lesson got five content types: lecture, quiz, homework, glossary, case.
- 02“Submit to review” became a short checklist: add content, create the landing page, then publish or preview.
- 03Drafts are explicit: “Save as a draft” sits at the top, away from “Publish”.
(04) Responsive
For the student role, the design came in three resolutions. This frame uses the same breakpoints. Drag it.
(05) iOS & Android
The mobile apps followed Apple’s Human Interface Guidelines and Google’s Material Design recommendations.
iOS · Human Interface Guidelines
- Both phones share one state. Tap “Quality”: iOS answers with an action sheet, Android with a dialog.
Toggle the differences above ↑
Android · Material Design
The shipped screens: onboarding, sign in, courses, lessons, library and downloads.
(06) UI kit
A UI kit unified the product and sped up the work: typography, colors, buttons, badges, inputs and states.
One component, seven layers
A course card carries a lot: kind, cover, title, promise, status and four facts.
The UI kit defined every layer once, so the same card holds up on web, iOS and Android. Scroll to take it apart.
Content marketing. Sales strategy without advertising
23 sales tools without a budget: blogging, email marketing, ugc content, engagement
(07) Collaboration
I presented ideas to the client in InVision and collected feedback there, then handed off to developers on every platform.
Design
Sketch
Research, prototypes and UI, all by one designer.
Versions
Abstract
Every change versioned, so nothing gets lost between iterations.
Client review
InVision
Ideas presented to the client, feedback collected on the screens.
Handoff
Zeplin
Specs and assets for every screen, ready to build.
Build
Web · iOS · Android
One big team of developers across three platforms.
Mimecast
Turning threat noise into clear decisions.
Continue to Mimecast