Thanks for reading! Ready for the next one?
You’ve just read my first ever design project, now follow it up with the latest one!
Trials.ai: Revolutionising clinical trials
Creating an end to end design for clinical teams to speed through clinical trials.
So glad to have you here <3
Goodnotes Custom Toolbars: Personalizing the digital notetaking experience
Designing a custom toolbar feature for the Goodnotes app for users to have a more individualized note-taking experience.
TEAM
Just me :)
ROLE
Product Designer
TIMELINE
Sept - Dec 2024 (4 months)
SKILLS AND TOOLS
Product thinking
User Research
Figma
Notion
CONTEXT
What is Goodnotes?
Goodnotes is a beloved note taking app, that translates the physical note taking experience into a digital one. It was named Apple's 2022 iPad app of the year!
THE PROBLEM
So what’s not “Good” in “Goodnotes”?
My initial hypothesis was that users wanted an efficient way to share notes with each other. The people problem I concocted was therefore:
When college students want to collaborate and create better notes together, but they cannot do that well because
It was inconvenient to pass someone your notes when you were currently using them,
Sharing is not easy when not in the same vicinity.
GoodNotes does have some features for sharing, like allowing users to collaborate in real time or add notes on separate devices. But these features weren’t very popular or easy to use. So I conducted user research to find out how users are thinking about the problem and the app in general.
USER RESEARCH
What I learned from user research.
Once I started talking to users, though, my hypothesis was disproved. Sharing wasn’t the real problem — what people actually wanted was personalization. Note-taking, it turns out, is a super personal process, and everyone has their own style. This is what users had to say:
GATHERING INSIGHTS
What do the "texts" above from the users mean?
Here are the insights I gathered from doing user interviews and based on these quotes
🙅🏼♀️
Sharing is not caring
Users did not care to share, despite it being my initial hypothesis, rather note taking was a deeply personal process.
🤷🏼♂️
I don’t care
Users didn’t care for the tools on the toolbar they didn’t use, in fact, they were ignored, and users did not know what the tools were even for.
😣
I’m overwhelmed
Users did not use all the tools at their disposal, leading to feelings of being overwhelmed by the amount of tools available to them.
VALIDATING FINDINGS
The shift to personalization.
After reflecting on these insights, I pivoted to focus on personalization. By giving users more control over how the app looks and works, Goodnotes could feel like it’s built for each person’s workflow. It’s not about forcing features they don’t need, rather it’s about making note-taking feel as personal and natural as possible.
THE SOLUTION
A glimpse of the final solution: Custom toolbars.
My solution is to add premade toolbars for different use cases, so users can quickly grab the tools they need and make Goodnotes feel more customized.
Create a new Notebook
Change notebook in the middle of use
Change template from the toolbar itself
BRAINSTORMING
Diverse voices in brainstorming.
After having this general understanding, I had a brainstorming session with two friends, Funmi and Jamayne, a marketing + hospitality major and an electrical and computer engineering major, to come up with ideas of how we could address the problem, based on this new people problem.
Thank you for your help friends!
Customising layout, simplifying organisation, and tapping into the user’s emotional experience while using the app are one of the few ways we thought of to help users feel less overwhelmed and more in control of the notetaking process.
Then we formed solution spaces; that were personalisation, integrating AI and perhaps gamifying the note-taking process.
brainstorming problem and solution spaces
SWOT ANALYSIS
What kind of features would address this problem?
Customising the toolbar and layout
This solution consisted of changing the appearance of the toolbar, together with its position on the screen. Users would be able to add tools they need and remove tools that clutter their space. They would also be able to select premade toolbars according to exactly what they are going to use Goodnotes for.
SWOT Analysis for Customizing Toolbar and Layout
Resizing Features Based on Use
The toolbar would resize tools based on usage, so frequently used tools like the pen appear larger and easier to tap than less-used ones like the laser.
SWOT Analysis for Resizing Feature Based on use
I decided to move forward with feature #1. Customizing toolbar and Layout because of the overwhelming evidence I got from user interviews, for the need of a personalised Goodnotes experience.
This made me confident in the feature I sought to design. I went on to see how this feature fits in the current GoodNotes ecosystem:
INFORMATION ARCHITECTURE
Where should I place this feature?
I made an information hierarchy diagram to explore different options of where the new personalised toolbar feature would fit (with pros and cons of each)
Information Architecture Diagram exploring different positions for this new feature
LOW-FIDELITY SKETCHES
Rough sketches of the idea.
I then made low fidelity sketches to get arough idea of what the feature looks like and how it operates.
Lofi sketches showing 2 flows of the new feature
ITERATIVE DESIGN PROCESS
Oops! An obstacle along the way…
During my mid-fidelity exploration, I realised that Goodnotes 6 had already implemented a feature allowing users to add and remove tools from the toolbar, even though I had been working on Goodnotes 5.
Goodnotes 5 (left) versus Goodnotes 6 (right)
This validated my assumption that users value flexibility in customizing their toolbars. However, this feature still didn’t fully address the need for deeper personalisation — toolbars tailored to specific use cases, like drawing or annotating, to better align with users’ individual workflows and preferences.
Combining these two approaches could be incredibly effective. Users could select pre-made toolbar templates designed for specific tasks, making the process faster and easier. At the same time, they’d still have the ability to customize and add tools as needed, thanks to the flexibility already introduced in Goodnotes 6. This integration would offer a more intuitive and user-friendly experience.
MID FIDELITY EXPLORATIONS AND DESIGN CHOICES
Some design choices I made.
This is a bird’s eye view of mid-fi explorations. The ones with stars are the ones I decided to move forward with given the overwhelming number of pros of implementing them.
Weighing pros and cons of different entry points and flows.
Below is a close up of the design choices I made:
Selection of the entire toolbar vs individual tools.
I first considered letting users pick individual tools for full personalization, but decided against it since Goodnotes 6 already has that feature and it would be repetitive.
Also it slows down the quick process of choosing a notebook and cover—users think more easily about what they’re doing (e.g., reading) than the exact tools they’ll need (e.g., a laser pointer).
Weighing pros and cons of selecting individual tools versus entire toolbars
Order of the customised toolbars.
Due to the default effect, users are likely to stick to defaults since they are easier and closer to use. Therefore, I decided to go with option B since this will encourage users to explore the new feature, customised toolbars, as opposed to using the “default toolbar” like usual.
Weighing pros and cons of having a specific type of custom toolbar as the "default" selection
Designing for forgiveness and accessibility.
This design principle lets users succeed in accomplishing their task without the need for perfect accuracy.
On the right the users have room to make errors. On the left, the design is more rigid and does not allow user to progress because of an error. Therefore I decided to move forward with the design on the right.
The right design is also accessible since it provides users a large surface area to click to make their selection.
Making designs account for human errror and accessibility
FINAL FLOWS
Flow 1: Creating a new notebook.
In this flow users create a new notebook like they usually do, and then pick a toolbar template as they pick a notebook template.
Final Hi Fidelity Flows for creating a new notebook
Flow 2: Changing a notebook template in the middle of use.
Sometimes user may need to change templates in the middle of their work, when the notebook is already opened. This specific flow gives users a new entry point, and they are able to click the “change template” button to change both the notebook template they are are currently using, and a toolbar template under the same menu.
Final Hi Fidelity Flows for changing notebook and toolbar template mid use
Flow 3: Choosing another toolbar from the toolbar itself.
In this flow users are able to change a toolbar template right from the toolbar itself, which gives users a new entry point. Then users choose “Toolbar Customization” button, and scroll down to the “Choose Another Toolbar” in blue font, and are able to see other toolbar templates and select them.
Final Hi Fidelity Flows for choosing another toolbar template from the toolbar
Putting all of this together...
Create a new Notebook and choose toolbar
Change notebook in the middle of use
Change template from the toolbar itself
REFLECTIONS
What my first ever design project taught me.
Just like life is a rollercoaster, design is one too.
When I realized Goodnotes already had the feature I had in mind, I was pretty discouraged at first. But I’ve learned that this is a normal part of the design process, and I’m actually grateful I got to experience it so early on in my first project.
Always doubt your assumptions
I came into this project with my own assumptions on what the user problem may be. And this got debunked. I have also learnt that this is part of the process, just in the same way scientific experiments have hypothesis that can at the end fail to be supported, so does design, which just means I need to be asking the right questions.
You are not your user...
Even though I use Goodnotes, I really had to step out of “Justina” and step into the shoes of a ‘College Student that uses Goodnotes to take notes”. This helps with fulfilling the previous point that I made, that I am able to make less assumptions if It is not me I’m designing for.
Massive thank you to the staff at Cornell’s Intro to Digital Product Design course for all your support.
