Bluescrolls: A Notetaking Webapp

Catching up on a heavy courseload with Bluescrolls

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 allow students to catch up with large amounts of content, late into the semester?

Most University students feel motivated and optimistic at the start of the semester.

According to a study by C. J. Vosloo and colleagues in Psychological Science, individuals are more likely to start working toward their goals at the beginning of a new period, feeling energized and hopeful (Vosloo et al., 2014).

Students generally put more effort into their coursework at the start of the semester (Eccles, J.S., et al., 2005).

However, as the semester progresses, it can be difficult to keep up with missed content.

The snowball effect means that missed work makes it harder to understand later material, increasing the difficulty of catching up. A study found that students who fall behind in their coursework early on are more likely to experience gaps in understanding, which makes it harder to stay on track (Kahu, 2013).

This is unfortunately common as motivation declines across the semester.

This means that by the end of semester, students find it impossible to catch up.

When students fall behind and cannot catch up on material, they experience cognitive overload and their working memory becomes saturated (Sweller, 1988).

As a result, the brain struggles to retain or process additional material, which leads students to disengage. By the end of the semester, many students have given up on performing well in exams.

THE SOLUTION

A study webapp that integrates both diagramming and notetaking features to allow students to grasp the big picture and small details.

Create mindmaps, beautifully and fast.

Inspiring users to help themselves even when feeling unmotivated through a guided 4 steps going from easy to difficult in level. Contextialising education so that it's relevant.

Add detailed notes to each bubble.

Inspiring users to help themselves even when feeling unmotivated through a guided 4 steps going from easy to difficult in level. Contextialising education so that it's relevant.

Add widgets to enhance visualisation.

Inspiring users to help themselves even when feeling unmotivated through a guided 4 steps going from easy to difficult in level. Contextialising education so that it's relevant.

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 first
✦ It is hard and unmotivating
✦ Not knowing where to start

1.2 Research
findings

KEY INSIGHTS

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 = 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

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.

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

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?

📌 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.

2. Defining
the problem

2.1 Who am I
designing for?

USER ARCHETYPES

I categorized my interviewees based on demographic and study habits, identifying interviewees whose similar traits could be synthesised into a few key personas. They were categorised based on how overwhelmed they feel by study features such as:

✦ Constant studiers vs last minute crammers
✦ Undervalues self explanation and testing vs values self explanation and testing
✦ Can function when overwhelmed vs breaks down when overwhelmed
✦ Lots of time to study throughout the semester vs not much time to study throughout the semester

2nd Year • BArts Student • 19

Rushed Ron -
The Busy Optimist

I just wish I had more time to really take in the content, rather than just studying for the sake of exams.

Ron is a 19-year-old student who struggles with finding time to study between his 3 day a week job and looking after his siblings. Despite this, he is genuinely interested in his degree and wants to do well.

4th Year • LLB Student • 21

Studious Sue -
The Straight A's

I try my best to keep up with my studies, but sometimes there's just too much to do, I have to cut some corners.

Sue is a 21 year old student who studies at least 2 hours a day and is gunning for a clerkship at a large law firm. She wishes there was a way to study more effectively as sometimes she feels she isn't digesting information.

2nd Year • BArts • 19

Chill Chris -
The Laid Back Learner

When I look at a textbook and think about writing notes, I feel so demotivated. I wish there was another way...

Chris is a 24 year old student who doesn't prioritise study. He wants to pass his exams so he doesn't have to retake them but doesn't want to spend more time than necessary going over content. He prefers learning in novel ways.

EMPATHY MAPPING, PERSONAS AND JOURNEY MAPS

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.

3. Designing
the solution

3.1 Low Fidelity Sketches and First Round Iterations

EARLY LO-FI MOCKUPS & 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 Mid Fidelity Prototyping and Second Round Iterations

USER TESTING OF MID FIDELITY PROTOYPES

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.

ITERATIONS BASED ON USER 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 three iterations I made:

3.3 High Fidelity Interactive Prototypes and Third Round Iterations

SECOND ROUND OF USER TESTING

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:

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

LEARNING 1

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.

LEARNING 2

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.

LEARNING 3

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!
👀

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