I designed two apps from sketch to clickable prototype on live broadcasts, as a six-time guest host on a design software company's show.

On the company's live show, I taught my whole design process while I worked: a definition of the work, a persona, maps, sketches, and finished screens in the company's prototyping tool. In 2016 I built Aha Moments, an app of design thinking exercises. In 2017 I designed and tested a sketchnoting app, a library of hand-drawn icons that helps sketchnoters learn from each other.

See prototype

  • Client

    A design software company

    I changed names and details to respect my nondisclosure agreements.

  • My role

    Guest host and product designer

  • Focus

    Teaching product research and design live, from sketch to prototype

  • Result

    Invited back as a guest host six times

No safety net

The company wanted designers to watch a real process in its new prototyping tool, start to finish, in real time.

I first joined the show in 2016 as a guest at the launch of the company's new prototyping tool, where I showed how low-fidelity design comes before polish. Viewers asked questions in the chat as I worked, so every explanation had to be clear the first time and every screen had to come together on camera.

I made the teaching material and the demonstration the same thing. In my 2016 series, The World of Experience Design, I built my slides inside the prototyping tool, so each slide showed a feature of the tool while it taught a step of the process. Each series ended with a clickable product for viewers to try.

How the sessions went

Across two series, I taught the steps I follow on a real project, in the same order.

The 2016 series moved from words to a person to maps to screens. The 2017 series moved from sketches to a style to reusable parts and testing. Click or tap a card to turn it over.

Two apps, one way of working

I designed products I understood from the inside, so viewers could watch real decisions instead of placeholders.

Aha Moments began as my own deck of design thinking cards. Each card names a quality, such as craftsmanship or honest humor, and leads a person through a timed set of short exercises. The sketchnoting app came from the same love of drawing to think, and the app gives sketchnoters a shared library of icons they can learn in a few strokes.

Both apps raised the questions every product team faces. Viewers watched me decide what a stranger can see before signing up, how a person learns something new in small steps, and how people with the same craft find and follow each other.

  • In the sketchnoting app, every icon shows how to draw the icon in two or three strokes.
  • A sketchnoter can save favorite icons to a personal sketchbook for practice.
  • Sketchnoters can follow each other, so new icons from people they admire show up first.
  • In Aha Moments, each exercise lists its supplies and total time before the first step begins.
  • Each Aha Moments step has its own timer, so a busy person can stop between steps and come back later.

In my words

Lo-fi design is less about the color and more about the shape.

Ashley KarrQuoted in Thinking Design on Medium, 2016

Try it yourself

Try both apps I designed on the show, starting with the sketchnoting app.

I rebuilt both prototypes in a current style, with AI writing the code from my designs. Aha Moments comes from my original 2016 screens, and the exercise text comes from my own Craftsmanship card. The sketchnoting app follows the concept and flow I designed in 2017. The icons, members, and comments are sample data.

Things to try

  1. Search the library or choose a group, then open an icon and choose Draw it for me.
  2. Save a few icons, then open My sketchbook to see them collected.
  3. Open Community and follow a sketchnoter whose style you like.
  4. Switch to Aha Moments, choose Start free, and press Create account with the form empty to see the error messages.
  5. Create an account, open Craftsmanship, and work through the steps to post your work.
The kit behind it

Each app got a palette that kept attention on the drawing.

Aha Moments uses black bars, a geometric sans serif, a high-contrast serif for reading, and a soft gold for the one action that matters. The sketchnoting app uses warm paper, ink lines, and one marker blue, so the hand-drawn icons stay the star.

Color

  • Ink#111111Headings, body text, icon lines, and the Aha Moments top bar and exercise hero.
  • Paper#FBF8F2The sketchnoting app's page background and the dotted drawing canvas.
  • Marker blue#1F4FD8The sketchnoting app's primary buttons, current tab, and saved marks, always with white text.
  • Highlighter#FFE27AThe current drawing step and the sketchnoter avatars, always with ink on top.
  • Aha gold#F2C46BThe Aha Moments primary button and active step marker, always with ink text.
  • Linen#F4F1EAAha Moments card footers, the supplies panel, and the app switcher.
  • Alert red#B3261EField borders and error messages, always paired with words.

Type

  • Sketchnoting app

    Hand-drawn icons for your next sketchnote

    Inter Tight

  • Aha Moments headings

    Aha Moments

    Jost

  • Aha Moments reading text

    With the care of a master craftsman, write your name.

    Libre Bodoni

Components

  • Icon tile

    A hand-drawn icon, its name, and who drew it sit on a white tile, and a small blue mark shows when the icon is saved.

  • Drawing canvas

    The icon draws itself one stroke at a time on dotted paper, beside numbered steps, so a sketchnoter learns the order as well as the shape.

  • Step timer

    Each Aha Moments step shows its own countdown with Start, Pause, and Reset buttons, so a person can work at their own pace.

  • Flow map

    A drawer in Aha Moments shows the user flow with the current screen highlighted, the same diagram I drew for viewers before I designed any screen.

Principles

  • Test the shape of a design before you choose any color.
  • Show the whole product as a map before you design a single button.
  • Tell people what they need and how long a task takes before they begin.
  • Name every screen and part as you go, so the file is ready to hand over.
What it led to

6

appearances as a guest host on the company's live show

What changed for people

The company kept inviting me back, and the series still shape how I teach.

A live show has no conversion funnel, so the results are the sessions themselves and what came after. Click or tap a card to turn it over.

Watch the sessions

The 2017 series is still online, so you can watch me design the sketchnoting app.

Where this goes

I still teach the way I taught on that broadcast.

My classes on AI-native product research and design walk students from a clear definition to a real person, a map, and a working prototype, in that order. If your team or your students would benefit from a live, hands-on session, I would be glad to talk with you about one.

Still curious?

There is plenty more where this came from.

Names, brands, and data in my case studies are changed to protect my clients.

See all case studies
Connect

Tell me about your project.

Tell me a little about it on my contact form, and a real person will get back to you soon.

Get in touch