consolidating the digital learning environment:
learn everything anywhere.
consolidating the digital learning environment:
learn everything anywhere.
degree project book
Consolidating the Digital Learning Environment: gather — learn everything anywhere Senior Degree Project by Will Millar Massachusetts College of Art and Design Graphic Design 2012
contents PROBLEM
6
the learning environment
8
best practices
10
competitive landscape
12
inspriation & conceptual guidance
14
STRATEGY
16
guiding principle
18
defining a new model
20
key values
22
audience
23
service proposal
24
EXECUTION
26
process techniques
28
user experience
30
interface development
32
PROBLEM “What should schools look like when information is loose and available everywhere in ways that are personally relevant and streamlined to individual students?” Geoffrey & Renate Nummela Caine, education consultants via The Third Teacher by OWP/P Architects, VS Furniture & Bruce Mau Design.
6 Consolidating the Digital Learning Environment
Schools are notoriously outdated. This is not a criticism, nor is it a condemnation to an eternity of academia using behindthe-times technology — rather, just the observation of a designer and student. Teaching for the future is a profoundly difficult task. After all, today’s high schoolers are likely to be active members of the workforce past 2060. How are we expected to implement a comprehensive
system that educates future youth? How can you anticipate their strengths and weaknesses? How can you adapt conventional environments and resources to methods that are helpful, natural, and engaging to our current and future generations of students? Design is how. It can help us analyze current practices and investigate further developments. Design can inform education.
Math Lecture at TKK. Photo by Tungsten via Wikimedia Commons.
gather — learn everything anywhere 7
the learning environment 1350 A.D.
It’s about the lecture... right? The initial subject of my investigation was the lecture format. After pursuing design for education in my previous semester with my mathplus service design, the topic seemed like an endless well of unaddressed problems waiting for better solutions. When looking for a point of intervention to inject my design thinking and skills, my instinct immediately drove me to the lecture format. This model of the ‘sage on a stage’ seemed archaic, and our technological 8 Consolidating the Digital Learning Environment
2010 A.D.
left Lecture at a medieval university circa 1350. Painting by Laurentius de Voltolina via Wikimedia Commons. right Photo via Student to Student by UC Davis College of Biological Sciences.
implementations — PowerPoint, projector screens, and link databases — seemed like kludgy replications of physical artifacts. At the time, I was sure that lecture software could lead to a truly integrated digital learning experience. Teachers could ‘beam’ students relevant links, students could take notes directly on the lecture slides, and teachers could easily integrate interactive experiences into their lecture presentations. However, in my research process, I found the problem is much bigger.
top Example Blackboard Learn class page. bottom Wolfram MathWorld online learning resource.
top Lecture from Gresham College on Youtube. bottom Example Moodle class page.
top Photo via Val’s Closet. bottom Gene Machine: The Lac Omeron by University of Colorado’s PhET™ project.
A matter of resources I do not believe that my ideas up until this point had been wrong, so much as just misguided. While lecture software is a valuable idea, until I did research, I was not aware of the myriad of software solutions available for schools and teachers. As I cover in detail in competitive landscape (p. 12), services exist to connect classrooms as communities. Resources have been crafted to replace textbooks, and tools have been developed for teachers themselves to produce these resources. So with this information, my question to myself was “what am I doing here?” I clearly saw there was a need in
this category, but during the research phase, I often felt lost in the huge number of available tools. I soon came to realize that these observations, instead of being setbacks, were actually about to improve the overall strategy of my project. Instead of seeing myself as making another piece of lecture software, I began to understand the need for software that would unify all learning resources. While as before, I saw myself adding yet another element to the mix, now I saw myself tying the whole digital education experience up in a single functional, accessible package.
“Capture accidents. The wrong answer is the right answer in search of a different question.” — Bruce Mau in Life Style
gather — learn everything anywhere 9
best practices
New school thinking After deciding to design for education, I quickly realized that I needed to know everything I could about cutting-edge education practices. The incidental personal experience I had was valuable to some degree, but I really needed to find the people doing the best work out there for students, and I found some really insightful resources. My first great resource was picking up The Third Teacher, a book authored collaboratively by Bruce Mau 10 Consolidating the Digital Learning Environment
left Students work with professors at Standford University School of Medicine. Photo via Stanford EdTech. top right Evernote note taking and sharing software has proven popular in academia. bottom right Teacher uses The Elements app when teaching the Periodic Table of Elements. Photo via Abilene Christian University News.
Design, OWP/P Architects, and VS Furniture Design. As the title suggests, The Third Teacher envisions the educational environment (the school and its resources) and the third defining factor in a student’s learning process (the first two being the student and the teacher). One idea from The Third Teacher that particularly stuck with me was this idea of the ‘teacher as designer.’ Instead of seeing teachers as disseminators of textbook content, seeing
them as curators of bodies of information. Teachers need simpleto-use tools that allow them to flex theses muscles. As a teacher, it should be easy to author and disseminate documents, instantly pull resources from any source, and construct an educational narrative to seamlessly pass on to learners.
Evernote for Schools pilot program at Van Meter Elementary. Photo via Shannon Miller.
1-to-1 learning programs In my research, I analyzed several case studies of ‘1-to-1’ learning environments. 1-to-1 refers to the fact that every student is given their own computer. There is debate over whether touch devices like the iPad are better than laptop solutions like netbooks, ultrabooks, or the MacBook Air. The iPad has become quite popular, likely due to its popularity among general consumers, the large database of educational iOS applications, form factor (the screen lies parallel to the desk, rather than a laptop whose screen stands perpendicular to the desk, therefore easily breaking eye contact between a student and instructor), durability as a device compared to similarly-priced laptops, and its ubiquity as a technology. Burlington High School’s 1-to-1 iPad learning initiative was one of the most helpful resources I studied in my research. Principal Patrick Larkin has been instituted progressive change throughout the school, and has spearheaded the movement to move the school to a truly digital learning environment. In addition, he also kept
detailed documentation of the process publicly available on his blog, Twitter, and Google Docs account. This is both a fantastic example of ‘designing in public,’ and a great resource from which I can learn a lot about digital education. One BHS teacher, Andrew Marcinek, wrote several excellent articles about the school’s transition to digital learning for the education website Edutopia. In a five-part series, Marcinek describes the process of teachers creating digital resources for students. He outlines a technique where faculty form groups according to their discipline, discuss yearly curriculums, and gather data in a Google Doc or wiki page. This is slowly refined and restructured. They brought digital education designers in to show the teachers how to turn this into an ePub format that they could distribute to students via iBooks. This got me super excited. First, I thought it was so cool how teachers essentially created a textbook in a matter of days. They even had workshops on Creative Commons on how to do this process legally.
gather — learn everything anywhere 11
competitive landscape
Acronym overload: VLE’s, LMS’s & MLE’s In the beginning stages of my project, it was clear that I needed to be aware of the current solutions for the problem I was working on. I needed to know what works and why; and what doesn’t work and why. Digital learning software is very complex, there are different ways to tackle the many problems, so there are many redundant solutions. The terminology of these learning systems is based off of the same systems we use for website management Learning 12 Consolidating the Digital Learning Environment
top left Example Blackboard Learn class page. top right Example Moodle class page. bottom left Projectile Motion free interactive simulation by University of Colorado’s PhET™ project. bottom right Google Docs’s seamless environment for authoring and collaboration in real-time.
Management Systems (LMS’s) function similarly as Content Management Systems (CMS’s) on the web. They operate in the educational environment as databases or storage areas for links, discussion boards, or files such as presentations or word processing documents. They are closely related to Virtual Learning Environments (VLE’s) and Managed Learning Environments (MLE’s), which expand upon this concept by seeing the Learning Management System as one component of
a larger environment (the VLE or LME). These environments are often realized as comprehensive technological systems like bhs’s 1-to-1 iPad learning initiative (discussed in best practices on p. 21) that envisions a whole landscape of digital services that integrate for a cohesive experience for students and teachers.
Khan Academy learning software is being piloted in several schools across the country.
Two commonly used lms/vle solutions are BlackBoard Learn+ (opposite page, top left) and Moodle (opposite page, top right). These products are intelligently built as successful businesses, and their development team seems competent, but they lack the ease-of-use factor of an iPad or Google Docs.
Boundless. Free, online textbook replacement from Cambridge, MA startup Boundless Learning.
Steps service design by Kevin Kwok, Nancy Chui, Rachel Thai, Winnie Yuen, Wayne Tang at Art College Center for Design.
Cutting-edge interactive solutions While I do not believe that the standard digital tools like Moodle, wikis, and BlackBoard are working well there are some outstanding digital platforms that show the true potential of how dynamic media and interactive software can make the learning process easier, more natural, and more productive. Salman Khan and his Khan Academy (above, left) products have been a wonderful source of inspiration throughout the project. Khan has single-handedly produced over 3,000 videos from his small home recording studio where he begin the project. In 2004 he was tutoring his cousin Nadia in mathematics over the internet using Yahoo!’s Doodle notepad. As the operation continued and expanded, he started posting pre-recorded videos on YouTube, which grew into the successful YouTube channel where his thousands of videos average 20,000 hits each. While there are certainly limitations on the strict lecture-to-video format of Khan’s education system, what inspired me was his vast success from a simple concept with a simple execution. The quality material, free price
tag, and online accessibility really helped popularize his service into the full-on learning software that the Khan Academy is now experimenting with. Another promising digital education platform comes from Cambridge, MA-based startup Boundless Learning (above, center). Their product, Boundless, seeks to provide students with a free alternative to expensive market-controlled textbooks.
Bloomburg Businessweek estimates that the top five textbook manufacturers control 80% of the market. Referring to Thomson, Wiley, Houghton-Mifflin, Pearson, and The McGraw-Hill Companies — “Textbooks for Tightwads” by Rachel Z. Arndt. Businessweek. August 29, 2009.
gather — learn everything anywhere 13
inspiration & conceptual guidance
left Bruce Mau. Creative director & founder of Bruce Mau Design. Photo by Nigel Dickso. right Bret Victor. UX thinker, ex-Apple UI designer, brilliant human. Photo by May-Li Khoe.
Bruce Mau’s “life style” As I mention all the time, Bruce Mau (left) has always gotten me excited to design, his work is top-notch, and he puts out some great writing that speaks about interpreting problems, design process, and generally profound life observations. His “Manifesto For Growth” in his studio’s monograph Life Style has a slew of deeply inspirational quotes, styled as ‘rules,’ such as: “Drift. Allow yourself to wander aimlessly. Explore adjacencies. Lack judgment. Postpone criticism.” 14 Consolidating the Digital Learning Environment
Bret Victor convinces me that “interaction is harmful” My newest idol, Bret Victor, in his seminal 2006 paper, magic ink: information software and the graphical interface, introduced me to the concept of ‘software design philosophy.’ Magic Ink talks about the methodology behind traditional ‘information software’ and its reliance on interaction as a principle driver of communication rather than what Victor refers to as ‘information graphic design.’ By this,
In Magic Ink, Victor proposes the use of interaction be supported by graphic design.
Later in Magic Ink, Victor makes a case for using sentence structure to communicate simply ideas that are complex and cumbersome for a menu system.
he is suggesting that we design software that is more reliant on principles of graphic design (above, left) — space, composition, balance, color, weight, etc. — than on principles of interaction design — clicks, screens, dialogues, menus, navigation, etc. Victor goes on to discuss examples of graphic design’s importance in software using a San Francisco BART
transportation desktop widget as a case study. At one point, when investigating options for how users will configure alarm settings, Victor realizes that a sentence structure format (above, right) would be infinitely more usable and natural to a user than the standard dialogue box that we are used to in traditional software interface.
My role as “the tweaker” Another source of directional inspiration was an article Brian Lucid and Daniel Buckley pointed me to when I was doing my preliminary research in my Fall semester. The Tweaker is a piece by Malcolm Gladwell about Steve Job’s role at Apple. Gladwell argues that rather than an ‘innovator’ who brought new ideas to the table, Jobs was a ‘tweaker’ who could look at a thousand ideas at once, pick out the one diamond in the rough, and have a good sense about how to polish it into a refined direction. Apple did not invent the personal computer, the digital music player, the smartphone, or the tablet — they just understood their market and their consumers’ needs in a way that they could produce top-notch experiences that just felt right to users. And the idea is that this translated directly into skyrocketing sales and increased marketshare. As the designer of Gather, I see my role much more as a ‘tweaker’ of existing technologies than an ‘inventor’ of a new technology.
“The Tweaker” by Malcolm Gladwell via The New Yorker. November 14, 2011.
gather — learn everything anywhere 15
STRATEGY An invisible layer of translation is necessary to make existing digital learning materials easily accessible to everyone in the educational environment, in and outside the classroom. From the Consolidating the Digital Learning Environment abstract.
16  Consolidating the Digital Learning Environment
gather — learn everything anywhere 17
guiding principle
Digital learning resources should be universally accessible in a single environment that can serve complex content, but is easy to use.
18  Consolidating the Digital Learning Environment
A conviction, not a question Our Degree Project brief required that we sum our work up in what was called a ‘researchable question,’ which is a helpful task to distill your work into a single sentence. However, I felt limited when working in the question format, and was inspired to write a demanding conviction rather than asking a question. I borrowed the term ‘guiding principle’ from Bret Victor. In a talk of his, Inventing on Principle, Victor explains how good ideas often come from people who are working to achieve a higher goal, rather than those who are working only to complete their current task. He talks about ‘guiding principles:’ these convictions that makers have which drive them through the entire making process. A ‘guiding principle’ is so strong that it reverberates through every aspect of your process. It is the phrase that you would write on the wall in giant letters to inform and inspire your progress every day. It is more than design, more than work, and more than an idea. It is a real desire.
I adapted this powerful idiom from Bret Victor’s talk Inventing on Principle and paper Magic Ink. While it was not my ‘guiding principle,’ it reminded me of what I was trying to accomplish at all times.
gather — learn everything anywhere 19
defining a new model
A ‘hub’ to unify resources My main problem with the current model for organizing learning resources is its lack of structure. It is up to the teacher not only to plan and teach curricula, but also often to implement the necessary technological solutions to a class. While textbooks often serve to do this curation for the teachers, I want to move away from an educational model where class material is dictated by an outside body such as a textbook manufacturer, and toward a model where content is curated by teachers themselves. 20 Consolidating the Digital Learning Environment
The important part of this model is the ‘hub’ that holds everything together. Current ‘Learning Management Systems’ often are structured to only integrate bits and pieces of class material, whereas I envision a much larger platform which will encompass the entire learning experience from student’s notebooks to teacher presentations to the documents and websites that will replace textbooks.
This thumbnail diagram sketch came early in week 3 and proved to be a seminal concept for the rest of my process. The next week I developed it in into a more detailed structure seen below.
The advancing role of the teacher If teachers can source an infinite amount of content from the web, it gives them more time and resources to devote toward constructing a solid educational narrative for their classes. Contemporary education thinkers are suggesting an educational model where teachers are more ‘coaches’ or ‘mentors,’ students can learn on their own and both stay in close contact with about their progress. This is instead of the traditional ‘sage-on-a-stage’ role where teachers disseminate large bodies of information as
students wait, listen, and take notes. Previously mentioned Khan Academy software takes this approach to the extreme in a program being piloted at several schools in California. In these programs, which are called “Flipping the Classroom,” students watch video lectures and are exposed to other new material at night, and then come in to school to work on exercises and problem sets where the teacher is there to provide instant help and feedback at every step. gather — learn everything anywhere 21
key values
Data-rich design In gather, interface exists only to bring the data to life. Content is clear and unadorned, and user interface elements are minimal and functional. User experience is designed for both seamless in-class interaction and extensive reading sessions of course materials. The ultimate goal is, to rephrase famed user experience thinker Bret Victor, ‘show the data, hide the technology.’
Clear abstraction Information graphic design is used as the primary tool for communicating content. Interaction is designed to be as minimal and frictionless as possible to suit the classroom environment where there is no room for error.
Universal accessibility It is vital to provide the same experience across all devices: desktop, tablet, Smart Board, internet-enabled tv, and mobile, so students and teachers can access all their materials any time, anywhere, in one place. We want to make it as easy as possible for students to study and teachers to coordinate materials.
22  Consolidating the Digital Learning Environment
audience
6th Grade 7th Grade 8th Grade High School freshmen High School sophomores High School juniors High School seniors College freshmen College sophomores College juniors College seniors
Target range Gather was designed for use in classrooms from 6th grade through college, with the ‘sweet spot’ being the later years of high school. The reason for this is that as education goes on, learning often becomes more and more specialized, making it tougher to design general software to accommodate all subject matter. However in elementary school and earlier, classes are not nearly as resource-intensive, and lend themselves less to the same type of information software.
gather — learn everything anywhere 23
learn everything anywhere.
24  Consolidating the Digital Learning Environment
service proposal
gather is a digital learning platform designed to give students and teachers access to class resources in a single environment across all electronic devices. A refined and versatile toolset provides students with six main features: The Resources list stores all class material for reading an a clean studying interface. In any document, students can take notes by using the highlight & add note tool, which are then stored in their Notebook, but also remain in their original context as well. Students can track their work for all classes with in Assignments. They can also simply and directly ask the teach questions with the Ask tool. Finally, new resources can be discovered in the Library, which is envisioned as a curated ‘App Store’ for learning, and outside content can be viewed in the Web Browser which automatically formats pages for projector, desktop, tablet, mobile, or tv, and includes privacy and filtering settings.
FEATURES
gather — learn everything anywhere 25
EXECUTION In gather, interface exists only to bring the data to life. Content is clear and unadorned, and interface elements are minimal and functional. User experience is designed for both seamless in-class interaction and extensive reading sessions of course materials. Excerpt from the Consolidating the Digital Learning Environment abstract.
26  Consolidating the Digital Learning Environment
“Microframes” are small two to three inch thumbnail wireframe sketches that are developed and then recreated in Keynote.
gather — learn everything anywhere 27
process techniques
ANALYZING
ORGANIZING
Converting analysis to action
left Notes from the research and discovery phase of the project. right Forming an outline in OmniOutliner.
After my picking a field of study, collecting and analyzing data, and forming my plan of attack, turning it all into a product was much more challenging than I had anticipated. One process that I turned to throughout the project was organizing thoughts, notes, and tasks in an outline
format, and Omni Group’s OmniOutliner software. With OmniOutliner I could type out a concept or idea, go back and break it down, establish hierarchy in it, and turn it into an outline that I could implement in further conceptual development or a new prototype.
WRITING
DOCUMENTING
PUBLISHING
Documenting progress to define direction
left Writing Markdown in iA Writer. center Posting updates on the class Wiki. right Publishing posts on my personal website using Tumblr.
To guide myself through the process, I kept regular updates posted on our Degree Project Class Wiki, which I later synchronized to my personal blog and site. I wrote posts in Markdown using Information Architects’s Writer app for Mac, which made writing a pleasure. Writing was helpful
because it forced me to take my scattered notes and various online resources and convert them into a narrative format. My COMPLETE Degree Project PROCESS Worklog can be found online at: www.willmillardegreeproject.tumblr.com
28 Consolidating the Digital Learning Environment
With these tools, you can rapidly prototype interactive experiences with little investment in every iteration, creating a more adaptable process.
PAPER PROTOTYPING Paper prototyping
Using a quilting ruler and grey design markers really improved my UX sketching so I could draw in “layers.”
When it came time to convert my ideas and direction into layout and interface, I felt I needed to research best practices for software design process, and I came across an incredibly helpful article called The Messy Art of UX Sketching online from Smashing Magazine. The article suggested sketching for interaction design on paper starting in light pencil lines, building layers with pen and various shaded gray markers,
and finishing with Sharpie. ‘Quilting rulers’ are perfect because they have a grid printed on them and are perfect for drawing parallel and perpendicular lines in a snap. Post-It notes can be used to show pop-up windows or modal dialogues, and they can be ripped right to size using the quilting ruler. With these tools, you can rapidly prototype interactive experiences with little investment in every iteration, creating a more adaptable process.
Dynamic Keynote prototyping While paper prototypes were great to think in, they don’t translate well to a wide audience. Like wireframes, consumers and general audiences have difficulty envisioning the end product from a paper prototype. A high-fidelity prototype has to be created to appeal to all audiences. In order to communicate my ideas for Gather as a platform, I built a demo in Keynote, investigating a case study that follows two users — a teacher and a student — through a narrative scenario that demonstrates the service’s value in its environment. I adapted lots of my Keynote process from a talk by Travis Isaacs called Keynote Kung-Fu: How Ninjas Wireframe. Isaacs shows how he uses Keynote to illustrate interface elements, convey interaction, tell user scenario stories, and even plan projects and take meeting notes.
DIGITAL PROTOTYPING Apple’s presentation software Keynote can be used to design interactive prototypes
gather — learn everything anywhere 29
user experience
Sketching for UX After settling on a fundamental layout for a toolbar and the general composition structure, I designed every ‘screen’ for Gather starting from sketches. I would begin with tiny 2 – 3" pencil “microframes” (from previously-mentioned Travis Isaacs Keynote Kung-Fu talk). Those would get transformed, erased, and re-drawn as I would add layers of grey marker, pen, and color. That layout would then be recreated in
30 Consolidating the Digital Learning Environment
Keynote. What I loved about Keynote was that once it was there, it was so easy to continue to modify. Changing color, composition, and typography are incredibly simple in Keynote, and it let me continue to refine my interface the whole way through development. Animation is also a cakewalk, particularly compared to software like AfterEffects or Flash.
gather — learn everything anywhere 31
interface development V1 Version 1 may look more refined than subsequent iterations, but I decided to move away from a “polished” interface aesthetic toward a solution that emphasized the role of the service.
V2 Version 2 unsuccessfully attempted to mimic the minimal and ‘loose’ aesthetic of my sketched wireframes, but it fell flat due to its use of tired visual devices and lack of depth.
V3 I realized that the equity in my sketches was the use of tone. Version 3 uses flat color and plain typography to communicate clearly and emphasize the functionality of the platform.
Goldilocks and the three versions After settling on interface composition and service features, the last step for Gather creative was to give the UI a look and feel. Half way through creating Version 1, I realized that I was really leaning on what I call the ‘Apple UI crutch.’ By this, I am referring to a systematic application of gradients and drop shadows that give all graphic elements “depth.” I have done this in several of my interface designs, but this
32 Consolidating the Digital Learning Environment
time I decided, “Enough’s enough!” Besides being tired of the trend, I realized that this aesthetic leads audiences to view a design, whether you want them to or not, as a finished product. Attention is drawn to illustration of buttons and style selections, rather than the role of the service or the functionality that it provides for users. I needed a compromise that would both look visually pleasing, but also not appear artificially “finished.”
Final look & feel At this point, professor Jan Kubasiewicz, my advisor on the project, suggested that I “go back to my sketches.” He said there was something about them that was missing from my computer UI designs and I wholeheartedly agreed with him. I experimented with computer hand-drawn aesthetics in Version 2, and the result was hideous and unusable, but it helped me reevaluate what I was going for. I went back to my
sketches and asked myself “where is the equity in these?” The conclusion I came to was my use of value. With marker, I had optimized tones of gray to build space, establish hierarchy, and define content elements. I translated this concept back into my Keynote interface screens, and the final look and feel took form. It emphasizes stroke and value to clearly communicate interaction and content.
gather — learn everything anywhere 33
Book set in Arno Pro and Helvetica Neue LT Std. and printed on Red River 32 lb. (cover is 50 lb.) Premium Matte Double Sided paper. Thanks to Jan Kubasiewicz and Maria Stangel, as well as my classmates at MassArt, for their feedback and critique which was instrumental to the development of this project. 2012.