Visionlearning

Overview

Visionlearning provides free online learning materials for STEM education. I led the visual design and front-end development strategy during a multi-year, comprehensive modernization of their platform, transforming how teachers and students interact with complex scientific content.

The Challenge

Visionlearning needed to modernize their entire platform while making undergraduate-level science less overwhelming for students. The existing system required better navigation, enhanced discoverability of learning features, and specialized functionality for their unique modular content structure.

Results

The comprehensive rebrand and redesign created a more intuitive learning environment that reduces cognitive load for students tackling complex STEM topics. The new platform features innovative reading toggles for glossary terms and Next Generation Science Standards, custom scientific illustrations, and a complete design system that continues to support ongoing feature development.

My Role & Process

I managed the complete visual transformation including logo design and branding, interaction design, design system development from Figma to front-end implementation, and creation of custom scientific illustrations. Working across multiple releases, I used familiar design patterns like tabs and accordions while developing specialized features tailored to their educational content.

Logo Redesign

I redesigned the logo to symbolize both a student engrossed in learning and an observant eye, reflecting Visionlearning's commitment to insightful and engaging STEM education.

Innovative Reading Features

I developed specialized reading toggles that allow users to highlight glossary terms and Next Generation Science Standards within module content, creating an interactive learning experience tailored to both students and teachers.

Glossary Integration

The glossary toggle highlights terms within readings, with clickable definitions that cross-link to detailed glossary pages, creating a seamless learning flow.

Next Generation Science Standards (NGSS)

The NGSS toggle highlights relevant annotations for teachers, with clickable standards that open detailed specifications.

Custom Scientific Illustrations

I created extensive custom scientific illustrations using Adobe Illustrator and Photoshop to clarify complex topics. The complexity ranged from simple chemical formulas to detailed visualizations of plant and animal cell anatomy, with style adapted to each illustration's context and educational purpose.