MathFlick | Web Application to Develop Intrinsic Study Habits in Students

December 20th, 2020

This case study describes my experience designing a web platform for high school students which utilizes gamification through popular media, entertainment, and games to develop students’ intrinsic motivation to study mathematics concepts and perform better in the classroom.

Problem Statement 

“High School students who want to gain access to study material need an effective medium that can improve their intrinsic motivation to learn and promote long-term study habits.”

We tackled the Grand Challenge of Engineering of Advancing Personalized Learning in the classroom, which aims to provide every student the resources they need to learn effective learning strategies, increase material comprehension and develop a love of learning. Teaching has always followed a uniform approach, but is ineffective with different learning style. Students learn differently, and need varying levels of guidance and support. The major challenge is how schools can develop unique teaching methods that optimize for this variability in learning styles.  

The solution we developed was MathFlick, an educational web platform application aimed toward developing the intrinsic motivation of high school students in math subjects through the use of gamification, story building, and popular entertainment, which caters to individual learning styles. 

User Research

We used three different research methods in the user research phase, namely interviews, observation, and literature review. These methods focused on analyzing four parts; how students learn best, students’ attitudes or behaviors toward learning, current effective or ineffective teaching methods, and current technology used in an educational setting. Our primary user is students, but our additional stakeholders include parents of high school students and high school teachers. Below is a Venn diagram that summarizes our research findings:

As a group, we conducted over 100 interviews with high school students around the world and parents of high school students to further discover common learning methods used and their effectiveness. Most notably, we interviewed students at the Jing Mei Girls High School in China, Tesla Stem High School in Redmond, WA, and a few local high schools here in Indiana. Our findings are as followed:

• • Digital apps are not always an effective solution
  • Application usage depends on the subjects
  • Teachers often use multimedia presentations/materials in class
  • Learn by doing and hands-on methods are effective
    

For our research, we made it a priority to go into a variety of classrooms, ranging from the US to China, to study how teachers lead lessons and how students process this information. We also studied what students do in the classroom to practice the material, and how they feel about their comprehension at the end of the class period. Analyzing different methods of teaching helped us understand how students learn best. We observed a variety of classes at the Jing Mei Girls High School in China. 

• • Common technology includes a projector and personal computers 
  • Teachers allow the use of phones in the classroom to seek out resources
  • An in-person guide/lesson plan is provided to students to follow during the class session
  • All required learning resources and readings are posted on a common classroom website

Literature Reviews

Each group member analyzed two research papers that related to our problem statement. We focused on studying current learning methods and their effectiveness with students. In total, we analyzed 8 research papers and graded the various solutions on certain categories, such as cost, efficiency, accessibility, long-term potential, the ability to form good habits, and stability. We then summed our average score for each category and highlighted the most effective solution for learning. Step by step self improvement had the highest score, especially in the “long term potential” and “form good habits” categories. 

The Design Process

Brainstorm and Ideation

Our design process was very thorough, as we went through four different iterations of our web application before reaching our final solution. During this process, we gathered our research and brainstormed a plethora of ideas and features that would address our user’s needs. This consisted of mind mapping, hands-on reviews of competitor applications, function mapping, and establishing constraints and criteria  

We first brainstormed broad functions of our application then narrowed them down into individual features that addressed our user’s needs. For example, to address the issue of creating unique engaging practice problems, we established a set of tailored problems that involved real events related to the theme. 

After we decided on the main features of our application, the next step was to map out the application’s usability flow using wireframes and low-fidelity prototypes. We drew out digital wireframes, converted those into low-fidelity prototypes, and then turned those into a high-fidelity model. It was important to only map out the key functionalities and interactions to stay focused on the end goal.  

Final Design

Project Reflection

Plus Points

This was my first full end-to-end UX design project, so I am proud to have successfully gone from research to implementation and design a solution that utilized all the data and info we gathered.

• While my team focused on gathering most of the literature and field research, I spent an extensive amount of time analyzing competitor applications and studying their user interface to see what worked and didn’t. Through this process, I discovered new opportunities for our application and how to truly satisfy our user’s needs. 

• My knowledge of Adobe XD significantly increased over the course of this project as I had to constantly iterate and implement our user’s feedback and use many tools that I wasn’t exposed to before.

• From the beginning to the end, I worked with my team to practice many of the design thinking principles we learned in class for effective ideation, needs identification, and prototype development.  

Future Considerations & Areas of Improvement

• Since this was my first complete UX design project, my understanding of screen dimensions and layout structure was very surface level. My next step would be to apply a consistent layout and design system that I can follow which will ensure consistency across different viewports. 

• Conduct usability tests with our target users to get feedback on the overall user experience and functionalities of the platform to see which areas need the most improvement

• Ensure further consistency of color scheme and typography, include more white space.