Nuton

THE PROBLEM

Learners today aren't short on material. They have lecture recordings, hundred-page readings, slide decks and endless articles; what they lack is a way through it. A two-hour lecture hands you everything at once and a path through none of it, so people skim, leave readings unfinished and miss more than they take in. Existing tools make it worse. Note- taking and flashcard apps each handle one piece, and the learner still has to put the pieces together and structure the material themselves. Most don't. Finding a path through the content becomes a job of its own, and that job gets in the way of learning.

ROLE

My role had two parts. On the website, I led the redesign, reworking the existing site end to end so it explained the product's value and positioning more clearly. On the app, I took the mobile and web design from zero to something shippable. Based on the research, the design had to:

• Make the input step feel effortless for any source type: PDF, video, link, audio, or plain text.
• Make the generated plan feel trustworthy and worth starting.
• Keep the learning tools (lessons, tutor, flashcards, podcast, notes, quizzes) unified under one visual language.
• Keep the time to first value short enough that the product felt like a tool, not a course.

TRANSLATING RESEARCH INTO A VISUAL DIRECTION

The research gave me a clear spine to design around: a learner drops in a source, waits briefly and gets back a structured course. My job was to give that spine a face that held up across very different moments, from a blank upload screen to a finished multi-chapter course. I pulled references from outside ed-tech, mostly editorial layouts and reading apps that handle dense content well, rather than similar products, which tend to go playful or gamified.

One tension shaped the direction. The product makes a bold promise, turning something as dense as a four-hundred-page textbook into a usable course in about a minute, and a visual language that felt too decorated would undercut that promise before a learner even saw the result.

Six tools is a lot of surface for one product, so I drafted a baseline information architecture first and used it to test whether the design decisions I had planned would hold up. The user flow has two ways in and one loop once you're there. New learners arrive with material and need a course built from it; returning learners want to pick up where they stopped. After that, it's the same cycle: read a chapter, test recall, ask the tutor when something is unclear.

For the design system, I defined the foundations as tokens first, so no raw values reach the interface. On top of those I built more than thirty components, from buttons and inputs to the pieces only Nuton needs: the flashcard, quiz, podcast player, block editor and AI tutor chat. Figma is the source of truth, tokens are generated from it into code, and every component meets WCAG 2.2 AA by default. The whole system is documented on its own site, rendered from the real component package rather than copies made for the docs.

DESIGNING THE INPUT EXPERIENCE

The input screen had to accept PDFs, slide decks, video, YouTube links, audio, articles and plain text without ever feeling like a settings panel a learner had to study first. I treated the empty state as the product's real first impression, since it's the first thing anyone sees, and designed it around one large drop target. The screen should say “bring me anything” instead of asking the learner to choose carefully. The loading and generating states needed more attention than usual because the wait is built into the product. Instead of a generic spinner, I wanted that time to feel like visible progress, with a sense that the source was being read and organized.

DESIGNING THE GENERATED PLAN

This is where the product has to earn the learner's trust, so I designed it as a reading experience first and a dashboard second. The course arrives as chapters and sections, and the hierarchy had to make that structure feel authored, not mechanically extracted. Confident chapter titles, quieter section labels and comfortable body text let the eye move from the shape of the whole course down into any single lesson. The constraint behind this screen is that the model is only as good as what it's fed. A clean textbook chapter produces a plan with real structure. A rambling lecture recording or a badly scanned PDF produces something thinner, and the model can't tell you that; it generates with the same confidence either way. I wasn't working on the generation pipeline, so I couldn't make weak output stronger, but I could stop the interface from overselling it.

Chapter weight is the clearest example. Generation doesn't distribute evenly, so one chapter arrives with real depth and the next is a single idea stretched to fill a slot. Identical rows make both look equally authoritative, and that small dishonesty costs you the user the first time they open the weak one. The metadata line under each section title does that work: reading time, card count and quiz count, all describing what was actually generated instead of promising something up front. A section marked “14 min read, 3 cards, 1 quiz” tells the learner how much is really there.

The other decision was treating the plan as a draft, not a verdict. Generation isn't deterministic. Run the same source twice and you get two defensible structures, and the learner can't check which one is right. So instead of defending the output, the screen lets them move through it on their own terms: start anywhere, skip a chapter that isn't landing, go to the tutor when a lesson comes up short. The failure I was designing against was a learner hitting one weak chapter and giving up on the whole plan.

Spacing did a lot of the work here. Instead of packing chapters into tight, list-like rows, I gave each one room, which made a plan generated in under a minute feel considered rather than dumped onto the page.

A COHESIVE LANGUAGE ACROSS DIFFERENT TOOLS

Six tools (structured lessons, an AI tutor, flashcards, a podcast mode, quizzes and notes) is exactly where a product like this tends to fall apart visually, with each feature drifting into its own look as it gets built. I treated all six as one system from the start. The same cards, buttons, headers and containers are reused everywhere, so a flashcard and a quiz question look like they come from the same family even though they serve different moments. The AI tutor was the hardest piece to place. It had to feel present and conversational without competing with the lesson beside it, so I kept it in the same visual key as the lesson, reading as part of the course rather than a chatbot bolted on.

Color and type held the six tools together. One restrained palette and type scale runs through all of them, so going from a lesson to flashcards to the podcast never feels like switching apps. Each tool still needed to be recognizable at a glance, so each one gets a single distinguishing icon and a light accent, always inside the shared visual language.

OUTCOME

Since launch, more than 150,000 learners have used Nuton to generate over 3,000,000 structured lessons, and the feedback keeps coming back to how simple it is. The project was personal before it was professional. I'd just finished a master's degree, so I knew what falling behind felt like, and I kept hearing the same thing from classmates buried under reading they couldn't get through. Nuton was taking on a problem I was living, and I wanted to help build the thing I needed. The goal is for millions of students around the world to use it as a learning companion, and I think that's reachable in the next two to three years. If you're a student, or anyone who wants a simpler way to study, give Nuton a try.