Kritik User Interface Redesign - From Frustration to Efficiency for Educators
Kritik User Interface Redesign - From Frustration to Efficiency for Educators
OVERVIEW
The updated design of the Kritik educational platform focused on creating an engaging, interactive user interface that better met the needs of both students and teachers. The redesign aimed to improve navigation and accessibility and provided tools like customizable rubric templates and grading options that were both intuitive and effective.
KEY FEATURES
Home Page
The Home Page serves as the starting point, guiding users toward creating an activity with a glowing "Create Activity" button that enhances visibility and salience. This ensures users can quickly locate and initiate the main task without confusion.
SELECT RUBRIC TEMPLATE
The Select Rubric Template page helps users choose a rubric by providing clear descriptions and step-by-step guidance. By reducing cognitive load and supporting top-down processing, it simplifies the decision-making process, making rubric selection intuitive.
RUBRIC
The Rubric Section allows users to customize their rubric efficiently, with a prominently placed "Customize Rubric" button ensuring easy access. The simplified layout removes distractions, helping users focus on essential modifications without unnecessary complexity.
OPTIONS AND NAVIGATION
The Options & Navigation panel allows users to adjust grading weights and add multiple topics, giving them greater flexibility in rubric customization. The sidebar enables quick navigation between sections, while dynamically resizing text boxes adapt to content length for a smoother experience.
COLOR PALETTE
When choosing the color palette, I wanted it to feel both welcoming and intuitive.
#2032DE (Deep Blue) - Trust & Calmness
I used this as it is Kritik’s primary brand color. It represents trust, reliability, and a sense of authority in education.
#1C1C1C (Dark Grey/Almost Black) - Contrast & Readability
I used this color for the text as it has contrast and readability. A near-black color provides high contrast, making text easier to read while maintaining a modern, professional look.
#0667DC (Bright Blue) - – Buttons & Icon Elements
I used this color because it de-emphasized less critical information while keeping the interface clean and non-distracting.
#FFFFFF (White) – Clean & Accessible Background
I used this color for a clean background. White conveys cleanliness, simplicity, and openness, ensuring an easy-to-read and accessible interface.
HCD PRINCIPLES
SALIENCE COMPATIBILITY
Important elements stand out using high-contrast colors and appropriate sizing to grab attention without overwhelming the user.
AVOID RESOURCE COMPETITION
The design avoids excessive visual clutter, ensuring that students can focus on their materials without distractions.
DISCRIMINABILITY
The interface uses distinct colors, typography, and spacing to differentiate interactive elements, making it easy to tell how navigation pieces fit together.
REDUNDANCY GAIN
Key instructions and feedback are provided using both text and icons, reinforcing understanding for younger students.
SUPPORT VISUAL MOMENTUM
The layout guides users naturally through lessons and tasks, maintaining a smooth learning flow without abrupt interruptions.
THE PROBLEM
The user interface of the Kritik educational platform did not effectively engage students, lacked interactive elements, and failed to meet teachers' needs for essential tools, such as rubric templates and customization options, that were both functional and easy to use.
My research approach combined usability testing, task analysis, and user feedback methods to gain actionable insights on key features.
PARTICIPANT RECRUITMENT
I created user profiles and recruited K-12 teachers accordingly to participate in usability testing.
PRELIMINARY INTERVIEWS
Before testing, I conducted preliminary interviews to gather insights into their challenges with existing educational platforms, their workflow when creating assignments, and their expectations for rubric customization.
USABILITY TESTING
Participants were asked to create an activity within Kritik and implement a grading rubric from the rubric repository. TrackIR Pro eye-tracking was used to monitor head tilt and gaze, generating a 3D model of user movements. This helped identify attention shifts, navigation patterns, and usability bottlenecks. Heatmaps were created to visualize where users focused on the interface, highlighting difficulties in locating key buttons.
HIERARCHICAL TASK ANALYSIS
I conducted an HTA to break down the steps required for activity creation and rubric customization. This structured approach provided insights into task complexity and workflow inefficiencies.
KEY FINDINGS
Through my research, I uncovered several insights that shaped the problem definition. Through my research, I uncovered several insights that shaped the problem definition. Every participant struggled to locate the “Customize Rubric” option, indicating poor visibility. The rubric templates were too complex for lower-grade teachers, requiring extensive modification. The "Create Activity" button lacked prominence, and teachers noted wasted screen space.
DEVELOPMENT PROCESS
The idea generation phase focused on addressing key challenges in the activity creation and rubric repository functionality for K-12 educators.
PRELIMINARY IDEATION
I started with an in-depth brainstorming process, using the HTA to deconstruct how K-12 teachers select and customize rubrics. This method helped identify inefficiencies in existing workflows and pinpoint areas for improvement.
LOW-FIDELITY SKETCHES
To visualize potential solutions, I created hand-drawn wireframes that explored different UI structures. These sketches were guided by insights from eye-tracking data and usability testing, ensuring a user-centered approach that aligned with teachers’ needs.
CONCEPT REFINEMENT
Through iterative refinement, I developed unique design concepts aimed at streamlining rubric customization and navigation. These concepts were categorized into three core themes: efficiency in rubric selection, intuitive UI navigation, and enhanced user engagement.
CONCEPT SELECTION
To determine the most effective solutions, I conducted a systematic evaluation using feasibility assessments and a pairwise comparison method. By prioritizing teacher usability and workflow efficiency, I integrated the strongest elements from multiple concepts into a cohesive final design.
Want to discuss opportunities? Let's Connect!