Scribble

Scribble brought handwritten notes into Genio Notes so students could draw diagrams, formulas and worked problems directly into the recording timeline instead of leaving the product for another tool.

Type: Feature
Project: Genio Notes
Role: Senior UX Designer, sole designer across concept, cross-device model, accessibility, beta feedback, discoverability and delivery
Area: Handwritten note capture, STEM learning, mobile-first design and cross-device parity
Status: Beta March 2024, launched June 2024

Snapshot

Problem: Students on STEM courses could not represent everything they were being taught with typed notes alone. Diagrams, formulas and live worked problems often pushed them into separate tools, breaking the link back to the recording.
Users: Students receiving study support, particularly those on STEM courses, capturing lectures and seminars on phone, tablet and laptop.
Goal: Let students capture handwritten and drawn notes inside Genio, timestamped against the recording like every other note, without building a separate drawing product.
Outcome: Launched to web and mobile on 5 June 2024. By the first full semester, 868 learners across 360 institutions had posted 7,750 scribbles, and the pattern became the reference point for later annotation work.

Short on time? Skip to the ending

Questions driving the project

What I needed to understand

What were students trying to capture that text could not hold?
Where in the note-taking flow did the need to draw appear?
What did students lose when they switched to paper, Notability or OneNote mid-lecture?
What did handwriting need to do to belong inside a timestamped note feed?
What happened to a scribble after the lecture ended?

What I needed to validate

Would one interaction model work across phone, tablet and desktop?
Was drawing usable enough with a finger, or was this mostly a stylus feature?
Could a visual feature still meet the product accessibility standard?
Would students find the feature if it lived inside an already crowded note composer?

Scribble preview showing handwritten STEM notes and drawings captured inside Genio Notes.

Challenge

01 / Student gap

Typed notes could not capture diagrams, formulas or worked problems in the moment they were taught.

The need for handwriting had been known for a long time, but the product was built around typed, timestamped note cards.

Students were already leaving Genio to draw diagrams, formulas and worked answers elsewhere, then losing the connection back to the recording.

The design challenge was to make handwriting feel native to Genio Notes rather than a separate drawing app bolted on the side.

It also had to work across phone, tablet and desktop, sit on top of a third-party canvas, and remain defensible for accessibility even though the feature was inherently visual.

Research

Methods

Synthesis of existing student and support-team feedback
Naming study with the wider team
On-device testing of a live branch across phone and tablet
Beta feedback triage through Feature Preview with STEM customers
Pendo analytics specified before build and monitored during beta
Ballpark validation of discoverability designs

Key insights

Students were not asking for a full whiteboard. They needed to capture one thing they could not type, then carry on.
Handwriting appeared mid-lecture under time pressure, so every extra step increased the chance of losing the note.
Some students wanted to post one scribble and immediately start the next, especially in maths-heavy sessions.
Stylus and finger input behaved differently, and default stroke weight mattered more than expected.
Students expected to draw on mobile and review on web without thinking about device boundaries.
Discoverability became the adoption ceiling because the feature was initially hidden inside a collapsible mobile menu.
After lectures, some students returned to neaten or extend their scribbles, making handwriting part of review as well as capture.

Hypotheses

If a scribble behaves like any other card in the feed, students will treat it as part of their notes rather than a separate artefact.
If the canvas is large and zoomable, students will not need to decide how much space they need before they start drawing.
If card options are visible rather than hidden behind a menu, students will reach the canvas faster and discover that it exists.
If mobile and desktop ship together, students will understand handwriting as a Genio Notes feature rather than a phone-only feature.

Product direction

Make handwriting a note card, timestamped and placed in the feed with everything else.
Use one interface across devices, with device-specific tweaks rather than separate models.
Design for the moment of capture first and refinement second.
Treat accessibility as a design requirement of a visual feature, not an exception.
Instrument the feature from the start so adoption questions could be answered from day one.
Treat discoverability as a design problem, not a launch communications problem.

Core flows

Scribble as a card

A standalone drawing canvas would have created artefacts that lived outside the notes experience.

Made every scribble a card in the note feed, timestamped against the recording like typed notes.
Kept posting to the feed as the commit action so the scribble joined the timeline.
Made posted scribbles viewable across devices so a note taken on a phone still made sense on a laptop.

One interface across devices

Students move between phone, tablet and laptop, sometimes within the same week or the same lecture.

Designed a single layout with device-specific tweaks rather than separate mobile and desktop experiences.
Built resize and zoom into the model from the first concept so screen size did not define how much a student could draw.
Pushed for mobile and desktop to launch together rather than teaching students that handwriting was device-specific.

Reducing the distance to the canvas

Beta feedback showed the friction was not drawing itself, but getting to the drawing quickly enough.

Redesigned card adding so card icons were visible instead of hidden behind an extra Add Card step.
Used a prototype to respond directly to the feedback moment that exposed the issue.
Called out where the design improved access to Scribble without pretending it solved continuous scribbling completely.

Accessibility for a visual feature

A drawing canvas is difficult to make accessible, which made early accessibility decisions more important rather than less.

Raised how Scribble should announce itself to screen readers before beta rather than after launch.
Specified disabled icon treatment and offline-state copy so constraints were clear.
Tracked skip-to-canvas and stylus-mode exit paths so keyboard and assistive routes could be measured.

Honest feedback states

Small failures in beta were easy to miss, and silent failure is especially harmful in a fast lecture context.

Specified disabling send on an empty canvas rather than letting the button do nothing.
Removed click-behind-to-close while keeping Escape so accidental taps were less likely to lose work.
Kept confirmation modals out of the canvas flow unless evidence showed they were needed.
Aligned the canvas to app theme rather than patching broken theme detection locally.

Discoverability as design

Beta adoption showed that awareness was the ceiling. Students who needed Scribble had to be able to find it.

Framed discoverability as a product design problem rather than something launch messaging could fix.
Designed capture and review states that surfaced Scribble outside the hidden mobile menu.
Validated discoverability changes with Ballpark because live A/B tooling was not available.
Set the honest success condition that stronger targets needed a real general-availability baseline.

Iteration

What did not work

Waiting for a polished build before testing would have hidden the real device problems.
Assuming stylus and finger input behaved the same missed important stroke-weight and control differences.
Leaving discoverability to launch communications capped adoption.
Treating desktop as a follow-on release risked making handwriting feel like a mobile-only feature.

What changed

Tested a live branch on real devices instead of relying only on prototypes.
Redesigned card adding during beta in response to a clearly explained lecture workflow.
Changed the release plan so web and mobile launched together.
Specified empty, disabled, offline and unsaved states during beta rather than leaving them implicit.
Made discoverability its own workstream with designs and validation.

Impact

Gave STEM students a way to capture diagrams and formulas without leaving Genio mid-lecture.
Closed a named competitive gap that had been affecting customer conversations.
Created the toolbar and interaction pattern later reused for slide annotation work.
Established an analytics baseline for adoption and later handwriting-related work.

The measurable result was not the launch week, which landed during an off-peak student period. It was the first full semester, when the feature met the lectures it had been built for and usage grew more than tenfold.

The durable result was the pattern. Handwriting stopped being a separate tool and became a note type that could be reused for future annotation experiences.

Outcome

Released in beta behind Feature Preview on mobile in March 2024
Launched to web and mobile together on 5 June 2024
Reached 699 scribbles from 192 learners across 114 institutions in the first month after launch
Reached 7,750 scribbles from 868 learners across 360 institutions by the first full semester
Specified analytics events before build shipped, including assistive and keyboard paths
Created the design reference for later slide annotation work

Scribble let students draw the thing they were being taught, in the moment they were being taught it, and find it again against the recording afterwards.
The feature worked because handwriting became part of the study timeline, not a separate canvas floating outside it.

Reflection

Good research does not automatically move a business, and knowing when the commercial moment has arrived is part of the job.
Getting a real build onto real devices early was the single most useful decision.
One clearly explained beta workflow can be more valuable than a large volume of vague feedback.
Accessibility on a drawing canvas cannot be retrofitted cheaply.
Discoverability is a design problem. Building the right feature and hiding it can produce the same adoption curve as not building it.
Shipping mobile and desktop together cost time, but it protected the product model and the student expectation.
In the end, students on STEM courses could capture visual thinking inside the same learning workflow as the rest of their notes.

Back to portfolio