California Polytechnic State University Art and Design Department ART 388: Interaction Design II Winter 2017 Professor Bruno Ribeiro
Ordino An organizational application for K–12 teachers.
Swasti Mittal Mariah Okuna
22 March 2017
2
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
Table of Contents Introduction 3 Abstract 3 Schedule 4 Audience 5 Technical requirements 5 Possible constraints 5 Research 6 Preliminary research design Findings from the research Personas 10 Goals 10
6 6
Competitive analysis 11 Potential competitors 11 Visual language organization User interaction design Scenario 15 Sketches 16 Wireframes 17
13
15
Usability analysis 20 Usability analysis tests 20 Usability analysis results 20 Changes from the results of usability analysis Annotated layouts 23 Final product 24 Classes Section Screens 24 Curriculum Section Screens 25 Poster 27 Future enhancements 28
22
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
Introduction Abstract Ordino is an applicaton for K–12 teachers that allow for a more organized classroom environment. Teachers are able to sort, reference, and plan their own curriculum using the Ordino’s capabilities. Teachers can sync previously stored curriculum from other devices into the Ordino’s archive. This archive allows teachers to search, assign, or print different materials. Additionally, Ordino enables teachers to schedule, grade, and take attendance. Unlike previous classroom technology, Ordino is focused on making teachers’ class organization easier.
3
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
Schedule WEEK 2 Jan 16, 2017
Determine audience and context for product Begin contacting and scheduling interviews Establish main goals of interviews and outline interview questions List main findings of each interview
WEEK 3 Jan 23, 2017
Conduct all interviews by Jan 28, 2017 Find the most fitting persona for the product Contextualize product within the persona’s life Evaluate persona’s goals with the product Research possible competitors for product
WEEK 4 Jan 30, 2017
Write scenario for persona and product Sketch the interaction framework step-by-step Wireframe the product
WEEK 5 Feb 6, 2017
Determine test tasks for usability testing Prototype interface in wireframe mode Record usability tests
WEEK 6 Feb 13, 2017
Analyze usability test results Update wireframes based on usability tests
WEEK 7 Feb 20, 2017
Research visual languages for product Design 3–4 visual language options for product
WEEK 8 Feb 27, 2017
Finish product Determine technical requirements and constraints
WEEK 9 Mar 6, 2017
Refine the product further Finalize product Discuss future enhancements Make poster of final product Refine report
WEEK 10 Mar 13, 2017
Present poster Turn in completed report
4
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
5
Audience The Ordino is made for K-12 teachers and their students. This product allows for a more collaborative classroom experience by improving group work activities between students and their peers as well helping maintain teacher and student relationships. Teachers can use Ordino to organize their lesson plans, make exams and quizzes, and create interactive assignments. Additionally, students can use the Ordino’s touch screen to complete and organize classwork and participate in interactive lessons. Technical requirements The Ordino must have wifi, bluetooth, and cloud storage capabilities. Using bluetooth would allow for teachers to project lectures or in-class assignments easily. Cloud storage enables teachers to sync curriculum and transfer files from one device to another. Lastly, the Ordino requires a tablet or touch screen device. Possible constraints Currently, there isn’t a direct way to communicate with students through the application due to their lack of access to the product. In the same vein, a student equivalent of the Ordino does not exist yet. Another possible constraint is that if a teacher does not have their past curriculum stored electronically, it’s difficult to transfer that information into the application. In terms of security decisions, we considered storing student contact information in the application for teachers to easily reach parents in case of behavioural products, but eventually decided against this thereby minimizing risk of important student information being stolen. To ensure that only teachers have access to the application, only those with a .edu email address are given permission to create an account.
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
Research Preliminary research design Our three main objectives were: »» Learn how students stay engaged in the classroom »» Learn about effective methods teacher use to enforce material »» Learn how teachers organize their classroom We used the following interview questions: »» How does the teacher organize the classroom? »» How do students organize their own work and workspace? »» What methods do the teacher use to assign work? »» What type of format do teachers use for assignments? »» How do teachers conduct group activities within the classroom? Findings from the research Raha Haghnia, Education Major »» Students organize their work into folders or binders for each subject. »» Teachers maintain binders of curriculum, file cabinets of student work, and “lots of paper clips and stacked paper.” »» For the daily classroom schedule, teachers write out the day’s agenda on the board.
6
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
7
»» In small group assignments, the teacher first explains the assignment and then divides the classroom into groups. Students find their own space, a leader is assigned, and they get to work. Teachers have to check in on student’s progress for group assignments. »» Two main distractions for students are their peers and anything kids can touch or fiddle with. »» Students are least engaged when they’re idle and most engaged when they’re working with their teacher on something. »» Lessons can be more interactive when students have to work with each other. »» Hands on activities can be helpful for kinesthetic learners; the only problem is that the object itself can become a distraction for the student. Amanada Ferrell, 7th and 8th Grade Math Teacher »» She organizes her classroom using color coded labels to distinguish between the 7th and 8th grade curriculum. »» The desks in her classroom are set up in “pods,” which allow students to turn their around desks and create a group setting. »» She utilizes the document camera often especially when going over instructions, lecture, math problems, or student work. »» The students use Chromebooks to view math problems and lessons while they record their actual work in composition notebooks. »» She does not lecture very often; the students mostly work in groups. This forces them to help each other and figure out the material themselves. »» Hands-on “manipulatives” are extremely helpful for students when learning harder math concepts. »» In regards to a classroom Ordino, she is interested in having a “pause” feature, some recording capabilities of students’ work, the lesson information on the screen, and an interface for collecting student work.
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
Aristotle Ou, 8th Grade Math Teacher »» His classroom uses a Smart Board as well as the white board. His students go over math problems on the whiteboard. »» He often uses the document camera to go over lessons, graphs, math problems, and other student work. »» He doesn’t lecture often and instead places his students into groups to work on the class material. Clumping the students together forces them to look at each other and help each other out. »» Hands on activities help keep students engaged. Lauren Knutilla, 8th Grade English and Reading Intervention Teacher »» She doesn’t have a traditional teacher’s desk by choice, but instead has a cart where her computer and other belongings live. »» Her students are not given homework; rather, they work together during class and turn assignments in through Google Classroom »» The students are all set up into groups. Their activities are set up in a way that gives students jobs to do. This type of assignment helps keep the children productive and engaged with the material. »» She would prefer if there were more seating options for students. Instead of stationary desks, she’d like to see standing desks, more comfortable seating options, and tables. Middle schoolers are restless and like choice. »» She’s really focused on the space her students occupy as a more positive environment that will keep them in a better mindset during lessons. »» Students can be distracted by their phones or by each other during group work. »» Difficult situations arise when disciplining students in class. She would like a more confidential way to talk to students when they’re disrupting class.
8
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
9
»» In regards to the abilities of the Ordino, she wants to have a way to give students feedback faster and for students to take ownership of their own behavior while understanding when they’re off task. Also, she’d like to create differentiated lessons for each student, as well as have options for a standing desk or a table sized Ordino. Danielle Champney, Education Professor Specializing in Math »» Classroom organization changes by grade level. In K–5 classrooms, teachers have one system to organize all subjects for small number of students. Having one system makes it easier for students to keep track of information. In 6 –12 classrooms, teachers organize one subject’s information for much larger number of students. Students have to deal with different systems of organization. »» Assigning work depends on location and financial standing of school, richer schools tend to do it electronically. Class level also matters in this, younger grade levels exchange more paper. Electronics are not usually introduced to students until the 5th or 6th grade. »» The most common format used in classrooms is Google Docs. »» Want to make students feel like they learned something on their own, you do this by encouraging them to ask their peers for help. If student goes to the teacher too often, the student can begin to feel like it’s the teacher’s work and not their own.
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
10
Personas
Lisa Meyers, 31 years old Ms. Meyers is a 6th grade mathematics teacher at Lewis & Clark Middle School. She is passionate about education and is always on the lookout for the best tools to organize her classroom. Currently, she makes do with stacks of paper, lots of binders of curriculum, and tons of paper clips. She’s looking for a better way to manage all the components of her classroom. She tries to emphasize group assignments and collaborative classrooms in order to get students to problem solve together. “I’m really struggling with all this paper! I wish there was a simpler way to manage all the different parts of my classroom and also encourage my students to work together better.” Goals Ms. Meyers’ goals are: »» Managing curriculum, attendance, and grading more efficiently »» Getting students to collaborate and learn from each other »» Creating an easier system of assigning, collecting, and giving feedback on student work
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
11
Competitive analysis Potential competitors FlipIT Desks contain built-in computers that allow students’ workspace to be versatile.
Microsoft Studio Surface is a desktop computer that allows users to customize their workspace and use its interactive touchscreen as a creative tool.
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
The Promethian Activtable offers a table top touchscreen display that’s multi-user. It allows users to build their own activities using a variety of intuitive tools including a keyboard, musical instruments, math tools, and web browsers.
Smart Media Multi-Touch Table incorporates a built-in white board application that allows users to annotate, save, and print documents.
12
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
13
The SMART Board is an interactive board that can connect the user’s desktop screen to a projector. The user can control applications and write and save notes on the screen. This device also includes built-in wifi and a scratch and spill proof surface.
Visual language organization Class Dojo, Edmodo, and TeacherKit are mobile applications that allow teachers to manage their classrooms. Some features include giving feedback to children individually, sending messages to families, posting notifications and other important information for students, and uploading documents and other worksheets. Furthermore, these applications can cover more logistical responsibilities like managing classes, taking attendance, recording behavior, inputting grades, and so on. Class Dojo
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
Edmodo
TeacherKit
14
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
User interaction design Scenario »» Ms. Meyers is planning her class for next week. »» She is in search of a specific worksheet on the Pythagorean system that she made in 2013. »» Unable to find the sheet in her binders, Ms. Meyers pulls up her Ordino application. »» From the home page, she clicks to the curriculum section of the app. »» Here she selects the curriculum for the year 2013-2014. »» Then she selects the subject Math and clicks In-Class worksheets which are further organized by topic. »» She chooses Pythagorean Theorem from the list of topics and scrolls through the preview of each worksheet until she finds the one she’s looking for. »» She opens the desired worksheet, clicks print, and she’s all set.
15
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
Sketches
16
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
Wireframes
17
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
18
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
19
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
20
Usability analysis Usability analysis tests We asked the users to do the following tasks: 1. Under “Classes”, mark Sally Cardoza late from the 8th Grade Geometry class. 2. For the 8th Grade Geometry class, go to the grading section and find assignment “Angles Between Intersecting Lines Practice Wksht.” Change Corey Davis’s assignment from “NO SUBMISSION” to “On Time” and save. 3. In the curriculum section, in 2014-2015, find an 8th Grade Geometry Pythagorean Theorem in-class assignment called “IntroPythag.docx” and print it. Usability analysis results Tyler Hoyt »» Grading Task »» Thought the whole student name was clickable—typically a feature of google classroom »» Curriculum Task »» Liked the organization of the materials »» Helps for references for other materials »» Wished that once you find the document, you can assign it to a particular class »» Would like this product to be a schoolwide interface
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
Amanda Ferrell »» Liked it how the product flowed and found it easy to use »» Liked the curriculum and students section »» Would like to be able to mass grade assignments »» The editing feature was nice »» Liked that materials and class logistics were in one product Aristotle Ou »» Attendance Task »» He already has the same sort interface already used for attendance, but was much easier on a tablet »» Suggested a feature to place students in seating groups for attendance »» Mentioned that there are new math standards »» Math 7, Math 8 »» Accelerated track: Math 7+8 »» Pretty easy interface Jessica Hoffman »» Product seems user-friendly »» Liked that there wasn’t many tabs or buttons
21
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
Kathy Ahearn »» Grading Task »» Unsure of what to click when editing the grade »» The rest of the interface is pretty straightforward and easy to use Changes from the results of usability analysis
Before After
Originally, there wasn’t a button to directly assign work from the document page. For the “After” screen, we added a button to make this feature possible.
Before After
Originally, there was an editing button in front of each student’s name to edit their grading information. After the usability tests, we realized that making the entire nameclickable was more intuitive to change information.
22
23
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
User interface design Annotated layouts
Sign in screen
Overview of teacher’s current classes
Class overview screen > schedule of chosen class
Grading screen for assignments of chosen class
24
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
Final product Classes Section Screens
Sign in screen
Overview of teacher’s current classes
Schedule of chosen class
Grading screen for assignments of chosen class
Grades for a particular assignment
A student’s grade for an assignment
25
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
Editing a student’s grade for an assignment
Attendance screen of a particular class
Curriculum Section Screens
Year selection for curriculum
Curriculum for classes under a chosen year
Curriculum for lessons under a chosen class
Assignment types for a chosen lesson
26
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
Assignments for a particular lessons
Print dialogue for a specific worksheet
Specific worksheet for a particular lesson
27
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
Poster
Ordino Lose the papers. Keep the order.
Teachers can use Ordino to plan each class day, week, and even month using Ordino’s scheduling capabilities. In conjunction with Ordino’s projecting feature, teachers can project their schedule to help students keep track of what’s due, what’s assigned for homework, and what tests and quizzes are coming up.
In-class assignments screen
Class overview in grading screen
Attendance screen
Grading
Attendance
Teachers can easily sync and upload files to Ordino. They can easily store and reference curriculum from previous years. Their curriculum is then organized by year, class, lesson, and assignment type. The curriculum section of the app allows teachers to annotate, print, project, and assign specific documents directly from the document preview page.
Teachers can use Ordino to grade within the app. In the Classes section, teachers can select the class they are currently teaching, and then select the Grading tab to view assignments that are currently being graded or need to be graded. Teachers are able to select an individual student to edit their grade and submission status.
Teachers can take role from Ordino’s attendance system. Within the Classes section, teachers can choose the class they are currently teaching and then select the Students tab to view their roster. The students are organized by alphabetical order for easy use. Furthermore, teachers are able to mark each student late, absent, or present.
Curriculum topics screen
Class assignments in grading screen
Swasti Mittal, Mariahlyn Okuna
Curriculum
Document preview screen
Individual student grading screen
ART 388: Interaction Design II Winter 2017 SmartDesk Mittal Okuna
28
Future enhancements »» For the attendance section, introduce a feature that groups students according to seating. »» Include a behavioral element that allows teachers to take notes on students’ behavior during class. »» Implement a messaging system between teacher and parent. »» The capability to collect and annotate student work digitally. »» Create the student equivalent of the Ordino application in order to provide direct communication and interaction between student and teacher.