Bluescrolls: A Notetaking Webapp

Helping product managers and engineers present information visually, more uniformly and efficiently

My teammate, a developer, and I, a designer, teamed up to conceptualise a webapp that would allow students to organise their university content in an intuitive manner for better learning.

Team

Me + 1 developer

Tools

Figma, Miro, Canva

Role

End to end product designer &user researcher.

Skills

User research, concept ideation, interaction design, prototyping, user testing

THE PROBLEM

How can we help managers and engineers to visually document systems, teams and processes more uniformly, efficiently and accessibly?

Current mindmapping softwares are clunky and inconsistent.

To make finalised mindmaps, offices often use Draw.io, Miro or Visio. These mindmapping softwares are not optimised for quickly generating presentable mindmaps, meaning company mindmaps often look inconsistent across employees and are time consuming to make.

Current organisational wikis are clunky and inconsistent.

Many large companies use wikis to organise their teams and for onboarding, but these are inconsistent across teams and in practice often don't offer a centrilised source of essential information, documents and roles as they fail to get updated or show interactions.

Visual tools are usually used for planning or lack live elements.

Diagrams in the workplace are either for planning purposes (ie Miro, Figjam) and not meant as a finalised gospel of information, or are meant as a finalised visual documentation but are difficult to edit and function as a static PNG (ie Lucidchart, Draw.io).

THE SOLUTION

A webapp that integrates diagramming, notetaking features to allow managers and engineers to quickly visualise organisation and strategic processes.

Create flowcharts beautifully and fast

To stop the flow of inconsistent diagrams, Bluescrolls offers a streamlined flowchart maker that means process mindmaps will be uniform across all employees.

Add detailed notes to mindmaps

Bluescrolls includes a notes feature, where users can add detailed notes that open upon pressing on each element of the diagram, allowing for both a high level overview of processes and for honing in on the details in the same document.

Add widgets to enhance visualisation

Bluescrolls includes the option to include various widgets and links to external sites, documents, spreadsheets and videos to create live, updateable and interactive diagrams that more effectively allow for team organisation, onboarding and project management.

Template library to enhance direction

Bluescrolls includes high level, customisable templates sorted by use case and role to guide users how to use it, as we recognise there may be a learning curve that comes with this new software.

How did I get there?
Let's find out in this case study...

1. Discovering the problem

1.1 Research
questions

Secondary Research 🔬

My friend (a developer) was already in the midst of developing an app, the rough vision of which was a hybrid notetaking and mindmapping organisational tool. I was so enamoured by this app that I wanted to help out (haha!). Eventually we teamed up to create a more streamlined version of this vision. My role was to:

✦ Refine this rough idea and help come up with a more defined vision for the key problems this webapp would target. I needed to define the target users, the problem and use- cases.

✦ Iterate on the developer's drafts to make the process more user- centric and effective.

I began by conducting a literature review into note- taking apps and student study habits. I also conducted a quick competitive analysis comparing existing most commonly used notetaking apps. This is what I found:
‍

Primary Research 🔬

After undergoing this secondary research, I conducted the triangulation method of primary research (surveys, semi structured interviews and online ethnography) around these three questions:

✦ What study methods do students rely on, and how and why do students use these study methods?
‍
✦ What kind of negative thoughts and feelings do students have when there is too much content to digest?

✦ How does the presence of big picture vs detail oriented thinking influence the experience of studying?

Semi - structured Interviews on Zoom

The primary challenges in studying with self explanation included:
✦ Focusing on understanding
✦ It is hard and unmotivating
✦ Not knowing where to start

1.2 Research
findings

Primary Research 🔬

What did these results tell mean? I organised my notes from the triangulation of studies into an affinity diagram to find commonalities among responses.

Through my affinity diagram, I established 4 main pain points - areas students found hindered their ability to effectively study:

Too many resources correlates to less motivation

Students were often overwhelmed by the amount of content and resources (slides, readings and lectures) posted by their tutor and could not keep up with all of this. This makes it hard to be motivated to self - study.

Understanding how content fits together is difficult

Students found it difficult to catch up when new topics built on old topics, which were rarely revised by their tutors. They often felt better after knowing they at least understood broadly what would be tested.

Uses of study time

Many students placed time as a priority in studying. Participants noticed that they mostly used their study time watching lectures and writing notes, and less time organising their notes presentably or self testing.

Most vs least effective ways to study

Students suggested that actively revising, self testing and creating their own notes were helpful for studying, while copying lecture slides, regurgitating information and cramming subjects were less effective.

This led me to create a refined problem statement:

Refined Problem Statement

Students often find it difficult to begin studying consistently because content seems unapproachable, disorganised and formidable. This causes them to let content build up over the term so that they are stressed, fatigued and overwhelmed by exam periods. They don't have the energy or resources to study effectively with self explanation and practice tests.

How can we develop a tool that:
✦ Helps to organise the plethora of course materials and content so that students feel like studying is less overwhelming?
✦ Encourages various study methods, from traditional note- taking to visualisation, self testing and explanation?

However, through a series of user interviews and early prototyping sessions, it became clear that this direction had major challenges.

1.3 Redefining the
problem statement

Honing in on our issue

As detailed above, when we first began designing Bluescrolls, our goal was to create a mind mapping tool primarily aimed at students. We envisioned it as a way for them to visually organize lecture notes, manage study projects, and link diverse learning materials in one intuitive space. However, through a series of user interviews and early prototyping sessions, it became clear that this direction had major challenges.

Student needs were too diverse

Students’ needs varied dramatically depending on their subject, learning style, and personal preferences. Capturing these diverse academic workflows into a unified tool with detailed widgets and structured organization proved difficult.

We had trouble moving forward

We had difficulty coming up with a clear direction for our project, from creating templates to envisioning how students would use Bluescrolls in a non idiosyncratic way. We felt we risked creating a product that felt either too complicated or too narrow for them.

Instead, what emerged was a clear opportunity with business users, based on three interviewees who happened to be involved in software internships as well as being students:

✦ These interviewees expressed strong excitement over Bluescrolls' ability to structure complex processes, systems, and documents in a centralized, visual format.
‍
✦ They recognised issues with their onboarding at large tech companies such as Canva and Atlassian as documentation was scattered and overwhelming. There were no ways of getting a quick visual overview of what each team was doing.

Because of these insights, we pivoted the product focus.

Bluescrolls remains accessible to students, but our primary audience is now business professionals — managers, product owners, team leads — who require structured mind maps to coordinate projects, processes, and knowledge bases.

This shift gave us a clearer vision for feature prioritization, widget design, permission systems, and integration needs.This evolution emphasized to me the power of continuous user research, early validation, and being willing to adapt product vision based on real user needs — not assumptions.

1.4 Primary research... again!

Researching our new product focus

Based on this new direction, we engaged in some further interviewing on business professionals (students who had graduated, participated in internship roles and software engineers at Commbank, Uber and Google). We found some far more helpful evidence to corroborate our new direction and from here could more effectively scope out what our project needed to achieve, coming up with 3 main :

LEARNING 1

Engineers felt diagrams either had too much or too little information

"I was looking at the IA diagrams the other engineers had made and they were all inconsistent and either hard to follow or didn't have enough information for me to tell what was going on". - Interviewee 1

LEARNING 2

New employees found it hard to keep track of where everything was

"In my internship it was hard to find where everything was, I kept losing important documents and worrying about being confused. It would have been nice for everything to be in one spot.". - Interviewee 2

LEARNING 3

Managers felt wikis did not offer the high level overviews they wanted

"I just wanted a clear overview of what the teams did, but it was so hard to figure that out. The wikis were different for every team and I didn't have time to trawl through them to find what I wanted" - Interviewee 3

THE NEW PROBLEM QUESTION

How can we help managers, engineers and new employees to visually present systems and processes more uniformly and efficiently?

3. Defining the problem

3.1 Who am I
designing for?

Second round of primary research

I categorized my interviewees based on their main use case for diagrams, identifying interviewees whose similar traits could be synthesised into a few key personas. They were categorised based on their use case for diagrams, including:

✦ How live they required diagrams to be
✦ How detailed they required diagrams to be
✦ How they would use diagrams - to represent systems, processes or people
‍

PRODUCT MANAGER

Managing Maria

Sophia is 34, works at a fast-growing SaaS company, and manages several product development teams. She juggles strategy, backlog grooming, feature requests, customer feedback, and cross-team processes.

SOFTWARE ENGINEER

Executing Edward

Edward, 42, leads a small but fast-moving engineering team. He's responsible for tech architecture, security processes, and aligning technical execution with business goals.

OPERATIONAL LEAD

Operational Olivia

Olivia, 29, designs internal processes and manages client onboarding for a consultancy that builds custom software for enterprises. She's a systems thinker who often works across HR, sales, and delivery teams.

Journey Mapping

Borne from my personas, I created journey maps. In these, I could better understand their goals, motivations, and frustrations. This holistic perspective ensured that every decision we made was aligned with user needs.

📌 Learnings - Discovery phase

You've reached a reflection checkpoint!

Rest your eyes while you read about some key learnings I made along the way - for next time.

No need for ideation phase

Until now, I had mainly stuck to the double diamond framework. But being my friend's project, I hopped in halfway through and rather than ideating, we just needed to streamline his idea more. I realised we didn't have to follow the rules strictly.

Clearer research objective

If I'd established a clearer research objective, I feel like it would have been easier to extract my key insights from my research and create a refined problem statement more efficiently. Next time I'll consider my research questions and goals with more detail and clarity.

Teamwork makes the dreamwork

This was one of my first experiences working directly with a developer, and it was enlightening! Working side by side gave me a deeper understanding of developer processes and what they actually want from a designer, and this helped to drive my research so that I presented what was most necessary to his needs.

4. Designing the solution

Initial design changes
Template Library
Widgets
Onboarding and login

First Round Iterations

My teammate had already coded an early iteration of the note-taking app, which included tools for adding new bubbles and creating notes. I took this existing iteration of the app and began by making lo - fi recreations of these before moving on to create new features. I also conducted further research by investigating the functionality of similar apps and left many notes for him to implement.

3.2 Second Round Iterations

I tested my mid fidelity design as static frames, which users 'clicked through' while describing their thoughts, feelings and actions. The user testing involved think aloud interviews, cognitive walkthroughs and system usability scale. I condensed this data in an Affinity Map that I then transformed into an Insights Table, where I highlighted key issues users had and made some recommendations based on recurring feedback.

Based on the results (in the table above) from my low fi mockups, I made several iterations to address user feedback. I started with the issues that most detracted from my problem statement (making studying more approachable, offering an opportunity to visually organise information, encouraging self explanation). Here are two iterations I made:

3.3 Third Round Iterations

Finally - time for the transformation into interactive prototypes! This process was continuously iterative, as I tested my designs with experts (other design students) to pinpoint deviations from UX/ UI best practices and otherwise refine points that may result in user failure. After that, I conducted 5 unmoderated think- aloud tests using Loop11 software, allowing me to capture data from my target users directly. I made many iterations, including:

What did we need to make templates for?

We determined that we needed to make templates in order to guide users as to how Bluescrolls can be used. To do this we needed to go back to the drawing board and reconfirm what Bluescrolls is about.

Developing templates and a template library

I mocked up a template library and some specific templates following this discussion, which went through several iterations before even entering the testing phase.

Coming soon!

You will be able to read about the widget making process soon :)

Coming soon!

You will be able to read about the widget making process soon :)

4. Delivering
the final product.

Making a new bubble

Adding a note to a node

Toolbar

Adding Links

Adding Images

Adding Groups

Adding Widgets

6. Reflections & Learnings

📌 Reflection 2

Next time, I will...

Readying prototypes for developer handoff

This was one of the first major projects I did, and I wasn't confident with the autolayout functions of Canva yet. It was during the creation of Bluescrolls that I realised its potential - and importance when handing designs off to the developer in a live context! Next time I will create neater designs in the later iterative stages.

Design system chaos

As this project had so many intricate and interlinked parts, I found myself having inconsistencies across each new mockup. In hindsight, I should have created a robust design system and component library from the get go to implement choices consistently and with much more time efficiency. Next time I won't jump straight into designing without a vision.

Focus on one thing at a time

My teammate and I had a tendency to constantly jump from new idea to new idea without perfecting and finalising what we'd already begun. This led to a jagged workflow that required lots of revisiting of old designs to complete any of our deliverables. In future, we should discuss what needs to be done and when before innovating too far ahead!

Thanks for reading!

Some other projects for you to check out...

1. Discovering
the problem

1.1 Research
questions

SECONDARY RESEARCH

Story time:
‍A few years ago I went to my doctor to ask what I could do about my constant worry about almost every area in my life. He essentially told me that what I was experiencing was unhelpful thought patterns, handed me off a link to a trial on a website called This Way Up, and sent me on my way. I tried the website for a few sessions, but ultimately the modules were long and time consuming and I lost all motivation to continue them. I just kind of stopped using it, even though I could tell the information was probably helpful 😳

Initial findings:
It's not like those problems went away, but over time I figured out my own ways to cope. Was there a better way apps could have been used to help me back then? I set out to engage in some secondary research, through a literature review and competitive analysis - this is what I found: ‍
‍

PRIMARY RESEARCH

While my experience definitely aligned with my research, I wanted to hear of my target audience's experiences firsthand to ensure I wasn't a minority in this issue and to cater the final product toward their needs. To do so, I used the triangulation method of study, engaging in questionaires, semi structured interviews and online ethnography.

Please press on the images below to see how I conducted my research! 👀

60 responses | Age 18 - 25

20 question Questionaire on Google Forms

8 responses | Age 18 - 24

Semi - structured Interviews on Zoom

30+ Online forums

Online Ethnography on various forums

1.2 Research
findings

KEY INSIGHTS

I sorted my insights into a bottom up affinity diagram, which helped me to identify trends arising from the interviews, survey and online forums. Below is a synthesised version of the affinity diagram after grouping common bottom level insights into common points (there were originally 100+ bottom level insights that I summarised into a few key points here).

Through my affinity diagram, I established 4 main themes:

1. Causes of RNT

RNT was typically triggered by concerns around exams, work and relationships - and were more common around stressful periods like exam or internship season.

2. Motivation to change behaviour

My interviewees had trouble being motivated to change their attitudes or behaviour whilst in the RNT cycle as they did not realise they were engaging in RNT.

3. Attitude to CBT and learning

My interviewees were generally very open to meditation and CBT as interventions. Most participants did not understand what RNT was and expressed a desire to learn more, but only if it was easy to understand.

4.  Performance of Solutions

Participants were more likely to engage in interventions when they recognised their thoughts as unhelpful and when there was external pressure - i.e. when they had a prior commitment.

So in summary - students were open to mobile methods of targeting their RNT, but found it difficult to remain open to doing so when actually ruminating/ worrying, which mostly happened during stressful periods. The most effective experiences of snapping out of a RNT cycle were when they had extrinsic motivation to stop ruminating/ worrying.

These insights led me to refine my problem statement, which would inform the rest of my processes:

Refined Problem Statement

How can I make university students feel more motivated to change their attitudes while engaging in Repetitive Negative Thinking (RNT)?

📌 Learnings - Discovery phase

You've reached a reflection checkpoint!

Rest your eyes while you read about some key learnings I made along the way - for next time.

Primary research was too broad

What are the main ways university students study for an upcoming exam?

1.1.2 Secondary Research (Method)

What are the key challenges students experience when trying to learn?

1.2 Secondary Research (Results)

What are the key challenges students experience when trying to learn?

2. Concept
Ideation

2.1 Ideation methods

STORYBOARDING & DECISION MATRIXES

Using crazy 8s to rapidly generate possibilities and then reverse thinking to refine these solutions, I narrowed down my solution to 3 possible ideas, which I then analysed using a decision matrix. I ended up choosing option 1 (interactive postbox) because of its resource efficiency, permanency and customisability for people of all social comfiness.

OPTION 1

A four in one gamified wellness app

This ranked highest on accessibility, fun, feasibility and interactiveness.

OPTION 2

A VR meditation and exercise room

While this idea was fun, it was not as accessible or feasible compared to other options.

OPTION 3

A wellness plushie that sends friendly reminders

This idea was the most feasible but seemed unhuman and was tone deaf to our issue.

Discovering the Problem.

Research questions

SECONDARY RESEARCH

Our secondary research involved 20+ papers, websites and news articles around the broad topic of study methods and rates of university course completion. We found, generally, that:

Time poor students perform worse in exams 😥

Time - poor students who do not attend lectures or spend time on self - study perform worse in assessments and exams

Method of study can predict exam success 🌱

Method of study may be more important than the time spent studying. Three useful study techniques include:

  • Generating own material (ie, summarisation, self explanation).
  • Visualisation (ie, flowcharts, mindmaps and diagrams)
  • Self testing (ie, practice papers, presenting to others).

PRIMARY RESEARCH

The secondary research left unclear, from a user perspective, how often these effective methods of studying were used, whether time- poor students benefited from them particularly, or why students may not use these.

Therefore, we used the triangulation method (surveys, semi- structured interviews and online ethnography) to develop our research question and give our project more direction.

💡 Our Research Question

To understand the methods and frustrations of students when trying to understand and digest large amounts of course content in preparation for exams and assessments.

We focused on the following sub questions to draw deeper insights:

BEHAVIOURAL

✍️ Current methods of studying

What are the main ways university students study for an upcoming exam? How do these methods affect their experience of exams?

BEHAVIOURAL & ATTITUDIONAL

😖 Challenges while studying

What are the key challenges students experience when trying to learn and revise new content?

ATTITUDIONAL

👀 Attitudes to diagramming

What are university students' perspective on using a mixture of diagrams and notes for studying?

Research findings

KEY INSIGHTS

Our research yielded some interesting results. After conducting our research, we used affinity diagramming to reach a few key insights: link to affinity diagram. We noted 3 key points from our research:

CURRENT METHODS OF STUDYING

Students mainly use note taking to study ✍️

'I study by taking notes from lectures and readings on Google Docs, Onenote or Notion' - Joanna, 21, Sydney

Students mainly study using note - taking, writing notes in their own words, copying slides and teaching others. To summarise information, they often use Google Docs, Notion and ().

CHALLENGES WHILE STUDYING

Students find volume of content overwhelming 😖

'I feel confused by overwhelming amounts of course content to learn in short periods' - Online ethnographic source

Students find understanding overwhelming amounts of content the most challenging part of studying. They have particular difficulties keeping up with lectures, revising and (). This leads to stress, a sense of being overwhelmed, and less desire to study.

ATTITUDES TO DIAGRAMMING

Students find visualisation helpful but impractical 🤔

'I find visualisation useful but making diagrams is hard to integrate into my study' - John, 21, Sydney

Many students find diagramming useful even though they don't directly use it in their studying. Students may not use diagramming in their studying because they feel it is too difficult to integrate with their existing notes, there are no good free diagramming software, or they feel that creating diagrams slows them down.

These insights led us to refine our problem statement:

💡 Refined Research Question

How do we integrate a hybrid solution to visual learning and traditional notetaking into students' study experience and encourage generation of own notes and self testing/ presentation?

Defining the Problem

Who are we designing for?

USER ARCHETYPES

We analysed the experiences and demographic data of our interviewees and translated them into three personas characterised by how much time and effort they dedicate to studying. Our target users lay in the range of not studying at all, to studying almost every day. Their reasons for not studying were mostly time poorness, ranging from social events, part time job

Rushed Ron

Studies ~2 hrs / week

I want to pass but because of my job I just have no time to study often.

2nd Year • BArts • 19

Studious Sue

Studies 6+ hrs / week

I try to get HDs but there is often too much content to study for at once!

4th Year • LLB • 21

Chill Guy

Studies <1 hr / week

Study isn't a top priority, I guess. I wouldn't stay home for it.

3rd Year • BEng  • 22

Competitor analysis

OVERVIEW OF COMPETITION

After narrowing down our concept, it was time to research competitors.

Docs

Note taking tool

3rd Year • BEng  • 22

Miro

Mindmapping tool

2nd Year • BArts • 19

Notion

Hybrid tool

4th Year • LLB • 21