Student Competition App
Duration: 5 months
Platform: Mobile
Tools: Figma, Keynote
Role: Researcher, UX Designer
Project Summary
As the university classroom setting becomes more and more technologically-centered, students are being increasingly distracted by their devices. It's apparent that it has affected the ability of the professor to teach and engage students.
Project Goal
Create an end solution that will enable better transparency between professors and students on technological use within the classroom while still utilizing the benefits of technology.
Early Ideation
We started out the project with a sketching and brainstorming session.The topic of the sketching session was to sketch ideas about how technology in the classroom could be defeated or better engaged. At this time we did not know the entire scope of the project, but our goal was to get some really early ideas flowing and explore some blue sky sketches. After discussing our sketches and ideas with the team, we decided to narrow down to these three ideas we thought would help us tackle the problem better.
Blue sky sketches and ideas
Exploring what's out in the market
Competitive analysis was the first evaluation method we used in the research process to create a basis for Ideation. The goals of our competitive analysis were to identify how companies are currently battling tech in the classroom as well as to determine weaknesses in the current products. Out team brainstormed a list of products that are combating classroom distractions, then we divided the products into five categories.
Guiding questions:
After the categories were delegated, we came up with a list of questions to guide our research for each category. With a list of common questions, we would be able to find common trends or among the products as well as pinpoint which products are tackling the problem most efficiently. The guiding questions included the following:
• How do they engage the educator?
• How do they engage the user?
• What is the goal of the product space?
• What are the emotional reactions?
• What is the cost of these products?
• Popularity/how many users?
• Where’s the market for these products?
Takeaways
We used an affinity diagram to extract main takeaways from the researched applications. Allowing us to compare the things these apps did well and things we would need to improve on moving forward.
Affinity Diagram
• Product needs to have a balance of control between educators and students
• Our product should try to build positive working habits within students working styles
• Students and Educators should be able to monitor and measure their progress and success
• It should be accessible to all users
• Should have shared positive outcomes between educators and students
Identifying trends and opportunities
At this point, we wanted to further understand about student engagement through technology, while also explore what factors contribute to students getting distracted in class. We created a list of questions to guide and structure our research.
• What does it mean to be distracted?
• What are the different types of attention?
• How do we better engage students in the classroom?
• What factors contribute to students getting distracted in class?
• How can the concept of Panopticon relate to this design space?
• How do we turn distractions into opportunities?
Insights
• Distraction is a battle between goal setting and controlling our minds.
• The only solution is to use the distractions to mask the distractions.
• Students engage through collaboration, active learning, and real-world projects.
• Implementing the concept of Panopticon into a classroom setting may be intrusive and unethical in some situations.
Hearing from students and educators
We conducted interviews to get the perspectives from both sides of the table, Educators and Students. For students, we wanted to understand how and why students are getting distracted in class and what factors lead better student engagement in college classrooms. For educators, we wanted to understand a range of educators' perspectives on student using technology in the classroom as well as how they engage students in their classroom.
Takeaways
• Students often get distracted by watching other students on their phones using social media
• Students pay more attention when sitting up front in classroom, as physical location in classroom affects one's ability to stay on task.
• Students still found a way to get distracted by looking out the window, doodling, even when tech was banned.
• Educators are aware of all the distractions that exist and recognize that they can not be completely eliminated
• Educators understand that it is the student’s responsibility to be attentive in class
• Educators recognize their control in the classroom
Redefining our problem scope
From our research insights, we found that in smaller classrooms the professors have a lot more control over student behavior versus large classrooms. So we shifted our focus to try to encourage engagement within large lecture hall classrooms.
Ideating
With this new focus in mind we then moved forward into our second phase of ideation. We conducted another round of sketching, discussed our ideas with the team and narrowed down to three paths:
Ideation Matrix
We decided to then do an ideation matrix and analyze each idea with six different questions to see which idea was backed up by more of our research we had conducted and had more potential than the other ideas.
Ideation Matrix
Results
We decided to move forward with the Team Competition idea because it was the one backed up with more of our research and saw it had way more potential than the other ideas.
Research behind our Team Competition Idea
Problem Statement Scope Down
It is important to note, that at this point in the project, we re-scoped to focus specifically on creating greater engagement with students and the class material through a competitive atmosphere.
Testing with users
After fleshing out the main chunk of our concept solution, we did some brainstorming to identify a way to effectively test this idea. We didn't just want to test functionality of a mockup - we wanted to test to see how effective the overall concept was at increasing engagement and how people reacted to the team competition. After talks with out mentors and professors, we decided upon a diary study.
Diary Study
We simulated the app experience through text messages that represented notifications that reminded students about assignments due soon, when other teammates have finished work, challenges, and their team placement. These notifications were broken down into 3 scenarios.
Analyzing the diary study
After we received the diary studies back from our 3 participants, we began looking over the participant responses and feedback. In order to analyze the feedback, we wrote all their responses on post-its and affinity diagramed them. By doing this, we were able to identify patterns in the participant responses, while also discussing their individual differences.
Affinity Diagramming
Takeaways
• Participants felt an urgency to do work.
• Participants expressed feelings of motivation, both from the team competition aspect and the messages.
• Participants felt an urge to check their assignments when receiving a message and make sure assignment was completed.
• Participants expressed an array of emotions (guilt, stress, motivation).
• Some messages made participants feel a sense of guilt and made them check their assignments in worry that they were the one letting the team down.
Structuring our app
At this point in the project, we needed to start visualizing our idea. With our team competition idea in mind, we discussed the main features we wanted within our mobile application. After some discussion and whiteboarding as a group, we narrowed down to four main app screens: home, leaderboard, profile, and challenges/rewards. We also came up the name “Clash” for the app.
Ideating "Clash" features
Sketching "Clash" features
Building wireframes for testing
After visualizing each of our app screens on the whiteboard, we created digital wireframes for user testing. We ended up adding one more screen for the student profile, which we noticed we were missing.
Evaluating flow and functionality
For our usability testing we wanted to test participants on the flow of the app, as well as its effectiveness in a classroom environment. To do this, we utilized the wireframes we created, as well as scenarios and corresponding tasks to complete.
Conducting the Usability Test
Results
We gathered all the data collected from the usability testing results and post-test questions and decided to create a table to display all problems in each of the screens. We also marked the repetitive comments stated by the participants. This helped us to see which screens and areas were confusing for the user and needed improvement, as well as which already provided the user a pleasant experience.
Usability Test Results
Creating hi-fidelity prototypes
After synthesizing data from both our usability test and diary study, we went into creating high fidelity screens to further expand on how the app may look and how users would interact with it. Below is a walkthrough of each of the screens, with a list of their key features.
Features
Homescreen
• Upcoming task
• Anonymous name & Ranking
• Team Name & Ranking
• Monthly and Semester Reward
Team Leaderboard
• Leaderboard with team rankings
• Countdown to the monthly reward
• Student's team ranking is highlighted
Student Leaderboard
• Leaderboard with students rankings
• Countdown to the monthly rewards
• Student's own ranking is highlighted
Tasks
• Tasks are sorted chronologically
• Tasks are sorted by category
• Tasks are color coded by point value
Meet the Team
Connor, Adam, Isa (me), Austin, Kevin
