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

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

A closer look.

Explore the screens. Select an image to view it full size.

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

TeachKit · 1 / 40

TeachKit course builder, desktop, light mode

The lesson editor brings video, text, action items, links, and downloads together. Light mode.

The rationale

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.

Keep exploring

Additional reading

More of the thinking that shaped TeachKit.