Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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 [email protected] | 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!