Dr. Anne Streeter | Research Methods Professor David Meyers | User Experience Prototyping
David Maish | M.A. Interaction Design
50 STATES STUDY GUIDE INTERFACE DESIGN
TABLE OF CONTENTS
4 6 8 10 12 14 22 28 38 40
Executive Summary Concept Brief Solution Hypothesis Project Overview Research Exploration Solution Design Research Outcomes Conclusion
Lindsey Wilson College | 50 States Study Guide
2
3
50 States Study Guide | Lindsey Wilson College
4
EXECUTIVE SUMMARY
The use of mobile apps for learning and involving students has become increasingly more popular. I am inviting a new generation of students to learn geography in their media of choice. “50 States Study Guide” engages the student using a geography study guide that is delivered on a mobilefirst app. Research was conducted in the form of usability testing, competitive analysis and SWOT analysis. Paper prototyping uncovered problematic areas, which called for simplifying my design. My app focuses on learning the US states, capitals and abbreviations. Through an iterative development process, I have developed a simple and intuitive design that creates a “fun to learn” user experience.
Lindsey Wilson College | 50 States Study Guide
4
5
50 States Study Guide | Lindsey Wilson College
6
CONCEPT BRIEF
My primary research goal was to find out whether my 50 States Study Guide would be useful to my market delivered on a mobile-first platform. Today, many students have a mobile device or have access to one. In essence, I am developing a geography lesson and presenting it in a user experience that is fun and readily available on a mobile platform. I also want to make it appealing enough to be used as a learning tool for a broad range of age.
Lindsey Wilson College | 50 States Study Guide
6
7
50 States Study Guide | Lindsey Wilson College
8
SOLUTION
50 States Study Guide offers a solution for learning the 50 U.S. states, capitals and abbreviations delivered on a mobile-first app. This allows students to study geography using their media of choice. A smart phone, iPad or tablet.
Lindsey Wilson College | 50 States Study Guide
8
9
50 States Study Guide | Lindsey Wilson College
10
HYPOTHESIS
The creation of a mobile-first app that will serve as a geography lesson for learning the 50 U.S. states, capitals and abbreviations.
Lindsey Wilson College | 50 States Study Guide
10
11
50 States Study Guide | Lindsey Wilson College
12
PROJECT OVERVIEW
My primary research goal was to find out whether my 50 States Study Guide would be useful to my market delivered on a mobile-first platform. This was achieved by implementing an iterative design process that included personas, competitive analysis, SWOT analysis, concept sketches, wireframe development, usability testing and paper prototyping.
Lindsey Wilson College | 50 States Study Guide
12
13
50 States Study Guide | Lindsey Wilson College
14
RESEARCH
PERSONAS
Personas were developed to characterize or represent my users. This would give me a better idea of the kind of user I would target for my market. Knowing the user characteristics for my product helped me focus on a user-centered design. The following personas represent the two target audiences: children and teachers. My student persona had access to an iPad at school or at home.
Lindsey Wilson College | 50 States Study Guide
14
15
50 States Study Guide | Lindsey Wilson College
Lindsey Wilson College | 50 States Study Guide
16
17
50 States Study Guide | Lindsey Wilson College
COMPETITIVE ANALYSIS OVERVIEW
I am developing an app that will function as a study guide for learning the U.S. 50 states, capitals and abbreviations. I have conducted qualitative research in an effort to gain knowledge about competitors in this market. Online research in the form of product reviews and analysis as well as interviews were used to provide insight into problems, help develop UX design ideas and expose competitor strengths, weaknesses and opportunities. What is the best way to engage a new generation of students to learn geography? Many students find studying geography in the way of memorizing states and capitals difficult and boring. My plan is to involve the student using a geography study guide that is delivered on a mobile-first app, thus crating a “fun to learn� user experience. Currently there are geography applications on the market that target learning the U.S. 50 states, capitals and abbreviations, but most of the applications I found either on the iTunes App Store or website based games were poorly designed or had distracting advertising. My competitive Analysis focuses on educational apps offered by the iTunes App Sore. This is first tier competition as opposed to website based learning games.
Lindsey Wilson College | 50 States Study Guide
18
19
50 States Study Guide | Lindsey Wilson College
CONCLUSION My user research suggests that I keep the design of my geography app focused on learning the 50 state names, capitals and abbreviations. The user interface has to be simple and intuitive to keep the user engaged in the learning process. If I can keep the design of my app simple and focused, I believe it will be successful.
Lindsey Wilson College | 50 States Study Guide
20
SWOT ANALYSIS SWOT Analysis was conducted to determine product strengths, weaknesses, opportunities and threats.
21
50 States Study Guide | Lindsey Wilson College
22
EXPLORATION
CONCEPT BRIEF
I am proposing a geography study guide app that will be delivered on a mobile-first platform. The app will be used for learning the U.S. 50 states, capitals and abbreviations.
Lindsey Wilson College | 50 States Study Guide
22
SITE MAP
23
50 States Study Guide | Lindsey Wilson College
CONCEPT IDEATION SKETCH
My concept sketch shows the first iteration of the geography app. This iteration consisted of states that would flip over to reveal state names or capitals.
Lindsey Wilson College | 50 States Study Guide
24
25
50 States Study Guide | Lindsey Wilson College
26
BRANDING
LOGO
While exploring branding for my app I combined the outline of the United States into the number 50 to create a clean logo design.
Lindsey Wilson College | 50 States Study Guide
26
27
50 States Study Guide | Lindsey Wilson College
28
SOLUTION DESIGN
LOW-FIDELITY WIREFRAMES
Low-fidelity wireframes were developed as a result of competitive analysis research. This iteration uncovered problematic areas in the navigation.
Lindsey Wilson College | 50 States Study Guide
28
29
50 States Study Guide | Lindsey Wilson College
30 HIGH-FIDELITY WIREFRAMES
High-fidelity wireframes were developed in this iteration. Navigational problems were corrected and a color scheme was developed.
Lindsey Wilson College | 50 States Study Guide
30
31
50 States Study Guide | Lindsey Wilson College
Lindsey Wilson College | 50 States Study Guide
32
33
50 States Study Guide | Lindsey Wilson College
34
USABILITY TESTING
PROCESS
In conducting my usability test, my goal was to determine if my user interface was understandable and easy to navigate. Middle school and high school students, as well as teachers were tested individually in a controlled, quiet, setting in my office. Performing this test uncovered problematic areas in my apps navigation.
Lindsey Wilson College | 50 States Study Guide
34
RECRUITING CRITERIA Study participants were selected based on the following: • Male and female • Children/Students starting at approximately 11 years of age • Middle School Students (6th, 7th and 8th grades) and High School Students • Teachers or School professionals • Have access to a smart phone or tablet • Are familiar working with apps on a mobile device
FEATURES TESTED The following features were tested by the participants: • Navigation • Ease of use • How long it takes to complete the tasks
PARTICIPANT PROFILES Study participants were the following: • Sarah B. - 24 year old - Elementary School Teacher • Sherri H. - 44 year old - Occupational Therapist • Gracie M. - 7th Grade Middle School Student • Jackson H. - 10th Grade High School Student • Kaylin M. - 7th Grade Middle School Student • Shelby S. - 7th Grade Middle School Student
35
50 States Study Guide | Lindsey Wilson College
WRITTEN SCRIPT The following script was read to each of the study participants prior to starting the test: Hi, _______________, my name is David, and I’m going to be walking you through this session today. Before we begin, I have some information I’d like to read to you. I’m going to read it out loud just to make sure I cover everything. Today we are going to test a mobile geography app that I am working on to see if people understand how to use it and navigate through it. In this phase of my project, we will be using paper prototype screens. As you go through the tasks I have prepared, you will navigate by touching each paper prototype screen and I will give you the next appropriate screen. As you go through these steps, please think out loud. I want to know what you are thinking as you navigate through the app, so please be honest. This will help me in the design of my product. Thank you for participating in my project! Do you have any questions before we start?
TASKS The participants were asked to take the following actions: At home screen, click “States” • Click “Hint #1” • Click “States” • Click on “Hint #2” • Click “States” • Click Hint #3” • Click “States” • Click “Answer” • Click to go “home” screen
Lindsey Wilson College | 50 States Study Guide
36
TASK PERFORMANCE SUMMARY The following chart summarizes study findings, where: 1 - Fail 2 - Succeed slowly (minimum time - 20 seconds) 3 - Succeed quickly (optimal time - 10 seconds) Sarah Navigation 2 Ease of use 3 Time 3
Sherri 2 3 3
Gracie 3 3 3
Jackson 3 3 3
Kaylin 3 3 3
Shelby 2 3 3
Avg. 2.5 3 3
User Testing conducted using Low-Fidelity wireframes for the 50 States Study Guide.
37
50 States Study Guide | Lindsey Wilson College
38
RESEARCH OUTCOMES
RECOMMENDATIONS
By watching the users cycle through the screens of the app, I uncovered problematic areas, which were mainly in the “hints section” of the user interface. Based on the findings from the navigation tasks, two buttons will be added on the “hints” section: one button that says ”show answer” and another button that says “next state”. This will allow the user to go directly to the answer without having to swipe through all three hints. It will also allow the user to skip to the next state at any time.
Lindsey Wilson College | 50 States Study Guide
38
39
50 States Study Guide | Lindsey Wilson College
40
CONCLUSION
CONCLUSION
Through this iterative development process, and the implementation of user testing recommendations, I believe my app will create a more useful user experience and learning environment on a mobile device. Future research might involve a focus group or the use of surveying teachers’ needs and the use of mobile applications in the classroom, as well as the possibility of mobile app design integrated into classroom whiteboards.
Lindsey Wilson College | 50 States Study Guide
40
41
50 States Study Guide | Lindsey Wilson College