DESIGN APPRENTICEKristin Knoerlein’s MFA thesis mobile app prototype and website

Project OverviewFor the completion of my MFA Integrated Design degree, I created Design Apprentice (Design App), a mobile

application game where students and individuals learn design principles, compete to win prizes, and become a part of their local design community.

My role was to research, design, write all content, apply proper information architecture practices, perform user testing, produce the final prototype, and create marketing materials for this project.

Discovery PhaseAfter a SWOT analysis and other competitive research were performed, no direct competitors existed in this

space. With a lack of competition alongside evidence showing that m-learning and serious games are effective ways to learn, the idea of a graphic design mobile game continued to have potential.

Informed DecisionsA survey was deployed to gauge interest, make audience decisions, and content decisions. User learning styles, gamer motivations, device consumption, and professional resources were considered when making decisions.

Process FlowThe process flow takes the information architecture a step further, helping to illustrate the full gaming

experience. Each box contains specific screen options which require design consideration. This helps to visualize the user experience and create a road map for the design process.

Design PhaseA mood board was created to collect inspirational design elements, colors, textures, typography samples, and photography while keeping the target audience in mind. Referencing this mood board throughout the design

process helps to consistently communicate the brand across each of the deliverables.

Research Phase

Primary Users & Personas

STUDENTS TAKING ENTRY LEVEL DESIGN COURSEStudents in a classroom setting who are required to learn the graphic design related materials. This includes undergraduate students, continuing education students, high school students or anyone learning entry level graphic design principles.

Secondary Users & Personas

GRAPHIC DESIGNERS AND BUSINESS PROFESSIONALSProfessionals looking to review the principles, those who work designers, or those who make design decisions to create visuals for marketing, Powerpoint presentations, generating social media posts, or making decisions on branding collateral.

Facilitator Users & Persona

FACILITATORS OR PROFESSORSThis is the user who would integrate such an app into their classroom

The Idea

If m-learning and gamification are effective when applied to other topics, could they also be applied to graphic design?

Could graphic design principles be taught within a participatory digital environment where learning is both portable and enjoyable?

Could such technology be integrated into the classroom?

Could it provide professional graphic designers with valuable resources?

Could it drive awareness and interest to the field of graphic design?

This is where my thesis journey began.

Introduction

Technology is a major part of our lives. Between smartphones, tablets, wearable devices and personal computers, we are more informed and connected than ever. Information is literally at our fingertips.

Much of this functionality comes from mobile applications. From using GPS, reading the latest news, messaging a friend, or discovering a new recipe, apps have seamlessly integrated into our daily life. With the growing success of the application market, mobile apps have expanded beyond task-focused functionality and into the teaching of new skills.

Mobile learning or m-learning is defined as distance education supported by mobile devices using wireless technology. Many of these successful m-learning apps also focus on presenting tasks in a game-like format to further challenge the user while keeping them entertained. This is the process of gamification.

The NameIt was important for the name to communicate the subject design as well as to embody the idea of training and learning. The name Design Apprentice was selected because it meets these goals while also having the ability to shorten to Design App, which describes the product itself—a Design Application. This play on the word Apprentice added an “a-ha” moment that confirmed the decision.

Three major components to Design App

The development of a mobile app prototype

The focus on pedagogy practices

The gamification of graphic design.

App Store Downloads

2011 • 14 billion

2012 • 30 billion

2013 • 50 billion

2014 • 75 billion

2015 • 100 billion

30

14

‘12‘11 ‘13 ‘14 ‘15

50

75

100

20

0

40

60

80

100

2016 Mobile Market

• 23% Games• 10% Business• 9.25% Education• 8% Lifestyle• 6% Entertainment• 5% Utilities• < 4% Each

GAMES

BUSINESS

LIFESTYLE

ENTE

RTAI

NMEN

T

UTILITI

ES

EDUCATION

OTHER

Projected AppDownloads

By 2017

• 268 billion downloads

• $77 billion revenue

‘12‘11 ‘13 ‘14 ‘15 ‘170

100

200

280

30

14

50

75

100

268

1

2

3

MARCUS COLEMAN19, college student

HAILEY WALKER17, high school student

NINA BROOKS28, in-house graphic designer

DEBORAH KIM42, entrepreneur

BRENT HABERKAM36, professor at a local university

Primary AudienceLearner: VisualGamer: Explorer

Requirements• Visual Examples• Attractive interface• Portability• Exploratory content• Unlockable journey

Primary AudienceLearner: KineticGamer: Socializer

Requirements• Hands-on exercises• Face-paced games/challenges• Connect and challenge others• Social sharing

Secondary AudienceLearner: AuditoryGamer: Killer

Requirements• Brief lessons• Auditory lessons• Sound effects• Games that are fun, competitive and challenging

Facilitator Audience

Requirements• Streamline quizzes and grading• Exportable grades• Customizable lesson plans• Online classroom environment

Secondary AudienceLearner: Reading/WritingGamer: Achiever

Requirements• Device versatility• Read and write about design• Rewards for achievements• Build design network

Information ArchitectureA requirements document was created to help list out the user actions and define the app’s functionality to

form the information architecture. From the requirements doc AND card sorting exercises, the functionality was broken down into 5 major components - the educational component, a networking environment, a design

forum, a place to personalize a user profile, and application settings.

INTRO/LOGIN/SIGNUP

DASHBOARD

PLAY GAME LEVELS

My StatsShows Current Grade

Badges & RewardsShows Badges and Credits

Search/View Users

FORUMCOMMUNITY PROFILE SETTINGS

• about• terms of service• edit settings• sound settings• reset game• logout• help

• edit job title• change profile pic• edit colors

• game list• game scores• badges

Topics Include• basic principles• typography• color theory

View Posts

Connect/Friend

Challenge Friend

Create Post

Save Posts

Main Screen Hamburger Navigation

START HERE

PrototypingLow fidelity paper prototypes and high fidelity digital prototypes were used for various rounds of user testing.

GET STARTED

LOGO

NEXT

Welcome to the mobile game

designed to teach you the valuable skills of graphic

design!

What is graphic design?

a. purposeful planning that uses a combination of words, images and meanings to achieve a goal

b. problem solving as a form of communication

c. everything that is not made in nature (magazines, cereal boxes, toothpaste tubes, signs and more)

d. all of the above

(Tap only one answer)

SUBMIT

* when tapped, option turns to a different coloruse highlighted transparency

GET STARTED

LOGOLOGO

username

password

Sign up using Facebook

Create Account Log In

X

CORRECT!Graphic design is problem solving that uses elements such as photos, illustrations, and words to communicate an idea.

While doing all this, designers hope to create something really cool!

IDENTIFY DESIGNS

TAP THE GRAPHIC DESIGNS

TAP THE GRAPHIC DESIGNS

GOOD TRY.Graphic design is problem solving that uses elements such as photos, illustrations, and words to communicate an idea.

While doing all this, designers hope to create something really cool!

IDENTIFY DESIGNS

UNLOCK LEVEL 2

LEVEL 1INTRODUCTION

COMPLETE!

LOGO

* This concludes the mandatory first level. User only plays through upon setting up account. Ask children what they would like as a prize for completing level one. :)

LOGO

INTRODUCTIONCOMPLETEL1

TYPOGRAPHYLOCKEDL3

FORMUNLOCKEDL2

LOGO

COLOR THEORYLOCKEDL4

PAGE LAYOUTLOCKEDL6

THE FUNCTIONLOCKEDL5

INTRODUCTIONCOMPLETEL1

TYPOGRAPHYLOCKEDL3

FORMUNLOCKEDL2

Laura GillyCLASS NAME HERE

0%

L E S S O N 1

Alignment

L E S S O N 2

Balance

L E S S O N 3

Shape, Scale & Focal Point

L E S S O N 4

Hierarchy

L E S S O N 5

Figure Ground

L E S S O N 6

Contrast

L E S S O N 7

Light

L E S S O N 8

Motion

L E S S O N 9

Repetition & Consistency

L E S S O N 1 0

Gestalt

BASIC PRINCIPLES

HOME

L E S S O N 1

Typefaces & Fonts

L E S S O N 2

Serif & Sans-serif

L E S S O N 3

Anatomy of a Font

L E S S O N 4

Type Attributes

L E S S O N 5

Kerning

L E S S O N 6

Tracking

L E S S O N 7

Alignment

L E S S O N 8

Visual Hierarchy

L E S S O N 9

Contrast & Mixing Type

L E S S O N 1 0

Typography Mistakes

L E S S O N 1 1

Punctuation & Ligatures

TYPOGRAPHY

HOME

L E S S O N 1

Warm & Cool

L E S S O N 2

Primary, Secondary & Tertiary

L E S S O N 3

Monochrome

L E S S O N 4

Complimentary & Analogous

L E S S O N 5

Hue, Saturation & Value

L E S S O N 6

Mixing Colors

L E S S O N 7

Psychology & Symbolism

L E S S O N 8

Making Color Palettes

L E S S O N 9

The Bezold Effect

L E S S O N 1 0

Additive & Subtractive Colors

COLOR THEORY

HOME

HeadlineThis is smaller text.

Jules Gilly

Open Sans BoldOpen Sans RegularOpen Sans Light

Oswald RegularOswald Light

Brand Colors Typography

Primary Font

Secondary Font

Button Style

Textures, Icons & Elements

Adjectives

PRO TIP

This is a headline

This is body copy anda link within the body copy.

G A M E I N S T R U C T I O N S

This is the type used for game instructions

BUTTON STYLE

L E S S O N 1

Lesson Names

SUBJECT T ILES

INTERACTIVE

BUTTON ONE BUTTON TWO

E D U C A T I O N A L

User FriendlyresponsiveFUN

Photography

DESIGNAPPRENTICE

DESIGNAPPRENTICE

RESPONSIVE WEBSITE DESIGN

SOCIAL CHANNELS

VIEW THE WEBSITE

ConclusionThesis defense took place May of 2016.

Kristin Knoerlein, MFA kkdesign22@gmail.com | 410-302-5951 | www.kkdesignonline.com

Dashboard Screens

Login, Hamburger Menu, Forum, Edit Profile & Settings

Community Screens

Lesson List Visuals

Basic Principles Lesson Three

Basic Principles Game Three Samples

VIEW THE PROTOTYPE

VIEW THE PROTOTYPE

pre-play dashboard hamburger menu open post play dashboard shop freebiesuser challengeuser notification

The App Design

Post to ForumLogin Screen

Settings

Forum

Hamburger Menu

user challenge

Connect with Users

Search Users

Community Classroom Contact Classmate

Basic Principles Level

Lesson List Visuals

Typography Lesson Two

Typography Game Two Samples

Typography Level

Lesson List Visuals

Color Theory Lesson Two

Color Theory Game Two Samples

Color Theory Level

Overall Design App was quite a large project to handle on my own. A project like this would usually require a team. I performing the information architecture, wrote and facilitated multiple user testing sessions using a variety of methods, made informed decisions using research, wrote lessons and a variety of interactive games, applied gamification to subject matter, studied learning styles and defined objectives. These were executed through proper planning, testing, designing, and production.

After Design App lessons were completed, I wanted to do a more user testing to see if interacting with Design App would be an effective tool for learning these principles. I did 3 separate user testing sessions and gave my participants a pre-test and a post-test which included some of the topics covered within the application. After completing the lessons I presented today, 2 of my users improved their scores by 40% and I user improved by 80%. There are other factors to consider as far as repetition and retention, but I’m pleased to report that not only did they learn, I have video proof that they had fun doing it!