All examples

TeachKit

An action-first learning platform, redesigned from the marketing site to the lesson workspace.

TeachKit turns the videos creators already make into simple, action-driven courses. The redesigned app brings course creation, student management, and a focused lesson player into a shared interface with light and dark modes, while the new marketing site shows how it all works.

Visit TeachKit(opens in a new tab)

My Role in this Project

  • Product strategy and planning
  • User flows and wireframing
  • Marketing site and app redesign
  • Responsive UX and light/dark interface design
  • Prototypes and mockups
  • Full-stack implementation

Technologies Used

  • Next.js and React
  • TypeScript
  • Tailwind CSS
  • PostgreSQL
  • Stripe integrations

The Impact

  • A focused course-building workspace
  • Action-first student progress
  • Simpler creator workflows
  • Audience ownership
  • Light and dark modes across the app

Less school. More learning.

TeachKit began with a simple frustration: most online courses are digital versions of school. Watch a long lesson, collect a stack of PDFs, answer a quiz, and call it learning. But remembering which button lives in which menu is not the same as being able to make something. I wanted a platform built around the moment information becomes useful: when a person puts it to work.

The best learning experiences I have had never felt like studying for a test. Someone showed me how to do something, I tried it, I got it wrong, and I tried again. That pattern is so ordinary that we overlook how powerful it is. TeachKit makes that the structure of every lesson: a clear video, a focused set of actions, and visible progress toward an outcome.

That meant being intentionally opinionated about what not to build. There are no quizzes simply because quizzes are easy to add. Downloads have to help the student move, not pad a sales page with more “value.” The goal is not to keep someone inside a course for as long as possible. It is to help them get from not knowing to doing, with as little friction as possible.

The same simplicity matters for the teacher. Creating a course should not require stitching together a page builder, video host, payment tool, email form, and progress tracker before anyone can learn. TeachKit turns course information into a useful landing page, organizes the lessons, and handles the repetitive machinery so the instructor can focus on the part only they can provide: their knowledge and guidance.

The redesign carries that idea through the whole experience. Teachers have a workspace for their curriculum, lesson content, and action items, with course settings close at hand. Students get a lesson player that keeps the curriculum and next step in view. Light and dark modes carry the same hierarchy across desktop and phone layouts, and the marketing site gives those workflows room to explain themselves.

The supporting tools matter, too: registration windows, Kit tags, Stripe products, student access, and reviews all belong to the same course workflow. The screenshots here use a fictional creative-practice class, sample students, and demonstration figures so I can show those tools in context without exposing anyone’s account.

I also built TeachKit because creators need a better relationship with the audiences they earn. Social platforms are wonderful at discovery, but a following is still rented land. A free course can turn a passing view into a real learning relationship, an email connection, and an audience the creator can reach without asking an algorithm for permission.

Ultimately, TeachKit is an argument for less stuff and more transformation. A good course does not need to resemble a classroom or arrive with a digital mountain of worksheets. It needs a person with something worth teaching, a learner willing to practice, and a path clear enough to connect the two. Everything in the product is meant to make that path shorter.

A closer look.

TeachKit course builder, desktop, light mode
The lesson editor brings video, text, action items, links, and downloads together. Light mode.
TeachKit course builder, desktop, dark mode
The lesson editor brings video, text, action items, links, and downloads together. Dark mode.
TeachKit lesson player, desktop, light mode
The lesson, curriculum, and next step stay together. Lesson media is an offline demonstration. Light mode.
TeachKit lesson player, desktop, dark mode
The lesson, curriculum, and next step stay together. Lesson media is an offline demonstration. Dark mode.
TeachKit course builder, mobile, light mode
The lesson editor brings video, text, action items, links, and downloads together. Light mode.
TeachKit course builder, mobile, dark mode
The lesson editor brings video, text, action items, links, and downloads together. Dark mode.
TeachKit marketing homepage, desktop
The new marketing site introduces action-first learning.
TeachKit features overview, desktop
The features overview connects product benefits with the redesigned interface.
TeachKit teacher profile, desktop, light mode
A fictional instructor introduces their teaching approach. Light mode.
TeachKit student reviews, desktop, light mode
Teachers can review feedback and choose which reviews appear on their course page. All reviews shown are fictional. Light mode.
TeachKit creator dashboard, desktop, light mode
Published courses and works in progress sit side by side. Light mode.
TeachKit creator dashboard, desktop, dark mode
Published courses and works in progress sit side by side. Dark mode.
TeachKit student analytics, desktop, light mode
Enrollment and revenue at a glance. Figures and people are fictional demo data. Light mode.
TeachKit student access, desktop, light mode
Course access for a fictional student; no customer records are used. Light mode.
TeachKit connected services, desktop, light mode
Video hosting connections in the redesigned settings. Light mode.
TeachKit connected services, desktop, dark mode
Video hosting connections in the redesigned settings. Dark mode.
TeachKit public course page, desktop, light mode
A clear course introduction and enrollment action for the fictional creative-practice class. Light mode.
TeachKit public course page, desktop, dark mode
A clear course introduction and enrollment action for the fictional creative-practice class. Dark mode.
TeachKit sign in, desktop, light mode
A focused entry point for returning learners. Light mode.
TeachKit create an account, desktop, light mode
A simple starting point for a new learner. Light mode.
TeachKit creator dashboard, mobile, light mode
Published courses and works in progress sit side by side. Light mode.
TeachKit public course page, mobile, light mode
A clear course introduction and enrollment action for the fictional creative-practice class. Light mode.
TeachKit lesson player, mobile, light mode
The lesson, curriculum, and next step stay together. Lesson media is an offline demonstration. Light mode.
TeachKit lesson player, mobile, dark mode
The lesson, curriculum, and next step stay together. Lesson media is an offline demonstration. Dark mode.
TeachKit student analytics, mobile, light mode
Enrollment and revenue at a glance. Figures and people are fictional demo data. Light mode.
TeachKit connected services, mobile, light mode
Video hosting connections in the redesigned settings. Light mode.
TeachKit create an account, mobile, light mode
A simple starting point for a new learner. Light mode.
TeachKit marketing homepage, mobile
The new marketing site introduces action-first learning.
TeachKit features overview, mobile
The features overview connects product benefits with the redesigned interface.
TeachKit course details, desktop, light mode
Course information becomes the public landing page. Light mode.
TeachKit course instructions, desktop, light mode
A short welcome gives students a practical starting point. Light mode.
TeachKit registration window, desktop, light mode
Scheduled enrollment and a countdown are configured together. Light mode.
TeachKit kit integration, desktop, light mode
New students can join a course-specific Kit audience. Light mode.
TeachKit stripe payments, desktop, light mode
Teachers connect a Stripe product to sell their course. Light mode.
TeachKit lesson call to action, desktop, light mode
A final lesson can point students toward their next step. Light mode.
TeachKit account settings, desktop, light mode
Choose a light, dark, or system appearance. Light mode.
TeachKit account settings, desktop, dark mode
Choose a light, dark, or system appearance. Dark mode.
TeachKit course details, mobile, light mode
Course information becomes the public landing page. Light mode.
TeachKit lesson actions and resources, desktop, light mode
Practical actions, useful links, and downloads support the next step in the fictional creative-practice course. Light mode.
TeachKit course discovery, desktop
The course catalog, populated with a fictional creative-practice class.

Additional reading