Power of Process

Redesign 10 years old McGraw Hill product POP web application and make it complete accessible

GOAL

Redesign the decade-old McGraw Hill product, The Power of Process, to ensure full compliance with accessibility standards.

What is a Power of Process (POP)?

Power of Process is an active reading assignment that offers the students hands-on critical thinking tools for reading and writing about primary sources using either pre-populated or customized strategies.

Who uses Power of Process (POP)?

Authors, Instructors and students

What are my roles in this redesign?

Conducted user research by interviewing Stakeholders and target users.
Evaluated the product against accessibility standards like WCAG (Web Content Accessibility Guidelines).
Created multiple user persona for Student, Instructor and Author.
Created Wireframes and Prototypes.
Conducted usability testing along with client team on target users.
Created accessible visual designs by the design system which client has provided.

Domain:

Education

Team Size:

Project Time Period:

24 Months

Tools used:

Figma, Colour Contrast Analyser (CCA) , zeplin and Useberry

There are 3 views in Power of Process :

1. Author View
2. Instructor View
3. Student View

Current focus STUDENT view

The student assignment view is designed to guide students through their tasks. Students begin by reading the provided instructions, followed by reviewing a document to answer associated questions. They can choose between Document 1 or Document 2, as predetermined by the instructor. If the instructor permits, students also have the option to upload their own document to complete the assignment.

My UX Design Process

1. Understanding Stakeholder and User Needs
2. Research and Analysis
3. Ideation and Design
4. Testing and Iteration
5. Finalizing the Design

6. What are the outcomes
7. What I learned

1. Understanding Stakeholder and User Needs

Gathered business requirements and got KT from business analyst.
Conducted stakeholders meetings to identify goals, pain points, and expectations.

2. Research and Analysis

Participated in remote moderate user interviews with users along with McGraw Hill team.
Performed remotely moderated usability testing also along with McGraw Hill team and done competitive analysis to benchmark against industry standards.
Analyzed data from user interviews and usability testing to identify the insights.
Created user personas to understand user more and take right decisions.

Pain Points in Student Assignment View

The interface does not adapt well to smaller screens or touch-based interactions, such as tablets.
Students lack guidance in answering questions, which can lead to confusion or incomplete responses.
Annotation process do not meet accessibility standards, making it difficult for students with disabilities to use them.
The strategy wheel, likely a visual or interactive tool, poses challenges for students with disabilities.

Usability Test Results in Old Design

Students reported that the annotation method was inaccessible, particularly for those having color blind. Usability testing showed:

Task Completion Rate: Only 65% of students could successfully annotate a paragraph and adding comment without errors.
Time on Task: It took an average of 7 minutes for a student to complete an annotation.
Error Rate: 45% of students encountered issues like tracking annotations

2 User Personas

Persona 1

Persona 2

Persona 1

1/2

3. Ideation and Design

Develop low-fidelity wireframes to visualize initial concepts.
Create interactive prototypes to explore workflows and user interactions.

Paper Sketches

Prototyping

Prototyping played a crucial role in the redesign of McGraw Hill's The Power of Process (POP), enabling iterative testing and validation of design concepts before full implementation.

4. Testing and Iteration

Conducted usability testing with actual users to evaluate the prototype's effectiveness.
Gathered feedback, analyze results, and iterate on designs to address usability issues.

Usability Test Results After 1st Prototype

Same annotation usability testing done:

Task Completion Rate: Here 80% of students could successfully annotate a paragraph and adding a comment without errors.
Time on Task: It took an average of 4 minutes for a student to complete an annotation.
Error Rate: 30% of students encountered issues like tracking annotations.

5. Finalizing the Design

Designed high-fidelity visual mockups to align with branding and accessibility standards.
Collaborated with developers to ensure design feasibility and accurate implementation.

6. What are the outcomes

Very less mouse clicks (Faster task completion)
Robust and flexible UI for the student (Drag and Hide/Show Panels)
Header for showing the number of steps (Easier navigation back and forth)
Accessible annotation process (Inclusive)

Results

Post-implementation usability testing and analytics showed significant improvements:

Task Completion Rate: Increased to 90% (+25% improvement).
Time on Task: Reduced to an average of 3 minutes (-57.14% improvement).
Error Rate: Dropped to 10% (-35% improvement).
Accessibility Compliance: Achieved WCAG 2.1 AA compliance, verified through third-party audits.
Revenue totaled $182.4 million, an increase of 14.1% year-over-year. The increase was driven by multiple factors like share gains, enrollment, and continued demand for digital learning solutions which is accessible.

7. What I Learned

Ensuring full accessibility compliance is not just about meeting WCAG guidelines but also about creating an inclusive experience that works seamlessly for all users.
Usability testing in realistic contexts is crucial to uncover challenges that users might face in actual educational environments.
UX design success often depends on close collaboration with cross-functional teams, including developers, subject matter experts, and accessibility consultants.
Design is an iterative process that evolves through user feedback and testing.