Prototyping
Prototyping Using
Design Thinking to create our 1st Microlearning Unit DELTA | May 2017
Prototyping What is Microlearning? In the world of 140 characters tweets, the average attention span is less than 9 seconds (McSpadden, 2015).
“
Microlearning offers highly-focused, self-contained, and bite-sized learning delivered in less than ten minutes. Microlearning platforms like Duolingo and Google’s Primer respond to millennials’ desire for highquality learning options, where the content is selfexplanatory, with minimalist design, and allows ondemand access anywhere, on any device. By unbundling the Technology@Work MOOC, its key concepts into microlearning units the Centre can prototype the delivery of just-in-time lessons, while responding quickly to emerging performance and knowledge needs in an environment of information overload. Furthermore, to reward knowledge retention and behaviour change, gamification and nudge techniques are embedded in the design of this microlearning prototype.
Microlearning offers highlyfocused, self-contained, bite-sized learning units, delivered in less than ten minutes.”
The Way Forward Throughout 2017, the ITC-ILO aims to prototype and test microlearning units as part of a newly curated Technology@Work Learning Series. Further engagement with learners (our end users) is required to ensure future microlearning prototypes are user-friendly, mobile compatible, and accessible.
2
Prototyping Rapid prototyping is the process of using several iterative, incremental, and lightweight design steps of 1) prototype, 2) review, and 3) refine and iterate to reach the desired solution. The most popular agile methodologies include scrum and lean development, which are used often in the R&D of new product and services. Design thinking was popularized by Tim Brown, the CEO of IDEO in 2008. Since then, design thinking has expanded to include it as a 1) mindset, 2) process, and 3) toolbox. Ultimately, it is a method of adaptive critical thinking to solve a problem. After consulting design thinking experts, the following two critical insights informed the creation of this prototype: 1) document every step of the design thinking process and 2) create paper prototypes that can be experienced. For the purpose of prototyping this microlearning unit, the following process was adopted:
Source: designthinkingforeducators.com/design-thinking/
3
Prototyping
Exploring the Unknown During this first phase, assume a beginner’s mindset. Question everything, be truly curious. Research, conduct interviews, and challenge assumptions.
The purpose of this second phase is to unpack and synthesize the findings in the discovery phase. The interpretation phase is critical to explicitly ask the right questions and express the problem clearly.
Evolution is the final phase. This is when one test and reflect on our prototype. Testing and reflecting allow one the chance to refine our solutions, inform the next iterations of prototypes, and assumptions. Remember design never ends. Experimentation or prototyping gets ideas into the real world. Keep prototypes rough and rapid to allow one to learn quickly and investigate possibilities. Prototypes are the most successful when people can experience and interact with them.
Then, this next phase is focused on idea generation. This is a transition from problem definition into exploring solutions for our users. Be flexible and open-minded here as this is where innovation and creativity flourish. This is also the point where divergent processes and methods become convergent. Macro Process Methods Divergent Methods that helps expand one’s exploration and understanding of the problem. This creates choices (Phase I, II, & III).
Convergent Methods that helps narrow and prioritize potential solutions. This makes choices (Phases III, IV, &V) 4
Prototyping Design thinking as a 1) mindset, 2) process, and 3) toolbox. Mindset
Process
Toolbox
The 7 Principles of Design are essential to the method’s success. Below are the principles as identified by Brenner and Uebernickel (2016).
To apply the Principles of Design, it need structure in the form of following iterative micro and macro processes.
Tools and methods that are aligned with design thinking are needed.
1. Innovation is made by humans for humans 2. Combining of divergent (unconventional thinking and brainstorming) and convergent thinking (narrowing solutions) 3. “Fail often and early” 4. Build prototypes that can be experienced 5. Test early with users 6. Design never ends (its an iterative cycle) 7. Design thinking needs a special space to create
(Re) define the Problem
Test & Learn
Understand the User & Evaluate
Micro Process
Ideate & Brainstorm
Prototype & Build
Macro Process
Divergent • Design space exploration • Critical function prototype
Convergent • Functional prototype • Final prototype
1. 2. 3. 4.
Stakeholder Mapping Empathy Mapping 5-Whys Methods Etc…
Good news, the Centre is already using design thinking tools and methods! 5
WHY: MICROLEARNING OFFERS… • • • • •
Solution aid that solves a real problem Purposeful & demand-driven learning experience Relevant information to the user Task oriented and problem specific Bite-sized scalable learning
Why? HOW DOES MICROLEARNING WORK? • • • • • • • • • •
Prototyping
Brainstorming: Microlearning
How?
Learn in micro-steps Define? The unbundling of learning Unique storytelling Highly-focused content Summary of knowledge Breaks down complexity: learning the atoms (units/action) towards a larger molecule (subject or domain/tasks) Learning tree: Each unit is a leaf connected to a branch, then the tree trunk Uses game mechanics & incentives to build habits Provides order and general rules Applicable to the real world
DEFINING MICROLEARNING… • Learning that is in digestible chunks • Acts as a memory aid • The knowledge & knowhow building block • Designed to allow sequential and incremental acquisition of knowledge • Part of a larger whole (Ex. atom molecule compound) • Focuses on work tasks or knowledge dissemination • A mindset and worldview that embraces lifelong learning 6
Exploring the Unknown
Prototyping
INSIGHTS 1: GLIMPSES INTO THE FUTURE OF LEARNING & WORK Microlearning provides us a window into the future of learning. Similar to the unbundling of work and work tasks, learning is also being unbundled and disaggregated - and microlearning is the perfect example of this. The unbundling of learning into bite-size units make microlearning a form of scalable learning that is more accessible by leveraging the Internet’s economy of scale. INSIGHTS 2: MICROLEARNING AS A NEW MODE OF DELIVERING TRAINING As our work tasks and skills evolve, life-long learning and continuous training that is conscious of resource constraints will be essential. The ubiquity of online knowledge and how-tos available on the Internet is transforming how training is delivered, as well as e-learners’ expectations. Over 3.5 billion Google searches are made daily. Due to the task and purpose-driven nature of online searches for solutions, learners expect they are able to “Google” and find on-demand answers. Instead of attending a week-long training, microlearning adapts nicely to users’ new online learning patterns, and their desire for self-directed/motivated learning that fit within their normal daily routine and habits. INSIGHTS 3: PRODUCT DEVELOPMENT & PRODUCT MARKETING The product development of the microlearning prototype and its product marketing should be parallel processes that inform each other throughout this project. The product marketing and testing should further inform product requirements and design. More on this later in this report (pg 21).
7
Exploring the Unknown
Prototyping
INQUIRIES 1: THE UNKNOWNS What is not microlearning? Does “micro� in microlearning denotes a short amount of time, less than 10 minutes? Is there a difference between providing microlearning on technical skills versus concepts like decent work? What are the limitations (like drop out rates) of and substitutes to microlearning? What might be the dangers of creating products in a vacuum (at this initiation stage)? Most importantly, how do we make a good microlearning unit? INQUIRIES 2: MICROLEARNING DESIGN REQUIREMENTS What features (registration, language, buttons, etc) should we have? What medium and interface (website, app, video, etc) best suit our users? How can we integrate content and design flow for the user? What are the features that are must-haves versus nice-to-haves? INQUIRIES 3: THE LEARNING JOURNEY What and which learning journeys can be applied most online users and scaled? What motivates or attracts learners to microlearning? How can microlearning help learners reach their learning or career goals? How can we reward and reinforce good learning behavior and habits? Lastly, how can we capture, measure and collect feedback from users to inform future prototype iterations? 8
Prototyping
Market Research
Market Research: To gain a better understanding of the microlearning landscape today, three popular microlearning mobile applications were studied. The Khan Academy, Duolingo, and Google Primer were chosen because they are household names in microlearning with each utilizing different design features suitable for their targeted audience. Google Primer is considered the gold standard in the microlearning industry, while both the Khan Academy and Duolingo dominate their respective learning domains. The below table outlines each application:
www.khanacademy.org Motto: A free, world-class education for anyone, anywhere
Motto: Free education will really change the world
Specialization: University and high school
Specialization: Language learning
Specialization: Marketing skills for Startups
Mode of Delivery: Short lectures on Youtube
Mode of Delivery: Crowdsourced language learning platform
Mode of Delivery: Mobile applications
Reach : 150 million users
Reach : NA
Reach per Month: 40 million students 2 million teachers
www.duolingo.com
www.yourprimer.com Motto: Fit a lesson in anywhere
9
Prototyping
Market Research
Market Research: The Khan Academy uses videos hosted on YouTube to deliver short lectures. In addition to the videos, progress tracking, practice exercises, and teaching tools are also made available. Video lessons are recorded with an electronic blackboard and a narrator describes each drawing and how they relate to the material being taught. For the Khan Academy mobile application, below are some of the key observations and features that stood out. Dynamic banner explaining course offerings
Embedded Youtube clips You can follow lectures transcript
Netflix-style course selection scrolling
Bookmarking this section or page
Provides a linear course outline and a clear navigation tree
Follows Youtubelike interface You can bookmark, search, explore update your profile
10
Prototyping
Market Research
Market Research: Duolingo is one of the best known free langauge learning application and website. The language learning platform offers interactive and progressive lessons and dictations, as well as speaking practices for users. It uses gamification (gamified skill tree) that learners can progress through and gain experience points (XP). User could lose XP if they make an error and gain points with the correct response. Through a data-driven approach to lesson planning, Duolingo keeps track of user’s language skill strengths and weaknesses and tailor the course according to user’s needs. For Duolingo’s mobile application, below are some of the key observations and features that stood out. Progress bar Tracks overall progress
Use of mascot. Randomized Encouragement Can scroll to view upcoming lessons
Tracks progress in each activity
Unlock each lesson after completion
Wants you come back daily
Reminder of learning goals while you gain XP
11
Market Research
Prototyping
Market Research: Google Primer was developed by the digital marketing giant Google to support its clients desire for lessons topics like branding, storytelling, remarketing, SEO, and programmatic ad buying. The app uses a simple but elegant design and plain language. It uses examples that can be universalized. The app also takes users through step-by-step questions to customize their learning according to their unique situation. Also available is the cheat sheets at the end of each lesson. For the Google Primer mobile application, below are some of the key observations and features that stood out.
Complementary images Progress bar
Acknowledgement
Provides more learning offerings
Step-by-step questions to customize learning
Each panel has less than 30 words
Similar to Gmail interface
Simple, intuitive and elegant layout
12
Prototyping Design Requirements RESPONSE TO INQUIRIES 2: MICROLEARNING DESIGN REQUIREMENTS (See pg. 8) After reviewing and identifying the key design requirements and features in three popular microlearning mobile applications - the Khan Academy, Duolingo, and Google Primer - the following methodology was used to help brainstorm and narrow down which design requirements are must-haves versus nice-to-haves. 1. What are the design requirements that are nice-to-have? (Brainstorming – Divergent Thinking) If you have unlimited resources, what are the key design features to make the best microlearning unit? Collaborative learning Offline Badges function Social sharing
Sexy buttons
Score ranking
Storytelling Quizzes
3rd party content
Tangible rewards
Social accountability Skills tree outline Plain text
Audio cues
Plain text
Customized learning
Flip cards Progress bar
Login feature
Videos Nudging
2. Which are the above design requirements are the must-haves? (Prioritization – Convergent Thinking) Suddenly, your budget has been reduced to one-tenth its original, what are the top 5 design features your microlearning unit must have? Progress Quizzes Badges Plain text Flip cards bar The 5 must-haves key design features identified in the second step are critical when we start to prototype our first microlearning unit. This second step screens and prioritizes the absolutely essential features our prototype must-haves; this is important during the ideation phase to inform the minimal viable product (MVP). 13
Prototyping Design Requirements RESPONSE TO INQUIRIES 2: MICROLEARNING DESIGN REQUIREMENTS (See pg. 8) The concept of developing a minimal viable product or MVP when we imagine and create our prototype. MVPs are quick prototypes that only have essential features or design requirements and that are then quickly validated with early adopters/supporters. In other words, you must understand exactly what your users want, and deliver just that and nothing more. What are the must-haves? (Prioritization – Convergent Thinking). By identifying the top 5 design requirements of the Centre’s first microlearning prototype, it will provide the initial perimeters and vision of the prototype. Base on the top 5 design requirements identified, initial mock-ups were made. Quizzes
Badges
Flip cards
Progress bar
Plain text
Each sentence is less than 15 words 14
Content Creation
Prototyping
Content creation for this prototype: The content creation of the microlearning prototype was informed by its market research and design requirements. The following criteria were followed when developing the content for the first prototype: •
Topic: The subject must be comprehensive enough so that it can serve as a tree trunk that can later branch off into related subjects which can turn into microlearning units. The topic “Work for Human Development” based on UNDP 2015 Human Development Report was chosen.
•
Form and Style: Using Google Primer as the model, we adopted the use of plain language that is self-explanatory and accessible. The sentences were concise, and less than 30 words each. Another important feature is the universality of the language and examples selected by Google. This is part of Google’s strategic approach of “primerize” learning so that it can be used and understood by all. For us, more work and research is needed to achieve this.
•
Storytelling Logic Model: The following logic model was adopted for the content flow and logic:
15
Prototyping
Merging Content with Design
When drafting the prototype’s content, one needs to follow the four-stage storytelling model and merge it with the five design requirements identified. This meant drafting and testing. The following steps were followed: 1. Referred to and used “What is Work” in the Tech@Work MOOC v.1 to inform initial content 2. Used the storytelling logic model as a guide to structure new content and fill-in the gaps 3. Then, edit, edit and edit. Cut, cut and cut to “primerized” or refined content further to its “atoms” a. Change and transform content to plain and universal language b. Control the word count to at most 15 words per sentence 4. Added multiple-choice quizzes after each key concept or word to reinforce learning and build habits 5. Tested content with friends to get initial feedback and improve content 6. After more editing, the script was divided into individual “panels” or pages 7. Add in the intro and conclusion - “Get Started” and “Build Knowledge” sections 8. Finally, add wording for badges and transitions 0. GET STARTED View original content script click here:
Storytelling Logic Model Design Requirements
1. Pique Curiosity
Quizzes
2. Give Value
Badges
1. 2. 3. 4. 5.
EXPLORING WORK DEFINING WORK WORK FOR HUMAN DEVELOPMENT DECENT WORK FOR ALL BUILD KNOWLEDGE
3. Drive Attention by Adding Value
Flip cards
Progress bar
4. Call-to-Action
Plain text 16
Prototyping Gamification INCLUSION OF GAME MECHANICS Gamification is the usage of game mechanics in a non-game environment such as in microlearning to drive user behavior. Gamification in microlearning is perfected by the learning platform Duolingo. Gamification increases user engagement, retention, and learning. At this early point, basic game mechanics were added to this microlearning prototype. How to gamify? In the microlearning prototype, three design features that are game mechanics progress bar, quizzes, and badges – were included. These three features translate into encouraging of user commitment/investment, give users a sense of competition, and promise of reward.
Progress bar
THREE GAME MECHANICS Progess bar
Quizzes
Badges
User commitment • Visible accomplishments • Time invested already
Quizzes
Competition • Comparison to self over time • Build learning habits
Badges
Promise of Reward • Acknowledgement • Mastery of content
17
Prototyping Gamification How to gamify? To drive user behavior, game loops were introduced in the designing of this course. Loops are critical in the formation of games as they help to provide a structure for feedback or award to an action.
The Hook Model
These loops are formed at different scales, from a subsection to the whole to reinforce and drive behavioral change. This is possible because the creation of small behavioral loops in the Information or motivation microlearning unit build habits. These habits, if embedded to tell repeated over time encourage change and users what to do next… learning. More critically, habits keep users loyal. In Nir Eyal’s Hooked, a book explaining how to build habit-forming products, he explained that “habits are not created but are build upon (p40).” To build new habits, triggers that take the form of everyday obvious cues –like an alarm that move us to take action, are needed.
More an user invest
time and effort into a product or learning, the more they value it.
Doing must be easier than thinking as habit are done with little conscious thought
We are drawn to act not to receive a reward itself but the need to alleviate the craving for that reward.
The four phases of Eyal’s Hook Model: Triggers, actions, variable rewards, and investment (see right) was adopted in the design of this microlearning prototype. 18
Prototyping Gamification The Hook Model Learners’ the fear of missing out
Competition in the form of quizzes Doing must be easier than
Information or motivation
thinking as habit are done with little conscious thought
embedded to tell users what to do next…
More an user invest
time and effort into a product or learning, the more they value it.
User commitment in the form of progress bar & awards
We are drawn to act not to receive a reward itself but the need to alleviate the craving for that reward.
Promise of reward in the form of badges 19
Creating the Prototype
Prototyping
When building our first microlearning prototype, the design principle of “build prototypes that an be experienced” was critical. This ensures that the prototype can be tested by learners and improved. Based on the five design requirements mock-ups (pg. 14) and the content, it was decided that instead of reinventing the wheel from scratch, let us model the Centre’s first microlearning prototype based on the leader in this sector – Google Primer. Google Primer model is a prime example of a successful microlearning mobile application where the content is self-explanatory, with minimalist design, and allows ondemand access, anywhere, on any device. The below Google Primer design features were studied and adopted as part of the prototype: • • • • •
Logical color scheme Plain language Flip panel Transitions Transitions User experience (UX)
• • • • •
Quizzes Progress bar Course menu Introduction Conclusion
To view prototype: http://bit.ly/MicrolearningPrototype1 20
Next Steps
Prototyping
Evolution is the testing and learning phase of prototyping. It will be the chance for the Centre to refine our solutions and make improvements. Testing informs the next iterations of prototypes. Testing with our end-users is an opportunity to engage and build an ongoing relationship with our audience – it often yields unexpected insights. As noted in Insight 3 (pg. 7), the product development of the microlearning units and its product marketing should be parallel processes that inform each other throughout this project. Often product marketing creates awareness of the product but also our ongoing engagement with our end-users throughout this prototyping process, which should inform future iteration of product development. The product marketing and testing will inform product requirements and design.
Product development
Product Marketing
Below are some of initial comments from users: • “Really interesting, especially when you contrast the historical perspective on work. Humans are not commodities, and how the purpose of work is human development.” • ‘A small questionnaire at the beginning to gauge learner’s familiarity with the topic.’ • “Explain how the lesson is going to grow their concept of work and why it is worth their time.” • “I feel like many young millennials would agree with the lessons, but considering most jobs treat people as commodities, I'm not sure a company would buy this to give to their employees.” • “A test at the end to see if there is knowledge improvement.” • ‘The call to action section need to be more clear’ • “Ensure there are universal words used so as many areas of the world can understand as possible.” 21
Next Steps
Prototyping
Proposed Action Items: The objective of this phase is to test the prototype with early adopters and based on their feedback, we can (in)validate assumptions and reflect how we can strengthen the Centre’s first microlearning prototype. Testing will inform the next iterations of the prototypes. After consulting design thinking experts, the following two critical insights about the evolution phase: 1) if possible test prototype with at least 100 end-users and 2) test and start the following discovery phase quickly. Below are some proposed next steps: • • • • • • •
Test prototype with at least 100 end-users Collect test results and comments on a survey Review, validate, change, and on reflect assumptions Start the next iterative prototyping process quickly Build the microlearning mobile application Revise content and design requirement to give the prototype personality Respond to previous and new Inquiries (pg. 8) and Insights (pg. 7) that may have emerged throughout the prototyping process
22
Prototyping
Prototyping Using
Design Thinking to create our 1st Microlearning Unit Contact us: DELTA@itcilo.org
23