CatchApp

The process of designing an app concept

A design challenge set by FutureLearn (an online learning platform) that was finished over a period of a week (while holidaying in Turkey at the same time!).

The brief

Improve the learning experience whilst learning an online course.

Looking at this brief I realised it didn’t really give much to work with in terms of a problem to solve yet. I could have easily sketched up some quick ideas, but without really being aware of what I did and didn’t know yet it would have likely just thrown up issues that somebody with a bit of experience would easily poke holes in. As a designer you need to be able to back up every decision you have made with the why — just saying “um…because I thought it’d look cool?” is not going to cut it.

From this brief I knew there were two things I needed to understand.

  1. What creates a learning experience?
  2. How do people successfully learn?

Reframing the brief

What is a learning experience and how can it be improved when doing an online course?

Reframing the brief this way took it from something broad to being:

  • Much more refined and focused
  • A better awareness of which direction I wanted to take the research in
  • Easily use as a basis for any hypothesis and concepts that came out of my research

Down the research rabbit hole

Mind mapping is a technique that I always use at the start of a project to get out of my head any connections and ideas I have about the problem and an understanding of what areas I could start researching as well.

Mind mapping out all the ideas and possibilities I can think of that relate to a learning experience.

From conducting some in-depth desk research and finding research studies and literature I started to get a better understanding around the two questions I had.

What creates a learning experience?

  • Social interactions
  • Behaviour
  • Emotional state
  • Environment
  • Technology
  • Time

I knew I needed to incorporate each of the experiences into the concept.

How do people successfully learn?

  • Sharing and conversing with others
  • Reflecting on your own and with others
  • Finding inspiration from stories and from people
  • Having fun and enjoying the learning journey

The last two of these points were really something I wanted to explore and thought it would be a great way to inject a bit of fun into the design task as well!

So how did I begin the process? Well, glad you asked — by trying to understand an online learner.

Meet Sandra — The busy Mum

Creating an assumptive persona

Even though I did not have access to FutureLearn’s online learners for this project I still needed to have an idea in my head of who a learner may be and therefore able to design for their needs (not mine). Of course on a real-life project you would always validate your assumptive personas as you don’t want to be building something that turns out to not actually solve anything for the customer.

Sandra had two important needs to be met and some pain points that I needed to solve in this concept.

Needs

  • She wants to feel like she is still progressing with her course even when she is busy
  • She wants to feel like she has not missed out on important or interesting student online discussions

Pain points / frustrations

  • She finds online discussion boards hard to know where to start if not using regularly
  • She can get disheartened if she feels that she can’t keep up with her study schedule if busy
  • She sometimes finds it hard to grasp new concepts (especially if tired)

Now I had firmed in my mind who I was designing for I needed an overview of who was currently in the online learning space and what they were doing to help learners.

The big two players

I discovered that the two big players in the online market were Coursera and edX and so concentrated on working out if and how they may be letting down a learner like Sandra.

The question I asked myself after this analysis was “What is the big difference between FutureLearn and these other players?” The answer? An app of course! (don’t groan). FutureLearn at this stage had no app, they just had a responsive site.

Looking at this from the point of view of how Sandra learns online I thought these two particular apps weren’t really going to help her in any way as she prefers to:

  • Study for a few hours at a time
  • Use her desktop / laptop
  • Be at home so she can be uninterrupted

So if I wanted to introduce an app that improved Sandra’s learning then it was going to have to be something different to what was being offered by the competitors.

What kind of app would someone like Sandra use to help with her online learning?

A coincidental moment

One of the books I just happened to be holiday reading while in Turkey was How we learn by Benedict Carey. The book is a fantastic read on the counter intuitive ways that our brains learn and how laziness, ignorance, and distraction can actually help in the learning process…I’ll wait here while you go and order yourself a copy now.

It was while I was reading this book that I came across something called the percolation process. What is the percolation process? To quote from the book:

The process of stopping an activity after beginning it and then revisiting it at frequent intervals, which helps to improve and familiarise understanding by having concepts always “percolating” away in the subconscious.

A little light went off in my head at this stage, I realised if I could incorporate into my concept Sandra being able to revisit a topic after first learning about it then it may well alleviate Sandra’s pain point of sometimes finding it hard to grasp new concepts.

The concept building blocks

I now had the building blocks of how the concept would start to come together.

The hypothesis

Presenting a “snapshot” of the most trending and interesting course related artefacts (discussions, articles, videos, tweets, etc) to an online learner will improve their learning and engagement with the course.

Telling Sandra’s story

With the building blocks of a concept formed and the creation of a hypothesis I really wanted to nail down how I thought this would play out with Sandra in a future scenario. How would it help her achieve her goals of not missing out and feeling like she’s progressing even when busy?

I have started using storyboarding methods in my process at lot recently as I find it helps to:

  • Visually form the product vision that’s in my head
  • See if it makes sense to me and show to others to to get a reality check
  • Communicate to others how people will use the product
  • Quickly get everyone on the same page and avoid different interpretations from happening

I’ve found Kevin Cheng’s book See what I mean indispensable in being able to the heart of storyboarding a vision really well and being able to get the focus the story into a maximum of eight frames for easier communication.

At that length they’re easy to consume, yet they contain enough information both for internal and external communication — Kevin Cheng

Before I even start sketching the storyboard I always make sure I know where the story is taking place, how the character is feeling, and what goal she is trying to achieve with the product. I do this by answering the following:

Environment

  • Sandra is commuting to work in the morning on the train

Mentality

  • She is concerned she may have missed things since last time logging into the course
  • Thinking about all the things she has to get done today

Motivations

  • Has she missed anything important in the student online discussions?
  • She really wants to stay involved with the course even though she is busy

External factors

  • She only has about thirty minutes on the train in the morning
  • Distractions from other train passengers

Event trigger

  • Sandra’s been busy for the last few nights marking student exams and wants a quick catchup on what has been happening in her course

Sandra’s scenario

Nothing like a good comic to get everyone interested.

Content decisions

I started to collate what type of course artefacts that I could show in CatchApp and what pieces of data would be the most useful for someone wanting a quick catchup on their course.

Online course discussion

  • Most favourited comment
  • Most replied to comment
  • Favourite or reply to comment

Articles / videos

  • Course sections most read / watched or favourited
  • Other learners recommendations
  • Teacher recommended articles / videos

Motivational

  • Quote to inspire learning
  • Study tips
  • Course progression
  • “Pat on the back” content form reaching particular milestones

Twitter

  • Course hash tagged tweets

Notifications

  • Gentle pushes for set study times

The modularised flow

Now that I had an idea of what types of data I wanted to show for each course artefact it was time to get down to thinking how Sandra’s journey would flow.

I made each artefact type in the flow modularised so they could easily be moved around, removed, or future modules added. So for instance if it was decided to add a quiz artefact with two or three questions around the subject your studying , then this module could then be easily slotted into the flow wherever it was deemed appropriate.

The app flow concept with different modules colour coded.

Jumping on the conversational UI bandwagon

I decided to wrap the concept into a conversational UI app experience at around this point in the process taking a little inspiration from the just recently released Quartz app. I really liked how the designers had added a load of personality into the app and I wanted to inject that fun style into my concept as well.

Why a conversational UI?

This was something I wanted to try out and I thought was really a great opportunity to implement some personality into the app of fun, helpfulness, and motivating. Other reasons to to go in this direction were:

  • Use of humanising friendly language
  • Mobile texting environment is something just about everyone is familiar with so easy uptake for most mainstream users
  • Use of emoji’s to convey a message
  • Ability to introduce other module types easily in the future

I also played around with FutureLearn’s logo to come up with a friendly looking chatbot (or FutureBot as I dubbed him) that could be used in a messenger-style stream and I also sketched a few of the ways the CatchApp content could look.

Sandra’s trip through the app

For the mockup of the UI I used a card based system within the typical messaging flow.

So how does CatchApp improve Sandra’s learning experience?

It can be summed up like this:

  1. Provides a quick “snapshot” of the trending discussions, articles, tweets, etc from her course
  2. Helps her to learn better (through the percolation process)
  3. It gently motivates her to complete the course — as she never feels she is “missing out” on something important and becoming less engaged.

Reflection on the process

I always have a lot of fun with these design challenges, though there are a few really important things that are missing from it. Notably communication with a team containing various disciplines and getting their input into the process, not being familiar with the customers I am designing the solution for, and bringing a load of my own assumptions to the table. Being able to run my own product design process within a limited time also really helps put your product design process to the test and allows you to learn and try new things that you have always wanted to tryout as well.

I don’t work for or represent FutureLearn. I’m just a designer who likes to share what I’ve done with others — any critique or positivity most welcome :)