2017 Designing games for teaching typography Puja Khurana Designing games for teaching typography by Puja Khurana, Professional Diploma in Visual Communication, Srishti School of Art, Design & Technology (India), 2015 Supervisor: Katherine Gillieson A Critical & Process Documentation Paper Submitted In Partial Fulfillment Of The Requirements For The Degree Of Master Of Design Emily Carr University Of Art + Design 2017 © Puja Khurana, 2017 I Abstract This thesis investigates interactive and engaging learning experiences to teach fundamentals of typography to anyone who otherwise does not have any formal education of typography. The thesis uses two different approaches to do so–one where learning outcomes and objectives are direct, and another in which they are indirect. The first approach explores games that can be used to effectively educate users about the fundamentals of typography, like anatomy of type by understanding the structure of letterforms, and classification of typography. The second approach investigates how an app might be used to learn about typography from a user’s surroundings. Design research methods include a studio-based approach, where evaluative testing and observational trials were core sources of insights. Other methods include interviews, surveys and precedent reviews. These insights further inform studio prototypes of varying fidelities and ultimately, final mockups for the proposed forms of engagement. Thus, this project hopes to make typography accessible to everyone who is interested in learning about typography by using a variety of physical and digital mediums. Table of Contents Abstract I Table of Contents II Acknowledgements III Preface IV List of Figures V 1. Introduction 8 1.1 Thesis statement 2. Theoretical Framework 12 2.1 Designing for teaching typography 13 2.2 Crafting learning experiences 16 2.3 Typography in urban landscapes 17 3. Design Research 21 3.1 Interviews 22 3.2 Surveys 26 3.3 Precedent reviews 31 4. Design Explorations and Outcomes 4.1 Target Audience /2 10 43 44 4.2 Studio prototyping 48 4.2.1 Design Exploration: Type Surf 49 4.2.2 Exploring puzzles 62 4.2.3 Card games as a form of teaching 69 5. Final Mockups 75 5.1 Tuzzle: the type puzzle 76 5.2 Type Rush: playing cards 82 5.3 Type Surf: Application 89 6. Conclusions and Future Directions 94 Bibliography 98 Appendix 100 Appendix A: Surveys 101 Appendix B: Tuzzle: full set 114 Appendix C: Type Rush: full set 120 Appendix C: Type Surf: prototypes and mockups 135 Appendix D: Personas 137 /3 III Acknowledgments I would like to thank my thesis supervisor, Katherine Gillieson, PhD, Associate Professor, Faculty of Design + Dynamic Media at Emily Carr University for her guidance and patience. Her feedback and suggestions throughout this process have always pushed my work in a better direction. Secondly, I would like to thank the postgraduate faculty who guided us throughout this two year program at Emily Carr University. I would like to thank my family for being a constant support in my life, and for believing in me and my dreams. A big thanks to all my friends, and a warm hug to Mario Sirotic and Aarohi Shah for always giving me unfailing support and continuous encouragement. I wouldn’t have done this without you. I would finally like to extend my gratitude to my entire cohort – We did it, guys! /4 IV Preface My relationship with design, especially typography, began at a very early age. I was born and raised in India in a cozy family of four. My father and his family were all graphic designers. Growing up, I found his work fascinating and was always intrigued by the graphics and type they worked with. I found myself falling in love with design, which urged me to explore typography and graphic design as my major in my undergraduate program. My big move to halfway across the world from India landed me in Canada. I could not stop thinking about how visually different these two places were, and how similar yet different the ways of teaching in design universities were. I always wondered how one could extend design education outside of the classroom to a subset of audience that were not graphic designers. My constant desire to learn more about typography compelled me to investigate and suggest new learning experiences for non-graphic designers and carry out this thesis project. /5 V List of Figures Fig. 1: Tools used for letterform design. | 15 Fig. 2: Typography found in the environment | 18 Fig. 3: Overview of Typography Insight | 32 Fig. 4: Interact with typefaces through touch gestures | 33 Fig. 5: Juxtaposition of typefaces side-by-side | 33 Fig. 6: Choosing from 5 main characters | 34 Fig. 7: Adopting a strategy for font pairing | 35 Fig. 8: Starting a course for learning French | 37 Fig. 9: Progress report and new levels | 37 Fig. 10: Translating sentences by speakin writing and hearing | 37 Fig. 11: The Quick Brown Fox Jumps Over The Lazy Dog | 39 Fig. 12: The Quick Brown Fox Jumps Over The Lazy Dog | 39 Fig. 13: Unarranged puzzle cubes | 40 Fig. 14: Persona A: Michael | 138 Fig. 15: Persona B: Leah | 139 Fig. 16: Value Proposition Canvas | 140 Fig. 17: Value Proposition Canvas | 141 Fig. 18: Value Proposition Canvas | 50 Fig. 19: Travel notes while documenting different neighbourhoods of Vancouver | 53 Fig. 20: Pages from ‘Vancouver Graphics’ | 54 Fig. 21: Pages from ‘Vancouver Graphics’ | 55 Fig. 22: Pages from ‘Vancouver Graphics’ | 55 Fig. 23: Pages from ‘Vancouver Graphics’ | 55 Fig. 24: Pages from ‘Vancouver Graphics’ | 55 Fig. 25: Typography documented on Granville Island | 56 Fig. 26: Typography documented on Main Street | 56 Fig. 27: Mindmap for Type Surf - an educational yet playful typography guide | 59 Fig. 28: Early paper wireframes and sketches | 60 Fig. 29: Early ideation of content structure | 61 Fig. 30: User flow of Type Surf | 63 Fig. 31: Digital wireframes | 64 Fig. 32: User testing paper prototype A | 67 Fig. 33: User testing paper prototype B | 69 Fig. 34: User testing paper prototype B | 70 Fig. 35: User testing paper prototype C | 71 Fig. 36: User testing paper prototype C | 72 Fig. 37: Observational trials of the typographic card game | 74 Fig. 38: Observational trials of the typographic card game | 75 Fig. 39: Puzzle pieces | 81 Fig. 40: Puzzle pieces | 81 Fig. 41: Puzzle pieces | 82 Fig. 42: Puzzle pieces | 82 /6 Fig. 43: Puzzle pieces | 83 Fig. 44: Puzzle pieces | 83 Fig. 45: Final ‘Tuzzle’ box | 84 Fig. 46: Puzzle pieces | 84 Fig. 47: Type Rush playing cards deck | 86 Fig. 48: Type Rush playing cards deck | 87 Fig. 49: Type Rush playing cards deck | 87 Fig. 50: Type Rush playing cards deck | 88 Fig. 51: Type Rush playing cards deck | 88 Fig. 52: Type Rush playing cards deck | 88 Fig. 53: Type Rush knowledge cards | 89 Fig. 54: Type Rush knowledge cards | 90 Fig. 55: Type Rush knowledge cards | 91 Fig. 56: Type Rush type classification poster | 92 Fig. 57: Type Surf: Welcome screen | 94 Fig. 58: Type Surf: Home page | 94 Fig. 59: Type Surf: Type Room | 95 Fig. 60: Type Surf: Type Room | 95 Fig. 61: Type Surf: My Collections | 96 Fig. 62: Type Surf: My Collections | 96 1.0 Introduction To categorize typography as traditional, liberal conservatism or avant-gardism is to ignore the overall question of how typographical design can best serve as an acutely sensitive instrument for communication between divergent ideas and divergent peoples. Lester Beall, 1990 Typography is omnipresent in the urban landscape, and is at the heart of visual communication. Ellen Lupton, a distinguished graphic designer, educator, and writer, aptly says, “Typography is what language looks like”(2004). Different arrangements of type on a page or a screen using appropriate choices of typefaces can convey the essence of words successfully to achieve an emotional response (Dair, 1967). In order to successfully communicate messages using typography, a deeper understanding of technical aspects, historical background and origins, and semiotic contexts is required. Chessin (2004) draws similarities between the education of a typographer and the training of a musician. She illustrates how both require strong intuition, sharp focus, careful attention to exercises, understanding technicalities, and a sharp eye for detail (or ear for tune). Fortunately, graphic design students are able to enroll for typography-based courses in university, but despite its ubiquitous nature and importance across all fields, the access is often limited to this small subset of designers. The thesis explores different games as mediums by researching through making. It suggests an engagement with the subject in an informal setting, and is open for a broad audience, namely any one who is interested in learning about typography. With this in mind, it aims to craft engaging and interactive learning tools that teach users about the fundamentals of typography. /9 1.1 Thesis Statement Typography is a complex subject and a critical skill for designers. While numerous resources exist to aid graphic design students in the learning of typography, they tend to be limited to a classroom setting for this specific subset of designers. With the use of collaborative activities typography can be made more accessible to the general audience as well. Through studio-based research, this thesis examines how a variety of games and exercises can be used to generate engagement, and facilitate learning of various aspects of typography for any one who is interested in learning about typography. /10 2. Theoretical Framework This section begins with an overview of challenges that are encountered when teaching typography as a subject, and how different approaches can be used in classrooms. It then proceeds to discuss how learning experiences and instructionless learning spaces can be crafted to provide an appropriate environment for knowledge transfer. Finally, it examines where typography situates itself in the urban landscape, in order to identify opportunities for creating learning experiences in the spaces around us. 2.1 Theoretical Framework Designing for Teaching Typography Typography requires attention for detail and a concentrated effort. It takes a careful eye to create communication that is not only inviting, but is also an impactful, organized, and creates a mood, ultimately giving life and personality to the printed word (Haley, 2004). Historical knowledge of typography allows designers to reflect and understand the invention and reinvention of type. It allows them to contextualise and validate type choices of the chosen style. In The Education of a Typographer (2004), Shaw discusses his design for an introductory typography course: As a response to the drawbacks of cramming practice, history and theory into a single-semester course, I have created a utopian, four semester course in typography. Stretching out the teaching of typography for an additional three semesters allows for more reflection in discussions, sufficient time for completion of complex projects and the addition of calligraphic and handlettering training as a basis for understanding the fundamental structures of typefaces. (p. 21) A multi-semester course in typography may provide appropriate knowledge and in-depth exploration that beginners require. However, it requires a lot of time and commitment. In contrast, courses like Type Carousel, a 4-day course taught at Old School New School, Australia aims to provide the participants with techniques and knowledge of typography by focusing on using only pre-digital techniques with the use of a hands-on experience to understand type. This approach works well in two ways. Primarily, it focuses on pre-digital techniques which are suited to familiarise students with the process and history of letterform design and typography. Secondly, it facilitates learning and appreciation of the anatomy and structure of type. It helps the users understand how weights of strokes, contrast, pressure and movement affect letters. /13 2.1 Theoretical Framework Here, I saw an opportunity for this style of a course to provide a potential introduction into typography by understanding how different methods of teaching can be effective. It led me to a key question in my research: “How can any, and every one be typographically educated? Can typography be taught to a wider audience who has no knowledge of the subject? ” Fig. 1: Tools used for letterform design. /14 2.1 Theoretical Framework /15 2.2 Theoretical Framework Crafting Learning Experiences Learning is the process whereby knowledge is created through the transformation of experience. David Kolb, 1984 According to Kolb’s discussing of the Experiential Learning Cycle (1984), effective learning takes place when a person goes through a full cycle of experiencing, reflecting, conceptualizing and testing. For example, to introduce students to the subject of typography can be made by first introducing the anatomy and the history of typography. This can be followed by applying the new knowledge gained in a relevant setting, after which this newly acquired knowledge can be utilized to design new letterforms. However, learning experiences can differ from person to person and on the subject being taught. The way in which students apply knowledge and skills in relevant settings is what is important. When students are placed in an environment that promotes learning and risk-taking, long-lasting and deeper learning can take place (Johnson, 2017). The key to such uninstructed learning is that the students are provided with opportunities to direct their own learning. In their discussion about the theory of play, Mitchell & Mason (1948) state how play is necessary for the development of higher intelligence since we are not born with perfected instincts. This inspired me to incorporate play for teaching typography in a relevant, but informal setting. Currently, many web-based games like Kern Type exist. Kern Type addresses a small, but crucial aspect of kerning in an interactive and engaging manner. Here, I see an opportunity to explore how different aspects of typography can be taught through fun and engaging games. /16 2.3 Theoretical Framework Typography in Urban Landscapes In today’s culturally rich urban landscapes, it is difficult to ignore the visual styles that coexist in different places. Many different typefaces can be seen when walking around a city, on billboards, signages, posters and more. Each time we enter a new place, we become one of the ingredients of an existing hybridity, which is really what all “local places” consist of (Cresswell, 2004, p. 49). In their article ‘Typographic Landscaping: creativity, ideology, movement’, Järlehed & Jaworski (2015) examine the role of typography in the urban landscape and discuss how the placement of letters and signs in public and private spaces creates a certain social language. These letters and signs act as expressions of trends and aesthetics. To look at it from a perspective, is an element that shapes the visual culture of a city. Stephen Coles (2008) describes how he was fascinated by mundane, everyday signs as he walked around cities. He points out a similarity between bird watchers and type geeks. They are acute observers (of course), but they are also preoccupied with identification, classification, anatomy, and minute details that distinguish different breeds (or here, typefaces). Documentation is also part of every birdwatcher’s life; the “life list”—a record of every species they’ve ever seen— is an essential companion. (p.8) However, the innovation, modulation and evolution from printed format to digital mediums challenges our accepted notion of typography. Not since Gutenberg’s invention of moveable type in the fifteenth century has typographic communication undergone such a fundamental change (Hoeks, Lentjes and Bil’ak, 2015). Rick Poynor (2012) emphasises how old letterforms and signs have absorbed the atmosphere and history around them through the decades. He adds how that has shaped, defined and pushed their boundaries. At the same time, Molly Woodward, in her blog Vernacular Typography (2015), questions the effects of the onset of technological advancements on typography. She writes: /17 2.3 Theoretical Framework Vernacular typography and lettering have a way of creating and preserving a sense of place, and when we lose these symbols, we lose a sense of our own history... If we don’t document and appreciate these signs now, they’ll disappear forever and we’ll sever our connection to the past. There’s a great deal of appreciation here for the everyday in design, the details we overlook but that make our cities unique. Keeping this in mind, I began my initial design exploration by looking at the relationship between the city and typography. I identified how they influenced each other in today’s urban landscapes. I intended to dig for opportunity spaces in this area to craft an interactive learning experience for users, and help them learn from typography present in their surroundings. Fig. 2: Typography found in the environment. Crystal Ark, Granville Island. /18 3. Design Research In this section, I explain my process of conducting interviews, surveys and precedent reviews. I analyze my results and identify design opportunities around ways that typography can be taught outside classrooms. I also share insights about the need for hands-on experiences in the digital age and highlight challenges such as bridging interactive experiences with physical spaces and objects. The precedent reviews examine existing models of teaching using digital platforms and physical games. With the assessments made in this section, I identify opportunity areas and gain new insights that later help shape the framework for this project. 3.1 Design Research Interviews As a part of my research, in August and September 2016, I interviewed nongraphic designers and design practitioners to help narrow down the problem area and identify new opportunity spaces for teaching elements of typography. I focused on identifying possible changes in the way that typography can be taught. I aimed at gaining insights into the behavioral patterns of my user groups to help develop personas. The content from these interviews was helpful in recognizing potential shortfalls in current methods, thus identifying opportunity areas for an intervention. Interviewees shared how they were taught typography, and how different mediums could be used to generate engagement and teach typography. These select excerpts and summaries highlight observations, concerns, gaps identified, and new ideas that the interviewees accumulated from their experiences. Collecting these insights allowed me to situate it within a relevant, real-world context. /22 3.1 Design Research: Interviews Excerpts and Insights from Interviews Naitik Mehta 3rd year Interaction Design student, Emily Carr University As an interaction design student, Naitik was required to learn a certain amount of typography. Upon taking an introductory course, he realised that the short timeframe of the class made it difficult to remember factual information and technical terms. He expressed the need to apply the acquired knowledge in the real world setting. One of his main concerns was how rigid the course felt. He felt the need to learn about typography in a relaxed and fun manner. Enid Chen Graphic designer and typography enthusiast As a typography enthusiast and a working professional in the industry for over 10 years, in our meeting and critique sessions, Enid encouraged me to think about how we can reconsider what encompasses the ‘fundamentals’ of typography. She suggested that I look into more interactive methods and possible ways of encouraging collaboration between players. This prompted me to focus on finding ways to generate engagement and collaboration in my project. Neha Nandre Digital Media Designer As an interaction and digital media designer, Neha gave me insights into the benefits and application of gamification and game-based learning. She further hinted towards print-related methods and physical games that are primarily educationbased. She directed me to more precedents on the popular portfolio website, Behance, based on various board games and physical games that were created for an educational purpose. This was a beneficial interview since it guided me towards /23 3.1 Design Research: Interviews looking at a variety of mediums and aided my understanding of how I could adapt concepts to different mediums. Preston Chang Front-end Developer and UI designer Preston talked about the technical aspects of exploring technological advancements like augmented reality and virtual reality. He suggested that I analyze the popular gaming app, Pokemon Go as a case study and gain technical knowledge of the adaptation of augmented reality in apps. /24 3.1 Design Research: Interviews Summary and Insights Interviewing helped me procure insights into the users’ challenges and motivations for learning typography. It urged me to inspect the possibility of a different approach to teaching typography. The varied backgrounds of interviewees exposed wider opportunity spaces for teaching aspects of this subject. From these interviews, I was able to define clear opportunity areas: 1. Incorporating digital mediums and physical games or tangible objects to teach aspects of typography. 2. Expanding the scope of my project by involving current or near-future technological advancements like augmented reality. It is possible to make use of current digital advancements like apps to suggest new forms of learning. A promising approach would be to tie in social media with the application to help users share their findings and connect with like-minded people. Similar to Wilson’s (1996) emphasis on embedding learning in relevant contexts, the interviewees stressed the relevance of informal settings and play to teach typography. Suggestions to incorporate physical games and tangible objects as a format for the outcome of the project, and possibly bridging them with digital experiences shaped the foundation for crafting experiences to teach typography. Naitik Mehta’s comment about appreciating learning in a classroom but further hoping to connect that experience with the real world prompted me to examine how teaching typography could be taken outside of the classroom and located in the urban landscape. /25 3.2 Design Research Surveys After gaining insights from interviews, I wanted to identify behavioral patterns to find out if users preferred digital mediums to printed matter when learning about typography. Polaine et al (2013) states how quantitative methods are good for creating knowledge and understanding the field. So, I decided to use surveys as a preliminary method of research to understand my user base, which was followed by gathering additional information through secondary sources like existing surveys, journal papers, and case studies. /26 3.2 Design Research: Surveys Survey 1 In the summer of 2016, I conducted two surveys. The purpose of the first survey was to recognize behavioral patterns that may aid the project. I planned to assess the ways in which apps are an engaging medium. For this, the questions were centered around understanding the type of apps people use, what their main purpose for use was, and what learning outcomes they were looking for in an app. Participant demographic consisted of a mixture of designers and non-designers. Recruitments were carried out through Facebook, personal connections and through word of mouth. There were 73 recorded responses over a period of two weeks (Appendix A). After analyzing the responses, I identified certain behavioral patterns: 1. Education-based apps were popular amongst users. Users were actively using apps like Duolingo and were open to the idea of gamification for learning. 2. It appeared that availability of features like content creation (uploading images, creating posts, etc), and access to a variety of content generated higher engagement amongst users. 3. There was a positive response for active usage of augmented reality based applications. /27 3.2 Design Research: Surveys Survey 2 Building on the results of the first survey, the purpose of the second survey was to discover how design students and professionals who don’t belong to the field of graphic design learn about typography and design. It was also to identify points of interaction with various mediums like print, apps, books, web games etc. I also wanted to find out how users benefit from digital platforms that are used for learning. Case studies and journal articles were used to gather additional information about user behavior and user interaction with relevant mediums. The questions were centered around inquiring what type of resources (books, apps, tutorials) users prefer to use to learn various aspects of design. The respondents were recruited in a similar fashion to the previous survey. The participants recruited were non-graphic design students who were interested in learning about typography. This survey received a total of 42 responses (Appendix A). Synthesis and Analysis Analysis of the results allowed me to identify learning habits and methods of users. Some of the insights gained are stated below: 1. Most participants preferred hands-on projects or methods of learning. 2. Online magazines, websites, and journals were the most widely preferred and used methods for gaining new knowledge of typography. 3. Respondents showed a strong preference for using educational apps to learn new subjects. /28 3.2 Design Research: Surveys Summary and Insights Some of the quotes from the surveys highlight suggestions that informed my direction, like the scope for hybrid models of physical objects bridged with digital mediums by using gamification to promote learning. Some act as a source of validation, while others shed light on further directions. The need for bridging interactive experiences with physical spaces and objects is clear from the above quotes. Additionally, the quotes emphasize Enid Chen’s suggestion of mixing mediums and increasing engagement. Aspects of gamification successfully encourage users to learn in a thriving but fun environment, as showcased by the app Duolingo. However, finding the right balance between gamification and education was critical. “More design software learning should be emphasized to keep updated, preferably hands-on... online tutorials fail to provide clear knowledge.” “Learning, gamified and in my pocket... Convenience is the key!” “I like when there are visuals, and elements of gamification that help to prevent boredom.” “I’d be interested in hybrid models bridging interactive/online with physical spaces and objects. I’m thinking of Osmo (kids’ learning game) as an example but applied to adults and professional development.” /29 3.3 Design Research: Precedent Review Precedent Review The precedents reviewed and assessed for this project include a variety of web-based platforms, games and existing projects. These precedents examined design outcomes that sought to teach type in a fun and gamified manner, and are open to digital and analog mediums. App-based learning platforms can be used to design learning modules that provide instant feedback. These reviews helped me in drawing parallels, gaining insights, and were a rich source of information for data collection. /31 3.3 Design Research: Precedent Review Typography Insight Learn, visualize, manipulate typefaces Typography Insight started as a master’s thesis project by Dong Yoon Park in 2011. It is an iPad application that looks at new ways of teaching typography to typography students, enthusiasts, and professionals, who wish to improve their knowledge of typography (fig. 3). It has a simple, educational interface that aims at improving the overall learning experience for users. It covers a variety of topics like fundamentals, history, kerning, typesetting and much more. Fig. 3 has been removed due to copyright restrictions. The image removed is a screenshot from typeinsight.org/ Fig. 3: Overview of Typography Insight. Typography Insight, 2011. Assessment It is an impressive attempt at teaching typography. The app leverages touch-screen gestures, high-resolution display, and varied gestures to create a unique experience (fig. 4). Features like overlapping letterforms to closely look at the difference in detail add to the app’s value as an educational tool (fig. 5). It tries to bring together the potentially less interesting aspects of type history and classification using /32 3.3 Design Research: Precedent Review an interactive format. With various features that allow users to zoom in or out of type, view typefaces in a large or a paragraph format and perform other useful interactions, this app make learning typography more interactive. It appears to be a useful tool for referencing and learning via a digital medium. It aims at maximizing the affordances of technology to teach typography. Fig. 4: Interact with typefaces through touch gestures. Typography Insight, 2011. Fig. 4 has been removed due to copyright restrictions. The image removed is a screenshot from typeinsight.org/ Fig. 5: Juxtaposition of typefaces side-by-side. Typography Insight, 2011. Author’s screenshot. Fig. 5 has been removed due to copyright restrictions. The image removed is a screenshot from typeinsight.org/ /33 3.3 Design Research: Precedent Review Type Connection Game for font pairing A web-based game named Type Connection helps users learn how to pair fonts by mimicking a traditional online dating format. It presents the user with five main characters or typefaces. To begin with, the user gets five typefaces that belong to different type families (fig. 6). Just as with a dating app, it shows potential ‘dates’ for each main character. The user is then advised on several potential strategies for pairing the font. Throughout this process, the user is provided with historical background, terminology and other information. Assessment The ‘type dating’ concept makes learning about font pairing simple and fun in an innovative fashion. Type pairing is a somewhat subjective topic. But the process of learning font pairing in this game is well-composed, informative and engaging. The game effectively shows the user different approaches to type pairing instead of creating wrong and right options, thereby encouraging users to explore all the different ways in which typefaces can be paired. The aim of the game is modest since it has only five main typefaces that can be paired. The five characters chosen Fig. 6: Choosing from 5 main characters. Type Connection, 2016, Aura Seltzer. Author’s screenshot. /34 3.3 Design Research: Precedent Review show diversity in the classification of type. Concise and appropriate information is provided at every stage of the process to ensure constant learning (fig. 7). It not only addresses the ‘hows’ and the ‘whats’ but also the ‘whys’ of font pairing. This is very important while teaching new users as they learn from trial and error. Fig. 7: Adopting a strategy for font pairing. Type Connection, 2016, Aura Seltzer. Author’s screenshot. /35 3.3 Design Research: Precedent Review Duolingo Language learning app Duolingo, first released in 2011, is an app that focuses on teaching new languages to users. The model used by Duolingo provides an appropriate case study for gamification integrated with education. This app gamifies the learning experience with a scoring system, reward system and by adding levels to complete to advance (fig.8). In his case study of Duolingo, Streeter (2015) finds that integration of learning curves as step functions can help users gain more knowledge and skills. To this, Streeter adds that these types of models can use a mixture of learning curves to enhance learning. Additionally, the application has a sleek interface and many interactive elements to enhance the experience. Fig. 8: Progress report and new levels. Duolingo, 2011. Fig.8 has been removed due to copyright restrictions. The image removed is a screenshot from www.duolingo.com Assessment Duolingo is an application that promotes learning through gamification. This approach makes the process of learning a new language easier for the user and challenges their perception of the difficulty of learning new languages (fig. 9). The app also incorporates various relevant methods like hearing or speaking sentences to keep the users engaged (see fig. 10). The users can chose the amount of time and practice they want to commit to, which makes it flexible and /36 3.3 Design Research: Precedent Review more suitable for different users’ needs. Several case studies have shown that this makes users commit to the application and practice regularly in order to learn the language. Fig. 9: Starting a course for learning French. Duolingo, 2011. Fig.9 has been removed due to copyright restrictions. The image removed is a screenshot from www.duolingo.com Fig. 10: Translating sentences by speaking, writng and hearing. Duolingo, 2011. Fig.10 has been removed due to copyright restrictions. The image removed is a screenshot from www.duolingo.com /37 3.3 Design Research: Precedent Review The Quick Brown Fox Jumps Over The Lazy Dog Memory-based card game The Quick Brown Fox Jumps Over The Lazy Dog is a typography-based memory game developed by Ps.2 Arquitetura + Design Studio. It consists of 25 different typefaces in the form of cards. The game also contains an extra booklet that gives more information about the history of the typefaces (fig. 11). The goal of the game is to help the users to recognize the differences between typefaces. Letter ‘A’ displayed on each card needs to be matched with its counterpart by the users. Some of the notable typefaces included in this game are Akzidenz Grotesk, Baskerville, Centaur, Garamond, Helvetica Rockwell, Times New Roman and Univers. Assessment This typographic memory game is beautifully designed and takes an interesting approach to help users distinguish typefaces from one another and observe subtle differences. However, some potential issues can be identified. Foremost, since it only makes use of only the letter ‘A’, it restricts the users from examining other letters in the typeface (fig. 12). It is very important to examine more than one letter when it comes to understanding the anatomy since other letterforms have different structures. It might be easy for users to lose focus of the main objective of the game, which is to observe and understand different characteristics of type families. Despite a few shortcomings, this module has potential to engage users and help them develop an eye for detail. /38 3.3 Design Research: Precedent Review Fig. 11-12: The Quick brown fox jumps over the lazy dog by PS.2 Arquitetura + Design Studio, 2010 /39 3.3 Design Research: Precedent Review Typographic Game 3D typographic puzzle Typographic Game is a game developed by graphic designer Sarah Mossong. The game consists of 72 cubes with 15 letters cut up and printed on them. Every face of every cube shows a part of a different letter, which the players can discover by matching cubes. The typographic phase ‘Typography is Art’ can be read by rearranging the cubes (fig. 13). This game was designed for an exposition in Hong Kong, to showcase abstraction of the latin alphabet, and to help people socialize. Assessment This game is simple and easy to play. It creates a lot of room for experimentation. Since every face of the cube has a part of a different letter, there are various possibilities of breaking the rules of adhering to the anatomy of a letter (see fig. 13), which opens up a new avenue for learning. With tactile objects that allow you to play and experiment without any restrictions, this game is simple yet effective. Fig. 13: Unarranged puzzle cubes. Typographic Game, Sara Mossong, 2013. /40 3.3 Design Research: Precedent Review Summary and Insights These precedents helped me to identify the disadvantages and advantages of various models and mediums. It allowed me to do research into how apps like Duolingo use mixed models to create learning curves. To understand more about gamification and new industry trends, I reviewed case studies on Duolingo and Pokémon Go. Case studies on Duolingo revealed how gamification was successful in promoting learning, while studies on Pokémon Go helped me to understand how the use of augmented reality generated engagement. Tapping into popular tech trends could offer possible future expansion opportunities for this project. ‘Typographic Game’ opened up the world of puzzles as a way of teaching. This game inspired me to explore puzzles as a medium to introduce the anatomy of typography to new users. Typographic Insight helped in realizing the potential of an app for teaching crucial aspects of typography. For example, using features like ‘Juxtaposed Comparisons’ to look at the differences between typefaces, and other features that help in comparing type structures were immensely helpful. These precedents suggested possible approaches for designing a series of physical games or gamified platforms that could integrate elements of casual and informal environments into the educational experience. /41 4. Design Explorations and Outcomes Taking a studio-based approach, and based on the information and insights gathered from the design research, I created studio prototypes and models. After conducting user-tests and observational trials of prototypes of varying fidelities at different stages of the process, I was able to observe and gather insights, analyze and synthesize the findings, and ultimately create final mockups of the card game, typographic puzzle, and the type surf app. 4.1 Design Explorations and Outcomes Target Audience To define my target audience for the games, I developed personas to understand the behavioral patterns, life goals, expectations of users, and inform the larger question of why there is a need to teach typography. Personas are profiles generated by the target audience derived from a contextual inquiry. After conducting appropriate design research, I created two persona profiles (see Appendix D), that were not real users but possessed traits based on observations and user interviews carried out during the design research. However, after developing these profiles, I realised that it limited the scope of this thesis project. Thus, I chose to focus on a broader audience to include all kinds of users who have a primary interest of learning typography in common. /44 4.1 Value Proposition Canvas Value Proposition Canvas I further created a Value Proposition Canvas (fig. 16-18), which added value to the insights found, and helped in understanding how this could benefit the general audience in mind. Developed by a platform called Strategyzer, a Value Proposition Canvas allows users to identify and map the audience’s needs, and then design services or outcomes that address those shortcomings. Based on the insights and information gathered from previous design research, I created the canvas and synthesized the qualitative information accumulated. This allowed me to identify the pains of the users, and generate pain relievers in turn. In a similar fashion, potential gains were located, and gain creators were provided. /45 4.1 Value Proposition Canvas Fig. 18: Value Proposition Canvas. Strategyzer AG, 2017. The canvas in fig.16-17 was analyzed and insights were ranked in order of importance. The three most important insights were recognized and the canvas was created again. /46 4.1 Value Proposition Canvas /47 4.2 Design Explorations and Outcomes Studio Prototyping Having understood the audiences’ needs by creating a value proposition canvas, I aimed at creating prototypes of varying fidelities. My aim was to research by making different prototypes, which was guided by the research question, “How can users develop an eye for detail in typography?” Prototyping, as a method, allowed me to test hypotheses, clarify assumptions, notice behavioral patterns, identify users’ needs, and compare options and variations. I developed a series of games including puzzles, card game, and a digital platform to facilitate an introduction to typography for the users. The physical games created were a puzzle-based game and a card game. The puzzle-based game aimed to introduce the format of instruction-less play to allow users to experiment freely and understand the anatomy of type and the structure of letterforms, by focusing on the details of letterforms, and understanding the physicality and versatility of individual letters. The card game aimed to help users understand the classification of type, and develop an eye for detail. It used the gameplay of the popular game ‘Snap’ and four typefaces as suits to achieve its purpose. The ‘Type Surf’ application examined a playful yet educational experience to help users understand how typography creates a mood and tone. It allowed users to find typography in their city. Every typographic sign discovered contained information about its history, classification, and significance. Further, the app allowed users to edit the found typography. This experimentation with type would help users understand how typography situates itself contextually to create a tone and mood. Constant feedback from peer review sessions and weekly studio classes with facilitators provided insights and feedback. I further conducted evaluative user testing with users at various stages of development of the games with fellow classmates and other participants. These aided my design development stages and I was able to recognize the aspects of the games that worked from those that did not. /48 4.2.1 Studio Prototyping Design Exploration: Type Surf Having read Stephen Coles’ book The Field Guide to Typography (2008), I was inspired to understand how users can learn from typography in our surroundings. Coles (2008) mentioned about how type geeks are similar to bird watchers (see section 2.3). Just as birdwatchers use bird manuals to identify birds, I aimed to design a tool in the form of an application that helps enthusiasts identify typefaces in their city and understand their significance, classification and history. Because typography is visible, and exists in a tangible way on real surfaces, it is physical, so physical systems must be acknowledged as a major driver in typographic production (Crisp, 2012, p.39). The first step towards creating an application was to recognize the typography present in Vancouver city. I observed, explored and documented the typography of six prominent neighborhoods in Vancouver: Kitsilano, Downtown Gastown, Kerrisdale, Main Street, Fairview and Granville Island (fig 19). These were compiled in the form of a printed book called ‘Vancouver Graphics’ (see p.54). Fig. 19: Travel notes while documenting different neighbourhoods of Vancouver. /49 4.2.1 Studio Prototyping: Type Surf First Iteration:Vancouver Graphics The first iteration focused on recognizing the typography present in Vancouver city. Found typography was compiled in the form of a printed book called ‘Vancouver Graphics’ (see fig. 20-24). This book was created to document and illustrate the typography present in Vancouver. From this exercise, I learned that every neighborhood has unique typography that is shaped by trends over the years (see fig. 25). For example, Main Street was once known as the ‘Antique Row’ of Vancouver (fig. 26). This inspired unique handlettered and script typography around the neighborhood, which can be found today on the signages of thrift stores and restaurants. However, through usertesting and feedback from peers and faculty, I soon learned that the book lacked information about found typefaces and acted as a one-way channel of interaction between the user and the content. Fig. 20: Pages from ‘Vancouver Graphics’ /50 4.2.1 Studio Prototyping: Type Surf Fig. 21-24: Pages from ‘Vancouver Graphics’ /51 4.2.1 Studio Prototyping: Type Surf Fig. 25: Typography documented in Granville Island. Pages from ‘Vancouver Graphics’ /52 Fig. 16: Typography documented on Granville Island. Pages from ‘Vancouver Graphics’, 2016. 4.2.1 Studio Prototyping: Type Surf Fig. 26: Typography documented on Main Street. Pages from ‘Vancouver Graphics’ /53 4.2.1 Studio Prototyping: Type Surf Second Iteration: ‘Type Surf’ Application Prensky (2007) states that we are going through a constantly changing society in which technologies like mobile phones are affecting how our daily tasks are performed. This challenges the educational world to adapt by creating digital learning platforms. However, studies show that apps (like Duolingo) offer the most ubiquitous form of communication, collaboration and gamification a learning environment can offer (Khaddage & Lattemann, 2013). My aim is to design an interactive tool that will make learning typgoraphy a fun process. As I look at how users can learn about typography from their surroundings, I remodel my question: “Can the importance of typography be explained to users through an interactive experience? How can users engage with the typography present in their surroundings?” This application focuses on gamifying this journey and increasing awareness of environmental typography. It promotes learning through a new channel. The primary goal of users shifts from simply observing found typography to actively finding typography in their surroundings, and further editing and sharing found typography. Editing found typography and creatively experimenting with typography can help users be more sensitive to the mood and tone generated by typography. Here, the secondary goal is to provide information about the significance, classification, and history of typography. /54 4.2.1 Studio Prototyping: Type Surf Fig. 27: Mindmap for Type Surfing - an educational yet playful typography guide /55 4.2.1 Studio Prototyping: Type Surf After creating personas (see section 4.1) and understanding the audience’s needs, I defined the concept of the app ‘Type Surf’ by creating mind maps and identifying keywords (fig. 27, p.59). I identified several directions for ‘Type Surf’ by shifting keywords. However, the primary goal was to create a playful yet educational experience for the users. Appropriate keywords for this outcome would be: Typography, Play, Education, Mapping, Engagement. Various stages in the user’s journey were imagined. A number of possibilities for how the content could be categorized were explored (fig 29). To lay out the content within the app and visualize the journey of the user, a user flow map of ‘Type Surf’ was created (see fig. 30), followed by a sitemap. Throughout this process, I focused on the hierarchy and display of information to create a smooth transition between pages. Low-fidelity paper prototypes in the form of wireframes were drawn to structure the content of the application (fig. 28). After evaluating paper prototypes, digital wireframes similar to these were used to refine content and visual layouts (fig. 31, p. 64). Fig. 28: Early paper wireframes and sketches. These focused on interactions, content and gamification elements that were later reworked on. /56 4.2.1 Studio Prototyping: Type Surf Fig. 29: Early ideation of content structure. /57 4.2.1 Studio Prototyping: Type Surf Type Surf: User Flow /58 4.2.1 Studio Prototyping: Type Surf Fig. 30: User Flow of Type Surf /59 4.2.1 Studio Prototyping: Type Surf Fig. 31: Digital wireframes. Paper wireframes and digital wireframes created for the ‘User Flow’ were refined and redesigned to make these digital wireframes. Changes were made for the layout, design elements and structure of the application. /60 4.2.1 Studio Prototyping: Type Surf Insights and Observations ‘Vancouver Graphics’ paved way for a one-way channel between the users and documented typography, since it only presented visual information. Feedback from facilitators and peers about a lack of interaction urged me to focus on generating engagement and interaction. An interactive application that allowed users to edit environmental typography would suggest deeper participation. Initially, the content was categorized in eight sections in the application: Explore, Identify, Connect, Collect, Admire, Overview, Communicate, and Travel (see fig. 29, p. 61). However, user testing revealed that the sections had overlapping content and required to be simplified. Thus, the categories were restructured to three concise sections: Explore, My Collections, and Connect. Further conversations with the users on the app led to new ideas for future iterations of the application. By involving rapidly developing technologies like augmented or virtual reality, engagement and interaction between users and the content could be boosted. For instance, as studies show that applications like Pokemon Go have generated more engagement and created immersive experiences for users. Although merging augmented or virtual reality with the experience of editing typography in real time is beyond the scope of this project, it is definitely a recommendation for future iterations of this project. /61 4.2.2 Design Explorations and Outcomes: Studio Prototyping Exploring Puzzles The history of typography reflects a continual tension between the hand and the machine, the organic and the geometric, the human body and the abstract system, which continue to energize typography even today (Lupton, 2004, p.15). Through decades of reform and revolution–from the industrial revolution to the nineteenth century Arts and Crafts movement–experiments have approached the latin alphabet for developing new typefaces. For instance, at the Bauhaus (1927), the construction of alphabets from basic geometric forms–the circle, triangle, and square–were viewed as elements of a universal language of vision (Lupton, 2004, p. 27). Providing users with a deeper sensitivity to letterforms and the structure of the type is, thus, very important while creating familiarity with the anatomy of type, and while drawing attention to the physicality and versatility of letterforms. In order to introduce users to the anatomy of typography and sensitize them to letterforms, I designed a typography-based puzzle model. This was an instruction-less set up that encouraged risk-taking. I created various in-studio prototypes and observed user behavior, obtained feedback, and tested different design ideas. Further, on separate occasions, I conducted evaluative user tests with users from different backgrounds. Fellow classmates, 3rd and 4th-year industrial design students, and non-designers were among the users who participated. /62 4.2.2 Studio Prototyping: Exploring Puzzles Paper Prototype A The initial iteration was a typography flip book. Each page contained a letter in Helvetica typeface and was cut into thirds. The book was engineered in a way that by flipping the little page-thirds, users could create new letterforms. The whole purpose of this exercise was to let users explore and understand type structures, and deconstruct letterforms. Fig. 32: User testing paper prototype A. /63 4.2.2 Studio Prototyping: Exploring Puzzles Insights and Observations The aim of this exercise was to allow users to explore letterforms without any rules. However, it was broad and only allowed users to create vague structures that did not resemble latin alphabets. Some of the letters chosen like ‘H’ seemed outof-place when cutting into thirds since the middle section contained a smaller ‘H’ and couldn’t be merged effectively, unlike letters like C or O. Although this model did not prove successful in introducing anatomy of typography, I decided to create new models which would allow users to experiment with letterforms. /64 4.2.2 Studio Prototyping: Exploring Puzzles Paper Prototype B Drawing from the insights gained from Prototype A, I decided to test a new version of the prototype. This rough paper prototype contained variations of the uppercase ‘A’ in over ten different typefaces. Instead of having a bound book, I aimed to lay out letters on separate squares to make it easier for the participants to interact with the pieces. No instructions were given to the users, to allow uninterrupted interaction with the puzzle pieces. Fig. 33: User testing paper prototype B. /65 4.2.2 Studio Prototyping: Exploring Puzzles Insights and Observations 1. Some users’ instinct was to join the right pieces together to form a complete letter (see below). Since they lacked an eye for detail and were not familiar with the anatomy of type, it was easy for them to mismatch parts. 2. A section of users instinctively experimented with the pieces. Participants created combinations of various parts and attempted at designing their own unique letterform(fig. 35). Fig. 34: User testing paper prototype B. Some users’ instinct was to join the right pieces together to form a complete letter. /66 4.2.2 Studio Prototyping: Exploring Puzzles Paper Prototype C Informed by insights from prototype B, I developed a third prototype. It consisted of a variety of letters to create room for experimentation. The inclusion of multiple copies of each letter in different typefaces added a variety of stroke widths, type styles, and visual diversity. Fig. 35: User testing paper prototype C. /67 4.2.2 Studio Prototyping: Exploring Puzzles Insights and Observations 1. Instead of instinctively joining similar pieces to form a letter, most of the users experimented with pieces to create new letterforms. 2. As compared to the previous sessions, users were observing carefully and paying attention to detail in every piece. 3. Users appeared to utilize every piece in a new way. For instance, in Fig. 35 (p. 71), you can see how a part of the letter ‘D’ was used as ‘T’ to spell the word ‘Natalia’. 4. An important behavioral insight was that almost all the users checked the back of each piece to find information. This inspired me to utilize the space behind the cards to indicate the anatomy of type. Fig. 36: User testing paper prototype C. /68 4.2.3 Design Explorations and Outcomes: Studio Prototyping Card Games as a Form of Teaching After familiarizing users with the anatomy of typefaces, the next step was to provide a basic understanding of how the latin alphabet could take on a large range of shapes and proportions to form different typefaces. This diversity stemmed from different origins, the various tools used to create the type, or even differences in culture (Spiekermann, 2012). Every classification system is informed by key features of typefaces that helps users identify which category the typeface falls under. The card game aimed at helping users identify those key features and help distinguish typefaces from one another. I reviewed precedents and interviewed relevant professionals to gain insights on how classification of typefaces could be introduced as a subject to users. Upon reviewing the game The Quick Brown Fox Jumps Over The Lazy Dog (see section 3.3, p. 38), I realized that a memory-based card game may not be the most effective channel since it diffuses the purpose of training the eye to look for details. However, multi-player card games can certainly enhance interaction among users. Card games can not only be used to enhance learning, but also to practice important skills such as problem-solving, planning, and strategic thinking, besides paving a way for instructional learning. Card games instill competitiveness and make the learning process challenging and fun (Van der Linden, 2000). Thus, I developed a card game that helped users understand how to distinguish between typefaces and develop an eye for detail. /69 4.2.3 Studio Prototyping: Card Game The objective of the card game was to draw attention of the users to the details of different typefaces, and identify unique characteristics true to its type family. Designed for users of all ages, the card game could be played by 2 or more players at the same time. Using existing and familiar card games, the maker could introduce new concepts that fit into the general model of the game. For this game, I used the gameplay model of the popular game ‘Snap’, a game developed towards the end of the 19th century (Albert A, 1945). Fig. 37: Observational trials of the typographic card game. The aim was to take turns to place a card in the centre, and say ‘Snap!’ when two matching cards were placed over one another. In this case, when two cards belonging to the same type family are placed over one another, the player who last placed the card yells ‘Snap!’ and claim it. The player with the most number of correctly called cards would win the game. /70 4.2.3 Studio Prototyping: Card Game Observational Trials The users were chosen at random and only a few participants had formal knowledge of typography. The deck of cards had serif typefaces in black and sans serif typefaces in red. Each family contained 3 uppercase, 3 lowercase, 3 numbers, and 3 special characters. The card deck of 48 cards was distributed equally amongst four players. A set of ‘Knowledge Cards’ showcased the character set of type families for reference and inform users about the history of the particular type family (see below). Fig. 38: Observational trials of the typographic card game. /71 4.2.3 Studio Prototyping: Card Game Insights and Observations 1. During the first round of trial, the participants played carefully and slowly to get a closer look at the cards. Unfamiliarity with typefaces and their characteristics made players feel confused. This is when players heavily relied on the knowledge cards. 2. Some of the players were quick in identifying similarities while others struggled. Usage of red and black colors to distinguish serifs and sans serifs made it easy to distinguish between suits, but decreased the difficulty level. 3. After roughly 4-5 rounds, the players did not feel the need to refer to the knowledge cards. However, they would occasionally pause the game to look at the cards carefully. /72 4.2.3 Studio Prototyping Summary and further directions for design outcomes Through multiple rounds of iterations, I aimed at finding the right balance between a challenging game and a deeper learning experience. Hence, for the final iteration, I decided to have all suits of the deck in one color (black) to make it more challenging for the players. After the first round of testing, I realized that the card deck needed more than just uppercase and lowercase letters. I decided to add 3 special characters and 3 numbers to each suit. This added variety and increased the level of difficulty. Considerations for making changes like no two cards having the same number or character on them were made, but not carried out since this would require advanced-level players. However, in the future, it could be introduced as an extension pack for advanced players. /73 5. Final Mock ups The final outcome for this project results in three components: a puzzle system called Tuzzle, a typographic card game called Type Rush, and Type Surf, an application. Rough prototypes and mockups of the application are produced for the project. These games aim to address different aspects of typography, and suggest an alternate way of learning fundamentals of typography. 5.1 Final mock ups Tuzzle: The Type Puzzle Tuzzle, the typographic puzzle game includes the letters ‘A’ ‘O’ ‘C’ ‘N’ ‘Q’ ‘B’ ‘L’ ‘S’ ‘K’ and ‘R’ as puzzle pieces. These letters address the different parts of the anatomy of typography. Every letter is divided into four equal parts, where the back of every part provides users with the anatomy of the particular letter. Some letters have multiple copies in both serifs and sans serifs to accommodate the different structures for serifs and sans serifs. This allows users to experiment and create new or mismatched letterforms (see Appendix B for the full set). /76 5.1 Final mock ups: Tuzzle Fig. 39: Puzzle piece with a part of the letter ‘K’, and its back with the anatomy Fig. 30: Puzzle piece with a part of the letter ‘Q’, and its back with the anatomy /77 5.1 Final mock ups: Tuzzle Fig. 41: Puzzle piece ‘S’ Fig. 42: Puzzle piece ‘R’ /78 5.1 Final mock ups: Tuzzle Fig. 43: Puzzle piece ‘O’ Fig. 44: Puzzle piece ‘N’ /79 5.1 Final mock ups: Tuzzle Fig. 45: Final ‘Tuzzle’ box Fig. 46: Puzzle piece ‘B’ /80 5.2 Final mock ups Type Rush: Playing Cards Type Rush, the typographic card game, is based on the gameplay of the popular game ‘Snap’. This game contains a deck of 48 cards, 4 knowledge cards, and one type classification poster (fig. 47-56) (see Appendix C for the full set of cards). Components: Card deck The card deck contains 48 playing cards. This includes 4 typographic suits. Each suit contains 3 uppercase letters, 3 lowercase letters, 3 special characters and 3 numbers. The 4 typographic families are Helvetica, Didot, Cervo and Roboto Slab. Fig. 47: Type Rush playing cards. /82 5.2 Final mock ups: Type Rush Fig. 48-49: Type Rush playing cards. /83 5.2 Final mock ups: Type Rush Fig. 50-52: Type Rush playing cards. /84 5.2 Final mock ups: Type Rush Components: Knowledge Cards The card set also contains four knowledge cards that represent the four typographic suits. These provide users with historical context about each type family. These cards can be used as a reference when users want to look at the details of the character set of each type family. Fig. 53: Type Rush: Knowledge cards /85 5.2 Final mock ups: Type Rush /86 5.2 Final mock ups: Type Rush Fig. 54-55: Type Rush: Knowledge cards /87 5.2 Final mock ups: Type Rush Components: Type Classification Poster The game also contains a type classification poster. This poster provides an overview of how users can identify different type families based on certain characteristics and briefly talks about the history of each category. Fig. 56: Type Rush: Type classification poster /88 5.3 Final mock ups Type Surf: Application After developing wireframes (section 4.2.1, p.60) for Type Surf application, high fidelity mockups were created for the app, which includes a few screens from the segments ‘My Collections’ and ‘Type Room’. This version of the application allows users to explore their neighborhoods for typographic signs and learn more about typography. These signs can be saved into collections based on historic context, classification or any other custom category. Collections can be made public or private, and users can explore collections that made by other users. The saved type signages can also be taken into Type Room and edited with typefaces of their choice. Future developments in augmented reality will allow users to edit signages in the Type Room in real time, however, currently this is not a feature. /89 5.3 Final mock ups: Type Surf Features of Type Surf: Welcome Screen and Home page Fig. 57: Type Surf: Welcome Screen This screen prompts users to ‘Get Started’ by logging in or signing up for the application. /90 Fig. 58: Type Surf: Home page The users are greeted with a preview of popular collections in the form of a ‘News Feed’. 5.3 Final mock ups: Type Surf Features of Type Surf: My Collections In this segment, saved type marks are categorized in different collections based on the users’ choice. Users can also explore other type marks nearby or sort type marks based on neighborhoods. These collections can be made private or public on the app ‘Type Surf’. Collections can be based on type style, classification, historical period or custom categories. Fig. 61-62: Type Surf: My Collections In this section, users can view all of their saved collections in ‘All’, collections of signages from the location they are currently in in ‘Near Me’, sort collections by neighbourhood in ‘Neighbourhoods’ and view the individual type marks saved by them in ‘Save’. /91 5.3 Final mock ups: Type Surf Features of Type Surf: Type Room One of the categories of the Type Surf app is the ‘Type Room’. Here, users can access the type marks they have saved and created their own versions of the sign by choosing from a variety of free fonts available in the app. This will allow them to test how certain typefaces are appropriate for the context of the signage, and some aren’t. For example, if a user of ‘Type Surf’ replaces type on a ‘Stop’ sign with the typeface ‘Comic Sans’, they will be able to see how the original typeface chosen affects the mood of the signage. Fig. 59-60: Type Surf: Type Room Type Room allows users to reimagine existing signages in new ways. /92 6.0 Conclusions and Future Directions In this thesis, I first focus on how games can be used to teach typography, and later on how users can learn about typography from their surroundings. Card games, puzzles, and an application are the various methods of learning suggested in this project. Further user testing and refinement for all outcomes would be the first steps in the future, as I continue the project. One way of expanding the scope of the digital application, ‘Type Surf’, will be to integrate augmented reality into it. With augmented reality, the application can work in real-time with the use of smart technology to juxtapose typefaces over the signages and get instant feedback. Already existing apps like the Google Translate App utilize augmented reality to create similar experiences for users. For ‘Type Rush’ , the card game, extension packs to cater to typography enthusiasts and advanced players can be designed in the future. Although the outcomes generated by this project are not restricted to a limited set of audience, with additional research, it can also be exclusively introduced as a learning kit for teaching fundamentals of typography to school students. High school students especially can benefit from an early introduction to typography as a subject. Design researchers and other designers can build upon this approach of making typography accessible to a wider and general audience by creating gamified experiences to address fundamentals of typography. Making users aware of the typography that exists in their environment, and the role it plays in their daily life is of importance. With further research, this project can act as a starting point for creating experiences that allow users to engage with typography using augmented reality. Instruction-less play and unstructured learning can be seen as strong approaches to crafting meaningful learning experiences to teach typography. /94 7. Bibliography 7.0 Bibliography Ambrose, G. & Harris, P. (2015). Design thinking for visual communication (2nd ed.). Fairchild Books. Baines, P. & Haslam, A. (2002). Type & typography (1st ed.). London. Baker A, Oh Navarro E, van der Hoek A. An experimental card game for teaching software engineering processes. J Syst Software. 2005;75:3–16. Bosshard, H. (2016). The lettering of city buildings: observation and readability. Design Observer. Retrieved 20 October 2016, from Brookfield, S. (1988). Understanding and facilitating adult learning a comprehensive analysis of principles and effective practices (1st ed.). Buckingham: Open University Press. Butterick, M. (2015). Why typography matters | Butterick’s Practical Typography. Practicaltypography.com. Retrieved 14 July 2016, from Cooper, A. (1999). The inmates are running the asylum. Macmillan. Dawson, P. (2013). The Field Guide To Typography (1st ed.). China: Quid Publishing. Crisp, Denise Gonzales. 2012. Typography. 1st ed. New York: Thames & Hudson. Dair, C. (1967). Design with type (2nd ed.). Toronto: University of Toronto Press, Scholarly Publishing Division. Design: Connecting Theories of Rhetoric, Literacy and Design, The Design Journal, 17:1, 29-43 G. Mauricio Mejía & Sauman Chu (2014) A Model for Visual Communication Heller, S. (2012). The Education of a Typographer (1st ed.). New York: Skyhorse Publishing, Inc. Heller, S., & Meggs, P. (2006). Texts on type (1st ed.). New York: Allworth Press. Hoeks, H., Lentjes, E., & Bil’ak, P. (2015). The Triumph of Typography (1st ed.). Lannoo Publishers. /96 7.0 Bibliography Jarlehed, J. & Jaworski, A. (2015). Typographic landscaping: creativity, ideology, movement. Social Semiotics, 25(2), 117-125. Johnson, B. (2017). 3 Types of Unintentional Learning (And How to Make Them Intentional). Edutopia. Retrieved 18 January 2017, from Khaddage, F. Lanham E. and Zhou, W. (2009)”A Mobile Learning Model for Universities, -Re-blending the Current Learning Environment. Published in the special edition of “The International Journal of Interactive Mobile Technologies. ISSN: 1865-7923 Khaddage, F., & Cosío, J. (2014). Trends and Barriers on the Fusion of Mobile Apps in Higher Education Where to Next and How?. Retrieved from MacKeracher, D. (n.d.). Making Sense of Adult Learning By(Second ed.). Toronto: University of Toronto Press. Meier, A. (2015). Recording the Fading Local Typography of Our Cities. Hyperallergic. Retrieved 22 March 2016, from Ostrow, Albert A (1945). The Complete Card Player. New York: McGraw-Hill. p. 71. Poynor, R. (2017). Typographic Stories of the City Streets. Design Observer. Retrieved 20 January 2017, from Prensky, M. (2007). How to teach with technology: Keeping both teachers and students comfortable in an era of exponential change. Emerging technologies for learning, 2(4). Streeter, M. (2015). Mixture Modelling of Individual Learning Curves. Su, T., Cheng, M.-T., & Lin, S.-H. (2014). Investigating the Effectiveness of an Educational Card Game for Learning How Human Immunology Is Regulated. CBE Life Sciences Education, 13(3), 504–515. Van der Linden J, Erkens G, Schmidt H, Renshaw P. Collaborative Learning. In: Simons RJ, van der Linden J, Duffy T., editors. New Learning. Springer Netherlands; 2000. pp. 37–54. Wilson, B. (1996). Constructivist learning environments (1st ed.). Englewood Cliffs, N.J.: Educational Technology Publications. /97 A Appendix 8.0 Appendix: Survey 1 Survey 1 Apps & more A simple survey to understand how and why you use apps * Required 1. Do you have a smart phone? * Mark only one oval. Yes No 2. What type of operating system does your phone use? * Mark only one oval. Apple Android Blackberry Other: 3. What kind of apps do you have on your phone? * Check all that apply. Social media apps : Facebook, Instagram, Snapchat, etc Navigation-based apps : Maps, Transit, etc Music: iTunes, Spotify, etc Games Pinterest, Flipboard, etc Health-based apps: Fitness tracker, Workout buddy, etc Online shopping apps Augmented reality (Pokemon Go, Yelp, etc) Other: 4. What are the Top 3 apps that you use? * /99 2. What type of operating system does your phone use? * Mark only one oval. Apple 8.0 Android Appendix: Survey 1 Blackberry Other: 3. What kind of apps do you have on your phone? * Check all that apply. Social media apps : Facebook, Instagram, Snapchat, etc Navigation-based apps : Maps, Transit, etc Music: iTunes, Spotify, etc Games Pinterest, Flipboard, etc Health-based apps: Fitness tracker, Workout buddy, etc Online shopping apps Augmented reality (Pokemon Go, Yelp, etc) Other: 4. What are the Top 3 apps that you use? * 5. What do you use apps for? * Check all that apply. Inspiration (pinterest, flipboard, etc) Specific information (maps, transit, events, weather etc) Connect with people (through social media) Entertainment Other: 6. What type of gaming apps do you prefer? * Check all that apply. Strategy Trivia Role play simulation Puzzle Arcade Augmented reality (e.g.: pokemon go) Other: 7. Which social media based app do you use the most? * Mark only one oval. /100 Instagram Facebook 6. What type of gaming apps do you prefer? * Check all that apply. Strategy 8.0 Trivia Appendix: Survey 1 Role play simulation Puzzle Arcade Augmented reality (e.g.: pokemon go) Other: 7. Which social media based app do you use the most? * Mark only one oval. Instagram Facebook Snapchat Twitter Pinterest Tumblr WhatsApp Other: 8. What's the best aspect about the app that you chose from the previous question? * Check all that apply. Simple data sharing Variety of content Easy to find like-minded people Content creation Communication Other: Powered by /101 8.0 Appendix: Survey 1 Survey 1: Responses /102 8.0 Appendix: Survey 1 /103 8.0 Appendix: Survey 1 /104 8.0 Appendix: Survey 1 /105 8.0 Appendix: Survey 2 Survey 2 Learning tools/methods for designers A quick survey targeting designers (students, learners, professionals) and their learning methods. * Required 1. What is your current (work) status? * Mark only one oval. Student Working professional Freelancer Other: 2. What kind of learning tools do you prefer to keep yourself updated about new developments in your area of interest? * Check all that apply. Read books Read material online Hands-on experience (small projects, assignments, etc) Apps or Websites that allow to you learn + practice on the go Online tutorials Other: 3. If you answered "Apps or Websites", can you name at least two apps you have found useful so far? 4. What feature(s) do you best like about the above mentioned apps/websites? /106 5. What would be an important feature of a learning tool you'd be interested in? * Check all that apply. Available for free 3. If you answered "Apps or Websites", can you name at least two apps you have found useful so far? 8.0 4. What feature(s) do you best like about the above mentioned Appendix: Survey 2apps/websites? 5. What would be an important feature of a learning tool you'd be interested in? * Check all that apply. Available for free Can be accessed online Involves collaboration Involves other people/group learning On the go Other: 6. How much are you willing to invest in getting access to learning tools (books, apps, monthly subscriptions, etc) related to your area of interest? * Mark only one oval. Under $25 $25 - $50 I don't care about the cost Free material Other: 7. If you would like to tell me anything else about the kind of learning methods/apps/tools you prefer or like, feel free :) Powered by /107 8.0 Appendix: Survey 2 Survey 2: Responses /108 8.0 Appendix: Survey 2 /109 8.0 Appendix: Survey 2 /110 8.0 Appendix: Survey 2 /111 B Appendix 8.0 Appendix: Tuzzle Tuzzle: Full Puzzle Set /113 8.0 Appendix: Tuzzle /114 8.0 Appendix: Tuzzle /115 8.0 Appendix: Tuzzle /116 8.0 Appendix: Tuzzle /117 C Appendix 8.0 Appendix: Type Rush Type Rush: Full set of cards Helvetica /119 8.0 Appendix: Type Rush /120 8.0 Appendix: Type Rush /121 8.0 Appendix: Type Rush /122 8.0 Appendix: Type Rush Type Rush: Full set of cards Didot /123 8.0 Appendix: Type Rush /124 8.0 Appendix: Type Rush /125 8.0 Appendix: Type Rush /126 8.0 Appendix: Type Rush Type Rush: Full set of cards Cervo /127 8.0 Appendix: Type Rush /128 8.0 Appendix: Type Rush /129 8.0 Appendix: Type Rush /130 8.0 Appendix: Type Rush Type Rush: Full set of cards Roboto Slab /131 8.0 Appendix: Type Rush /132 8.0 Appendix: Type Rush /133 8.0 Appendix: Type Rush /134 8.0 Appendix: Type Surf Type Surf: Prototypes and Mock ups I developed high-fidelity prototypes on Adobe Experience Design. These screens show how the user would navigate within the app while walking in the city and collecting typographic tags. Typographic landmarks are represented by circular colored dots on the map. These are color coded based on classification of type. The color and the category names can be customised by the user. Upon clicking discovered signs, the user can view a basic description of the signage documented. If a sign from a new category is discovered, the app provides a brief introduction about the classification. Main menu can be accessed through the stack icon on the top right corner. /135 8.0 Appendix: Type Surf /136 D Appendix 8.0 Appendix: Persona Development Persona A Fig. 14: Persona A: Michael Michael is about to graduate as a product designer from a local design university. Throughout his four years at university, he spent time taking all courses that were relevant to his program. Now that he is in his last year of his program, he is working on building his resume and portfolio. He realizes the importance of knowing basic typography and design skills since he wants to create a visually stunning portfolio website to display his projects. To keep himself up-to-date with the current trends and industry changes, he reads e-books, design magazines, and online articles. He tries to keep abreast with the latest developments in the industry and learn new skills. He describes himself as a hard worker and a fast learner, who is always ready to take on new projects. Michael likes being active on social media and networking to build industry connections. He is tech-savvy and is learning to code for the past few months. He is looking for ways to learn basic typography skills through games like Kern Type. /138 8.0 Appendix: Persona Development Persona B Fig. 15: Persona B: Leah Leah scored an internship at the start-up right after she graduated, and was offered a full-time position later. She believes that apps are changing the way we manage our lives and learn new things. Her aim is to create applications that make a difference in users’ lives. Over the past 6 years, she realized the need to learn UI design to avoid feeling disconnected when the project moves to the design phase. In her free time, Leah loves exploring the city and going on hikes. She aims to move to a city where there are more opportunities in the tech industry. She is a keen learner and usually picks up a lot of insights from networking and building connections. /139 8.0 Appendix: Value Proposition Canvas The Value Proposition Canvas Value Proposition a starter kit or module that teaches basics of typography to beginner-level students or non-graphic designers through a variety of casual games Customer Segment Gain Creators Products & Services Gains -starter kit (instruction less or minimum instructions) to create an open environment for learning -casual environment with a variety of materials that teach the basics of typography -2+ participants to promote social engagement, flow and collective learning -different skill levels Beginner or Advanced -a starter kit or module that teaches basics of typography to beginner-level students or non-graphic designers through a variety of casual games Pain Relievers -more variety of smaller tasks or games - less complex terms, and simpler information -casual environment that provokes conversation, discussion - casual env also means no deadlines, formal course or pressure -concise yet important information -customized games and carefully crafted material that can be used easily by different kind of learners -instant feedback : Strategyzer AG The makers of Business Model Generation and Strategyzer Fig. 16: Value Proposition Canvas. Strategyzer AG, 2017. /140 beginner-level students, non-graphic designers, design students -more casual, less formal - no deadlines, more relaxed + fun -less amount of dedicated time or commitment ( unlike a formal course) -flatter, smoother learning curve -make them feel more in-sync with current trends and topics -connect with other designers -simple, convenient Customer -variety so that they don’t get bored or lose interest Job(s) quickly -find concise, apt materi-big relief would be being familiar with, if not fluent/al pro in typography - relaxed, non-burdened way of -measure success also through level learning of personal satisfaction and progress -advice/tips/tricks from an expert -finding a way to make his own work look nice+appealing -struggling to visually/typographically communicate the right message -doesn’t have time for another class -have basic knowledge about -doesn’t want to be burdened with more typography coursework, deadlines, homework -feel independent ; know -too many reference materials ‘something’ if not every-steep learning curve, too many technicalities and thing complex terms/process -is busy and cannot afford to invest too much money,time -can’t make his work (presentations, etc) look appealing and professional -has to be dependent on someone else for the graphic design work -fears looking stupid or uninformed in front of others -wants to be able to have a decent amount of graphic design skills Pains strategyzer.com 8.0 Appendix: Value Proposition Canvas Fig. 17: Value Proposition Canvas. Strategyzer AG, 2017. Creating a more detailed canvas, addings collected insights and fleshing out possible pains, gains and customer insights before ranking them in order of importance. /141 2017 Typography is a complex subject and a critical skill for designers. While numerous resources exist to aid graphic design students in the learning of typography, they tend to be limited to a classroom setting for this specific subset of designers. With the use of collaborative activities typography can be made more accessible to the general audience as well. Through studio-based research, this thesis examines how a variety of games and exercises can be used to generate engagement, and facilitate learning of various aspects of typography for any one who is interested in learning about typography. Emily Carr University of Art + Design © Puja Khurana, 2017