Your lifelong learning companion
October - December 2017 (2 months)
UX Researcher, UI/UX Designer
Guerrilla research, competitive analysis, lightning interviews, literature review, rapid sketching & storyboarding, scenario ideation, wireframing, visual design, heuristic evaluation
Sketch, Photoshop, Illustrator, Marvel
Learning is something that often happens in the classroom but when people go into the workplace, it is hard to learn in the same way people do when they’re at school. There are plenty of resources online but people often save and never look at them or look at things and forget about them. So how can we help people to learn informally yet efficiently in their own time?
We conducted initial lightning interviews and surveys to look at how people learn. One thing we found is that most people like to learn by reading things online but an issue with lifelong learning through reading is a lack of motivation as well as time – there is no incentive to retain or grow the knowledge they gain by reading articles.
Through our research, we decided that we wanted to capitalize upon what people are already doing – reading articles online – by turning habitual article reading into a form of lifelong learning that allows users to improve their knowledge over time.
Narrowing Down the User
Our user research enabled us to narrow down on a specific type of user we wanted to design for – someone who is an avid reader, loves learning and is interested in pursuing knowledge for personal and professional reasons. Condensing these attributes into a user persona helped us focus on a niche customer segment and gave our team a clearer design goal.
We conducted further research by interviewing five individuals that fit our persona. We tried to get a sense of how our intended users behave when it comes to reading and learning. People were less likely to remember things when they read through it passively and users used a variety of methods like annotating text and creating flashcards to learn concepts in class. So how can we leverage the methods people use to learn in school to help people learn outside of school?
From our research, we established our product goals
As we needed to address information retention in lifelong learning, we knew that it was important to consider cognitive theories when coming up with our design solution.
We first looked at academic papers about the information retention, particularly the notion of the forgetting curve and how the forgetting curve can be enhanced through spaced repetition models. We found that if things are presented as they are about to be forgotten, users are more likely to learn and retain information.
The spaced repetition model can also be applied to reading through the concept of incremental reading, which suggests that users are bad at objectively determining the immediate value of anything they’re reading so they have get overinflated sense of value from reading articles. Incremental reading allows users to select interesting or useful pieces of information and review them again when in the future. This is most effective when combined with active learning techniques such as active recall and annotation.
From both our user research and secondary research, it became apparent that in order for users to retain knowledge, it was important for users to actively engage with the text as they are reading in order to glean the most important concepts from it and then review the concepts when they are at the verge of forgetting it.
In order to find a product market fit and learn how existing apps are currently solving the problem space, we conducted a competitive analysis. There are currently a variety of products that are related to the problem that we are targeting: reading apps, learning apps and knowledge organizing/bookmarking tools.
We synthesized our findings based by testing out several of these apps and determined some common features:
- Reading apps appeared to either allow users to save content to read for later or condenses text into bite-sized chunks to address the issue of time
- In learning apps, the use of flashcards was common - they tend to combine cognitive research from active recall, metacognition to spaced repetition.
- We discovered that it was possible to turn blobs of text into flashcards through natural language processing, which could make turning articles into flashcards an automated process
- Knowledge organization allow users to save and organize information via snapshots, tagging or annotation
What we found in terms of competitive analysis informed our product by allowing us to see what was possible, what are useful features as well as the type of opportunity areas were available for our product. One of these opportunity areas was to enable users to learn through reading articles.
Deciding Product Features
We knew that we wanted our product to help people learn rather than simply read articles and organize content like most apps in the market but it wouldn’t be valuable for our product to merely be a flashcard app or a knowledge organization app.
In order to decide the direction of our product, we brainstormed individually and came together to determine what worked before sketching out low fidelity prototypes and conducted user testing to find out what users considered the most valuable parts of our product to be.
We walked the user through the flow - users could save an article from the web to read later and these articles would appear in the app; they could annotate the article and everything that is annotated would be saved as flashcards by transforming the text into questions and answers. Depending on how they rate themselves during flashcard review sessions, the knowledge would be strengthened and this would be visualized on the Knowledge Graph - this provides a visualization of what they know as well as the types of topics they are most familiar with. They can keep track of their progress and knowledge retention as well as explore the Knowledge Graphs of their friends or people in certain careers.
We created a POP prototype using our sketches and had users talk aloud as they tried to use the app; the feedback we received varied from
- “I like the ability to visualize what I have learned through the Knowledge Graph but not sure how this works in terms of interconnected nodes”
- "I used to use flashcards a lot in college, I think it's the best way to remember things so it would be really helpful to answer questions on stuff I'm reading in terms of long-term knowledge retention, I think I would be anxious about knowledge fading away on the map though so maybe it can be optional?"
- "I'm always annotating my books as I'm reading so it would be cool to do the same for online articles"
From the insights we had gained, we decided to prioritize the features in our MVP that seemed to provide the most value for the user. For example, our initial idea of having people look at knowledge maps of friends and people who share similar interests/in the same career received positive feedback but this did not seem to be a must-have feature based on our user testing. The idea of knowledge fading away on the map if they don't do enough reviewing also seemed to cause anxiety for users so we decided to make it so the consequences of not reviewing were not as dire.
Use Case Scenarios
We generated exploratory scenarios for our low-fidelity prototype through storyboarding to decide how the product would work from end-to-end as well as quickly mass-validate our concept through in-class pitching.
The storyboard resonated with a lot of people because reading during transit is a common activity; some people commented that they liked using language learning apps like Duolingo when they're on their daily commute as it made them more productive. They liked that it combined aspects of read-it-later apps with learning apps because people are already reading a lot but they often forget what they read or are unable to gain real learnings from what they're reading since they skim the content rather than engage with it.
High Fidelity Prototyping
Based on an understanding of how the app would work from start to finish as well as the need to incorporate cognitive theory into the design that would address both information retention and motivation, I created high fidelity prototypes using Sketch.
Below are some examples of the screens that were created during high fidelity prototyping, many of the designs went through multiple iterations following user feedback; we used a rapid iterative process, putting the product out into the world to test and then refining it immediately.
Designing the interface for BigBrain was particularly challenging because it was important to incorporate user needs, business goals and cognitive theory into the design solution. Most of the design decisions we made were informed by user feedback but also what we saw working based on our competitive analysis and secondary research.
UsinG research to address user needs in design solution
creating a seamless reading experience for the user through visual design
Taking into account visual design principles was also particularly important as BigBrain is an app that relies heavily on text and creating a simple interface with good typography and a clear information hierarchy was necessary to create a seamless reading experience for the user
- Readability: Sans-serif typeface used for article titles and Serif typeface used for long passages of text to increase readability
- Gestalt’s principles: Similarity applied in article list and topic tags, which allowed users to recognize articles belonging to the same topic
- Feedback: Clear interaction feedback given to the user on performing tasks such as saving annotations to show that their actions have been logged
- Breadcrumbs: Progression within quiz shown through grey dots at the bottom of the flashcard - allows the user to stay informed about the amount of cards they have to go through before they are done
- Metaphors: Relied on design heuristics such as metaphors for the meta-cognition aspect of the app - 'hard', 'ok' and 'easy' buttons correspond with the shape and color of traffic lights - users can easily tell which colors are indicators of how familiar they are with the answer at the back of the card
The nature of the problem space - improving lifelong learning - meant it was necessary to address user need, cognitive research on learning as well as product market fit. Juggling these three areas was difficult as our initial challenge was too broad - we recognized that it was not feasible to improve lifelong learning in those who do not already have the habits, which is why we decided to focus on building a formal learning structure around habitual article reading. Other key takeaways were
- Due to time constraints, it was not possible to incorporate all the features that we initially wanted such as a knowledge social ecosystem so it was important to prioritize features that were considered the most valuable to our target user and focus on what the app is about - improving information retention and motivating users to learn
- It was important to validate assumptions through research as the designer is not the user and it's necessary to focus on what the user really needs rather than what we think the user needs
- I realized the importance of design heuristics when it came to the actual visual design as some things that seemed obvious to me were not necessarily obvious to the user when we did user testing so I learned to rapidly iterate based on user feedback