top of page
ClassHook
Elevate teaching with ClassHook's media library!
Create an exciting and interactive learning environment using popular TV and movie clips that resonate with tech-savvy students.
Introduction
ClassHook is a website that helps teachers use popular TV shows and movie clips to make learning more fun and engaging.It offers various media clips to make learning more interesting for kids these days who grow up with technology.
As educators have limited time, they need to be able to efficiently find relevant and engaging video clips that align with their teaching objectives.
I collaborated with two designers to design and prototype the minimum viable product design. Our focus was on designing a more cohesive product experience that enables educators to efficiently access what ClassHook has to offer.
Role :
Lead Product Designer
UX Researcher
Team :
Denise Ramos
William Kim
Timeline :
3 Weeks
Resposibilities
Competitive Analysis / Qualitative Research / Persona Development / UX/UI / Prototyping / Usability Testing / Visual Design
Problem
For educators, ClassHook's vast repository of TV and movie clips offers immense potential to enhance teaching experiences. However, the platform's current user interface presents challenges in terms of coherence and efficiency, causing teachers to encounter difficulties when accessing and utilizing its diverse resources.
Solution
To enhance educator satisfaction and effectiveness of the platform. To unlock the full educational value of ClassHook, a cohesive and intuitive product experience must be designed, empowering teachers to effortlessly explore, select, and integrate relevant videos into their lessons with ease.
Impact :
-
Enhancing the onboarding experience
-
Improving the platform's navigation
-
Ensuring quick and effortless access to targeted materials
-
Enhancing overall user experience.
UX Framework
Phase 1:
Research & Synthesis
Market Research
Qualitative User Research
Affinity Mapping
Persona Development
Phase 2:
Define, Design &Test
Problem Statement
Concept Ideation
Flow Mapping
Wireframes
Usability Testing
Phase 1: Research & Synthesis
We started our initial research with heuristic evaluation as it allows us to establish assumptions about the problems we see on the site.
Heuristic Evaluation
Competitive & Comparator Analysis
Competitive & Comparator Analysis
As newcomers to the education technology space, it was crucial for us to gain a deep understanding of the industry and ClassHook's position within the competitive landscape. Researching the educational sector and exploring ClassHook's competitors helped us become well-informed and ready to embark on the design process effectively.
-
Evaluate ClassHook's functionalities and offered features.
-
Uncover ClassHook's competitive strengths and weaknesses in the market.
-
Explore user sentiment and satisfaction with the current platform and similar solutions.
-
Identify the goals and objectives users aim to achieve through ClassHook's services.
Comparator Analysis
Competitive Analysis
We also performed a Market Analysis based on Navigation -
Key Takeaways -
-
Filters/navigation - ease of use
-
Proximity - engagement accessibility on same video page
-
No guided walk through on all platforms from competitive analysis
-
Interface caters to grade level
-
Content broken into subjects rather than everything all at once is more digestible and retainable.
Qualitative Research -
Empathizing with users and understanding their needs and goals.
We wanted to understand the challenges teachers currently face.
From Educator's side we wanted to gather more insights on Teaching methods and approaches, content and remote learning setting.
Participants -
-
16 people who work as educators from grades 2nd to 11th.
Insights -
Identifying patterns and actionable insights.
-
Educators find it more engaging to use relevant up-to-date content that aligns with student’s interests for supplemental aid because curriculum feels outdated.
-
Educators encourage participation by having students talk to each other because it builds confidence for them to feel comfortable to speak up.
-
Teaching in a way that uses bite size digestible material which increases retention.
-
Students influence educator’s style of teaching due to the student’s knowledge of technology.
Persona Development -
Contextualizing Research Findings.
We focused on solving for our primary persona, the Educator, as our MVP in the given time.
Meet Amelia, our Primary Persona who is a second grade public school teacher and her primary goal is to find grade-appropriate content that is up to date as well as creating a teamwork environment through topic discussions.
We also created a journey map to understand the steps she takes to accomplish her goal.
Journey Map
Primary
Secondary
Journey Map
1/3
Phase 2: Define, Design, Test
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.
Design -
Ideation & Concept Modeling
After understanding our users better - what they need and what bothers them - we all got together and came up with ideas for new features and improvements.
We also worked closely with the client throughout using a flexible approach, so everyone knew how things were progressing and why we were making certain design choices during the brainstorming phase.
-
How might we streamline the navigation process?
-
How might Amelia quickly find relevant content for her lesson plans?
-
How might we help Amelia identify resources that are appropriate for different grade levels and learning styles?
-
How might we increase participation with students during discussions?
1/2
Optimizing User Journeys by crafting User Flows & Mid-Fi Wireframes -
We developed our user flows to understand the critical paths Amelia would need to take in order to :
-
Find relevant content
-
Add that content to her lesson plan and explore premium features
This information helped us to develop the structure of our first iteration mid-fi wireframe.
Mid-Fi Wireframes -
Slider 1
Slider 2
Slider 1
1/2
In our design studio, we created mid-fi wireframes with a focus on improving user navigation for finding relevant video clips in Amelia's lesson plan. These wireframes served as initial mockups for testing with new ClassHook users.
Our new design layouts aimed to:
-
Simplify the on boarding process with minimal information required to create an account swiftly.
-
Expand visual real estate and incorporate video clips for a quick overview of available subjects.
-
Introduce a real-time filter for fast content discovery.
-
Redesign the video clip page layout to include Discussions for increased class engagement.
-
Place a familiar Share Call to Action (CTA) for users to add content to their lesson plans.
Usability Testing -
We conducted moderated usability tests with 8 participants, including educators from elementary to college levels who were new to ClassHook. Through scenario-based tasks, we aimed to understand how they navigate the platform to find relevant content and integrate it into their lesson plans.
Recognizing Usability Concerns and making informed revisions.
Findings -
-
All participants enjoyed the visual layout by providing at-a-glance video clips under subject categories,
-
finding the real-time filters to be efficient,
-
And a majority of the users found the discussion and questions containers living on the same page to be effective for classroom environments.
-
However, we came across a few issues in the filters such as:
-
Confusion of grade level breakdowns,
-
And which premium filters were accessible.
-
-
End result, All participants succeed both tasks
Revisions -
-
Adding an open view of the filter drop down
-
Refining grade levels by year of education
-
Making premium filters more visible as well as the tone
-
And by Showing the number of clips used
Brand and Visual Design -
Creating the Design System
Final Design Prototype -
Convenience
-
Filter options: Easily sort content by class, subject, duration, and media type.
-
One-click sharing: Instantly generate shareable links for email, classrooms, or social media.
-
Quick discussions: Start conversations with a simple click below each video.
Trust
-
Show usage stats to reveal how many educators have utilized this video in their lessons.
Resources
-
Access live discussions, pause prompts, and a vocabulary finder effortlessly.
-
Related clips are conveniently displayed next to the main video for quick selection.
Next Steps -
Excited about our next steps! We would love to reshape the website a little by reordering filter categories based on user feedback – top picks like grade level, subjects, and clip length taking the lead. The "Learn more" call-to-action is getting a fresh vibe, possibly with a touch of Premium class, as our users suggested. We're also streamlining the premium filter menu by ditching decades – turns out, not a crowd-pleaser. Last but not least, we're diving into the world of annotations to guide newbies smoothly into the wonders of "Explore Smart Tools." It's all about making our platform even more user-friendly and convenient.
Here's to the exciting tweaks ahead!
Thank you for stopping by!
bottom of page