Project Overview
Founded in 2014 by Alexander Deeb and Joyce Ang, ClassHook is a website that helps teachers use popular TV and movie clips to make learning more interesting for students. Due to the rapid pace of technological advancements, the site aims to be user-friendly for teachers who may not have time to learn new technology.
The Challenge
Our initial challenge was to design a cohesive product experience that allowed educators to take full advantage of all of the features ClassHook had to offer. After doing an extensive deep dive on the website, I found myself struggling with basic navigation. I identified that our priority needed to be shifted to address this before moving onto highlighting features. This insight was appreciated by the client, pivoting the focus of our challenge.
The Solution
We simplified ClassHook's website layout and streamlined the process for educators to find supplemental content for their lesson plans.
‍
My Role
Lead Researcher
Responsibilities
User Research, Heuristic Evaluation, Competitive and Comparative Analysis, User Interviews, Affinity Mapping, User Personas, Journey Mapping, User Flows, Wire Flows, Hi Fidelity Prototype, Usability Testing
Team
Three Designers
Timeline
3 Weeks
Date
May 2023
Figma, Slack, Google Suite, Zoom, Jira
Tools

Class Hook

View Prototype
Discovery

Educating Myself

My research began with a Heuristic Evaluation of the existing ClassHook website, helping me to identify any issues I came across while trying to find a video clip I wanted to use. This allowed me to establish assumptions about the problems I saw on the site. I discovered that:

Competitive Analysis

After familiarizing myself with the navigation and content of the website, I sought to identify competitors. Key findings included:
  • The importance of real-time filters for smoother navigation.
  • Displaying grade levels for easy material access.
  • Breaking down content into digestible segments for better retention.
These insights greatly influenced our design.

Finding the Right User

We emailed 20 users provided by the client but received no responses. Because we were on a tight deadline, we had to keep the project moving. We were quickly able to find 10 K-12 educators in our own network and interviewed them over Zoom. Questions we asked that were pivotal in our research were:
  • Can you describe what a typical day looks like when you’re in class? How do you prepare?
  • How do you currently look for content for your lessons?
  • What are the challenges you face when looking for content for your lessons?
  • Could you tell me about how your students participate? How do you encourage participation?
After conducting our own interviews separately and synthesizing our key findings, we created an Affinity Map to compare underlying themes. Although we were not able to speak to actual users of ClassHook, we still received amazing insights and were able to identify common themes.
Customer Insights

Teachers spend hours of their personal time planning their lessons

  • With the pace of progressing technology, teachers are struggling to keep up.
  • Teachers want to incorporate relevant media into their lesson plans to keep students engaged but there are too many sites to keep track of.
"When they’re kids, they have nothing to lose–they have only experience to gain"
“When students find topics uninteresting, it’s the teacher’s responsibility to impose on them why it is important and why it’s so fun!”
Personas

Primary Persona

After synthesizing our research we gathered enough data to create our personas. Doing this helped us to understand what the users of ClassHook needed to have a streamlined experience.
"I build discussions to create a teamwork environment."
A young woman wearing glasses and a red sweating smiling

Amelia

Age
34
Gender
Female
Profession
Second Grade Teacher
Location
Napa Valley, CA
Background
Amelia is a second grade public school teacher with 8 years of teaching experience. She believes learning should be fun and tries to incorporate pop culture into her lessons to make it easier for her students to understand and relate to. She spends about 50% of her free time searching for relevant and engaging content to supplement the standard curriculum. Apart from lesson planning, she also needs to set aside time for assessing students’ performance and communicating with their parents.
Goals
  • Find relevant content that is up to date
  • Build discussions to create a teamwork environment
  • Focus more time interacting and engaging with their students
Needs
  • Lesson structure based on trending videos to fit her student’s level of understanding
  • A safe and appropriate space for students to participate
  • Need an efficient way to plan their lessons
Frustrations
  • Takes hours of her personal time to plan lessons
  • Content she has to teach is outdated
  • Not tech-savvy due to the rapid pace of technology

Secondary Persona

“Engagement is the only thing that will really teach people, it’s paramount."
A young woman wearing glasses and a red sweating smiling

Gary

Age
55
Gender
Male
Profession
Eleventh Grade English Teacher
Location
San Diego, CA
Background
Gary is a passionate 11th grade English teacher at San Diego High School who has a solid foundation in his subject. Since this will be his first time teaching remotely, he feels that his conventional methods to engage with his students are outdated. Overwhelmed by the amount of technology, he is seeking support and guidance to learn relevant teaching methods to engage with his students.
Goals
  • Be able to teach in a way students could best understand
  • Build discussions to create a teamwork environment
  • Manage time to balance his teaching responsibilities
Needs
  • Real world references to prepare students
  • Access to technical resources so that he can enhance classroom learning
  • Needs proper support and guidance to plan his lessons efficiently
Frustrations
  • Has difficulty finding proper resources to incorporate into his lesson plans
  • Feels overwhelmed by the amount of technology there is nowadays
  • Getting class to engage in class

Retrospective User Journey

After developing our personas, we gained a better understanding of who we were designing for. Based on our research findings, we created a retrospective journey map to pinpoint where she currently experiences frustrations. We found that the problem exists in 2 places:
  1. Where Amelia sees that her students are not engaged in her rigid lesson structure.
  2. Too much time spent while searching various platforms to find supplemental material.
These were the issues that we wanted to address.

Problem Statement

Amelia needs quick access to relevant resources that fit into her lesson plans because she wants to find content her students can understand and relate to.

HMW Statements

In order to further address Amelia’s needs and goals, we developed a number of how might we statements. We took an affinity map approach by each creating questions that would help us explore ideas as well as potential solutions for the problem we needed to solve. Doing this helped us to pinpoint common themes and provided a clear view of what to focus on in our design. We narrowed down four key questions for our design solution:

User Flow

We created a new user flow to tackle the significant challenges revealed in our research. Based on our findings, we identified the need to simplify the search process through a comprehensive user experience.
Browse product detail, search, select

Ideation

We initially had various ideas about the desired experience. However, following an extensive feedback process, we streamlined the designs. This helped us to make rapid iterations before transitioning to digital format and informed the structure of our mid-fi wireframes.

Mid-Fidelity Wireframes

After crafting and sketching multiple design options, we arrived at a simple solution that enables users to quickly find video clips using a real-time filter. Additionally, we created a layout familiar to YouTube to facilitate learnability.
Testing Our Assumptions

Mid-Fidelity Usability Test

As we pursued alignment with our business goals, a constant thread was our rigorous testing of the user experience to maintain its relevance for our users. We conducted 8 moderated usability tests remotely. Testing this early on is important to detect any issues that can be addressed before moving further into the design. Below are some insights we gathered from our users.

Test Findings

These key findings helped us to implement changes for our high-fidelity prototype.

Hi-fidelity Usability Test

In order to understand if our design changes from our mid-fidelity test findings improved navigation efficiency, we conducted a second moderated remote usability test with 13 new K-12 educator participants.

Test Findings

Delivery

Hi Fidelity Prototype

View Prototype

Next Steps

If we had more time I would love to explore:

final reflection

Communication- Timely and active communication was key. Although my teammates and I had disagreements, we were able to communicate our thought processes and hear each other out. We resolved matters by constantly referring back to our research, personas, and problem statement. We all had great ideas to contribute; it’s about listening to each other so that everyone is heard.

Teamwork- Highlighting our strengths at the beginning of this project helped us to excel and deliver. I commend our group for leaning on each other, staying up late to meet deliverables, and asking for help when needed.

Productivity- Having a backup plan was crucial to be able to keep moving forward through the whole process. Despite this, we ended up spending a lot of time in meetings without getting anywhere. Having a timed goal will help us understand when it is time to move on next time so we can be more productive.

more projects:

Back To Top

Let's get in touch!

dramosdesigns@gmail.comLinkedin