UX/UI Case Study: I-Track, Productivity Tool for Kids
Background
I was a teacher for 10 years until this past summer, when I fully immersed myself in a UX/UI Design bootcamp at Ironhack Miami, in order to facilitate a career change. I feel like when people decide to switch careers, we assume that we are leaving behind our past and starting anew, but what I’ve come to realize is that my decade long experience has only prepared me for what is to come. Moreover, at the core of why I decided to become a teacher was my love of helping people. Through the bootcamp and being involved in the UX community, I’ve learned that I will be able to make an impact in the lives of our students, even though I am not in the classroom, using technology. Out of my experience as well as the research conducted for this case study, emerged I-Track.
Design is the act of observing a problem and planning a solution for it. I chose to focus on Ed-Tech for this case study because innovation begins in the classroom where the minds of future leaders are being cultivated. Money is being invested into educational tools at historical heights (Forbes reported $9.5 Billion in 2017), but I asked myself, are the tools saturating the market effective? As a teacher, I was forced to use tools that the district had invested in. I had to bribe my students into using them just so we could fulfill a quota. I didn’t see an increase in my students’ performance, and the reports these programs generated didn’t drive my instruction. All it did was burden my students and me. Although it is 2018, there should still be a healthy balance between tech, books, and hands-on experiences. In my experience, tech was being used as a way to cut down costs on materials, and monitor teachers; not to inspire. But before I went on a witch hunt to justify my reasons for changing careers, I conducted research to empathize with my target users, and guide my solution. A solution that teachers and students would enjoy and find useful.
Research
I conducted a survey, in which I received 197 respondents. I actually received over 200 respondents but some people did not follow directions, and took it even though they were not teachers. Luckily, I added a screener and was able to delete those non-teachers to ensure the reliability of the data. I used my social media outlets to post the surveys. I joined a bunch of Facebook teacher groups and the admins approved my post, I made sure to include the purpose. I was surprised by how receptive people were to taking my survey and sharing it forward. Within 3 days, I had guiding data that would help me make design decisions.
Some surprises: It’s 2018, and only half of the respondents had an interactive whiteboard. Less than half had tech available for student use. Not all the teachers who took my survey even had a computer/laptop for work use! Even in my first year teaching, I was lucky enough to have access to computers and an interactive whiteboard. Once I got over the initial shock, I began making some decisions: in order to empathize with my users (teachers & students), my solution would need to be versatile. This meant to go the responsive website route to ensure that regardless of available tech, the product would still be utilized. I initially thought I would design something that would have a separate student interface, however, based on the lack of tech available to the students, I decided to have a teacher interface that he/she could use how they see fit.
One insight that was clear from the survey data was that teachers were dealing with student accountability. I began to think, “How can I help teachers foster students who are accountable and productive?”.
Before answering the how, I needed to look at who was already dealing in productivity tools for children. And what I found was that although there were many that existed, I did not find a competitor that dealt with school work. Most were focused on chores at home or behavior management.
Class Dojo seemed to be the largest competitor, as it received the best reviews, is widely used across most elementary school classrooms in the country, and is successful in allowing teachers to motivate students and building a community. A tool that I used and loved myself, I wasn’t surprised by the results of this research. Although Class Dojo is a successful tool in teaching students to have a growth mindset and be motivated, it falls short in dealing with the productivity issues expressed by the respondents and interviewees. I identified this as the space where my solution could thrive. (Originally, I named the solution “Kid Flux”, but thought the name could go left in the hands of imaginative children).
It was important to me to receive insights not only from teachers, but the users who would be benefitting the most from this tool: the students. The children ranged in ages 5–17, and a common thread amongst them was that they liked being rewarded (duh!), and felt that their teachers were too busy to give them personal attention. Maybe students would feel more motivated and be more productive if they felt like the teacher was actually listening. How could my product allow one teacher to attend to 18–32 little people who needed them?
There are many that disagree with extrinsically rewarding students for their behavior and work. But we all need to face reality: as adults, we don’t work for free. And many of the teachers interviewed came from the same school of thought: Rewards worked. Whether it was tech related or prizes, this was a key insight to take into account when it came down to the design.
Define
Data…data…data…The bridge between my old life as a teacher to my current journey. What I once used to inform my instruction, was now informing my design decisions. But it’s so much more fun to aggregate data in UX because it involves POST ITS!!! Lots of them, sorted into an Affinity Diagram in order to identify trends and pain points.
My product began to take shape. Based on all the quantitative and qualitative data (Yay for buzz words!) collected, I understood that my product would need to help increase student motivation, allow students to feel like their teacher was available to them and of course, have an incentive system. Our target user was a compilation of the teachers interviewed. Passionate Patrick, the veteran teacher on a crusade to overcome his unmotivated students and with the goal to inspire his students to be in control of their success. Patrick was hardworking and dedicated, so much so, that he spends off-work hours working. This persona helped me understand that the solution would need to serve a double purpose of alleviating pain points for both the teacher and students. When successful, the gains would be two-fold.
The above user journey helps a designer, like myself, (I’m a designer y’all, woot woot!), identify with the user, put myself in their shoes, and understand where there are opportunities for design. I used emojis to relay emotions because it’s an awesome and visual way to communicate (who doesn’t love the side-eye emoji!). The pits in the flow identify opportunities for my solution to save the day. Those were moments where Patrick was frustrated by his students refusal to work, lack of time to attend to all of them, and exhaustion from the long hours of planning after the school day was done. How could I turn that frown upside down? (hand covering face emoji, excuse the corniness)
Ideate
I began the ideation stage of the process by using the opportunities identified in the user journey to come up with specific features to address the users pain points. I had answered the 5W’s , but it was time to address the How?
It was time to break out the post-its. Side note: I think UX had me at post-its and dry erase walls but I digress. Anyway, I just brain dumped every random idea that came to my mind; good, bad, and ugly. And then I used the MOSCOW method to organize those ideas into Must Haves, Should Haves, Could Haves, and Won’t Haves. The most out of pocket ideas went into the Won’t Have quadrant. The Must Haves is what would become the Minimum Viable Product (MVP), or the product that would address the pain points in the most minimal way. That product was a teacher driven interface that would allow the user (Patrick) to assign their students work, track their completion, and reward points for completion. Students would be able to self monitor and ask for help without interrupting the class flow, real important in a classroom where teachers are facilitators and work in small groups (Ding! Ding! What is a highly effective teacher for 600, Alex!)
Prototype
At this stage in the Design Thinking process is when the omniscient ‘solution’ begins to take shape. Prototyping is so much more than “making it pretty”, or placing buttons on a page. It’s the time when the designer (ME!!), takes all those insights into account, to create a usable, fulfilling experience. It is the time when I ask myself, “Self, What will keep my user coming back?”. (There’s a lot of talking to self in this process).
First, I began with a site map, to organize the components to the program and identify the “happy path”, or the user flow that I was going to test for usability and identify as the MVP.
Pictured above was the initial user flow, which includes separate points of entry for teachers and students. Because the data showed that many teachers had limited access to technology for student use, for the low fidelity prototype, I decided to incorporate the student flow into the teacher interface. The way I imagined it working was that teachers would allow their students to update their work status through the teachers computer, and she would have it displayed through the projector or interactive whiteboard. This idea came from my personal experience, and the way that my classroom was structured.
The idea was based on the assumption that teachers would:
- Be gung-ho about students (and their wonderful germs) using their computer
- Allow their students to freely move around the room
During this first round of usability testing, I was met with excitement. I tested the target users: elementary school teachers as well as some of my UX classmates.
Users were asked to login in, view the assignments as well as add an assignment, and then open up to the class view where students would be updating their completed work.
Everyone though the idea was great, but there was confusion with the layout and button labels. In hindsight, the real problem here was with the user flow, which did get eventually revised.
An important lesson was learned when the mid-fi was tested: Who cares what I want, I’m not a teacher, therefore, no longer the target user. I still was met with the same excitement from the low-fi, however, even with the revisions made to the labels and layout, the majority (6 out of 7) of the teachers expressed their preference for a separate student interface with their own logins.
The teachers brought up a lot of great points:
“Many of the programs I use, even with the little ones, allow them to login themselves. It further promotes the message of ownership.”
“I prefer a separate login, even if they don’t each have a computer. Let me figure that out. I can always set up a station with a laptop or two, or a tablet, like a check-in kiosk.”
“My whole class of 5th graders have cell phones, and jump at every opportunity to be allowed to use them. I would definitely allow them to have them out to track their work.”
I took the users feedback into account and did another round of mid-fi usability testing. This time, introducing the student login separate from the teacher screen.
The results were impressive: the users loved it and could totally picture themselves using I-Track in their class. The fact that I was able to make this change and incorporate the users feedback into this revision would be extremely beneficial to the business, especially for a new product. The problem with many Ed-Tech tools currently on the market is that they don’t have realistic terms of use for the current classroom climates. They don’t take into consideration what the teachers and students actually want or need. Many time, representatives come into schools and conduct pitches where they really have to reach to sell the product to the teachers. And a lot of times, the products are either not used, or not utilized the proper way, resulting in un-renewed licenses.
High Fidelity Prototype
It was time to add some color and really bring the prototype to life. Kids apps are bright, colorful, and fun… the vibe that I-Track needs to have to be enticing to the students to want to use and get the targeted results.
Instead of the green, I originally had red, but red has such negative connotations in education, I went with Green for growth and progress. The 8 users testing were teachers and students and received positive results.
I am going to be honest with you all, I am not much of a color person. In the sense that I don’t like explosions of color, especially when it comes to kids, and even more so, kids dealing with disabilities that may find busy decor distracting or over-stimulating. So in designing the hi-fi prototype, I did let my bias get in the way.
I designed two mockups of the home screen, one using bright colors, the other more muted (my preference). Again, it didn’t matter what I liked, because once I tested with the users, and allowed the data to guide me, I could put my personal preferences on the back burner. As it happened in this case, where all users tested preferred the bright green layout. I listened to the users and continued playing with colors until I could find a happy medium.
Font was also difficult to choose. As a teacher, I had always loved the fun but definitely overused Comic Sans / Chalkboard font. Who knew that it was taboo to use it in UI design?! (I still think it’s a cute, kid-friendly font, idc lol) . I google searched, “kid-friendly fonts that are not Comic Sans”, and settled on Montserrat: big and bold, simple but clear to read, and welcoming.
Once I decided on the elements of the atomic design, I stitched it all together using Sketch, and used Flinto for the micro-interactions. Micro-interactions would be extremely important for I-Track, because it added the extra magic needed to engage the students.
I-Track Walkthrough
- Login as Teacher
- View Class Status
- View Today’s Assignments
- Add a Math Assignment
- Login as Student — Yago
- Yago completes Bell Ringer
Conclusion
I-Track is a great tool for existing learning platforms or behavior management tools to integrate into their systems, or can be a stand alone product. It is successful at engaging students to track their work and also gives them a private way to ask the teacher for help (in turn minimizing interruptions), as well as a great tool for teachers to establish a work flow system in their classes. In a time where teachers are evaluated and rewarded for being highly effective educators, I-Track is a tool that would facilitate a class of autonomous and productive learners, qualities marked on the Marzano & Danielson scales used to evaluate teachers. The built-in reward system gives students that immediate satisfaction as well as providing an opportunity for the teachers to use those points as a bargaining tool. I-Track allows for differentiation as students have differing needs, generate data, and allows for parents to be cued into what their child accomplishes on a day to day basis.
Thank You!
I know this was long! Thank you for taking the time out to read through the I-Track Case Study. Any and all feedback is welcome! Let’s connect on LinkedIn and check out my portfolio site: www.brendamatos.co .
