Innovation Lab
Wireframe
Visual Design
Collaboration Platform
Background

Shaping the Future of Education

The Scholastic Innovation Lab brings together educators, students, and parents to co-design and test new educational tools. Participants help shape product development through activities like testing and workshops, and are rewarded with compensation, resources, and an Innovator badge. The Lab aims to create impactful, inclusive learning solutions for students and educators nationwide.
‍
Roles: UI/UX Designer
Tools: Figma, Illustrator, InDesign

Usability Overview

Objective

The user experience team aimed to assess the effectiveness of the Innovation Lab webpage to create a more visually appealing page.

Pre-defined Usability Issues

Before designing the webpage, a previous team conducted a usability overview to ascertain the needed points for re-design. Their findings include:

Analysis Findings

Outdated Design
‍The Innovation Lab's design is no longer modern or user-friendly.
Accessibility Issues
Fails to meet WCAG AA accessibility standards.
Brand Misalignment
‍Does not align with Scholastic's current brand guidelines.
Limited Effectiveness
‍Hinders user experience and overall functionality.
Wireframe

From Concept to Wireframe

The redesigned wireframe simplifies the structure of the Innovation Lab page by replacing subpages with direct navigation links to specific sections:
  • Replaced subpages with direct links in navigation.
  • Aligned components with Scholastic’s internal system for consistency.
  • Simplified access to specific sections.
  • Ensured concise presentation of information.
Click to enlarge

First Iteration

The initial version of the website design aimed to consolidate various marketing materials into a single, engaging page. Colors were adjusted to comply with WCAG AA standards, and the design process focused on grouping information by content type and section for improved clarity and organization.
Click to enlarge
Compare Original to Improved

Improvements

The final version simplified the design by eliminating sections that the UX team identified as cluttering the page. The focus shifted to creating a clean layout with a clear and easily understandable message for both new and returning users. Bold colors were used strategically to enhance visual appeal while ensuring readability.

Hero

The homepage now includes a product description and a clear call-to-action (CTA) to establish the foundation of the product as users explore the page.

About

The About section has been redesigned to be more visually engaging, featuring a concise and comprehensive description.

Product Details

The original version's large blocks of text created a significant usability issue by increasing users' cognitive load. The new layout addresses this by breaking up the text and pairing it with icons and graphics, making the content more user-friendly and easier to absorb.

Addition of FAQs

The original version lacked a comprehensive FAQ section to address common user needs and concerns. The new FAQ replaces the innovation cycle, eliminating redundant information while focusing on primary concerns to enhance product clarity and awareness.

Final Website

Click to enlarge
Takeaways

Redesigning the Innovation Lab

The redesign of the Innovation Lab website focused on making information easy to find and understand. Subpages were replaced with links to specific sections, simplifying navigation. Colors were updated to meet accessibility standards, and the design followed Scholastic's internal system for consistency. Information was organized by content type to improve clarity. After several revisions, unnecessary sections were removed to create a clean and simple layout. Bold colors were used for visual impact while keeping the message clear and readable for all users.
Next Steps with the current Scholastic team:
  • Maintain Accessibility: The Scholastic Team is constantly expanding its accessibility standards. Future company policy changes may result in accessibility improvements.

Explore More!

ALANA Chat /  Resource Website
Beyond the Horizon / Interactive Infographic
Innovation Lab / Collab Platform
Poseidon Project / User Testing Report