Visionlearning • Carl Avidano
  • UX Research
  • Interaction Design
  • Front-end Development

Visionlearning

Tags

Front-End DevelopmentBrandingIllustration

Visionlearning is a free online learning space for teachers and students of S.T.E.M. disciplines

Through Avidano Digital, I worked closely with Visionlearning educators and staff to completely rebrand and redesign their online learning materials. We recently redesigned the website, and continue to work on new features and enhancements.

Logo design

It's a student reading. It's an eye. It's the Visionlearning logo invites teachers and students to access their high-quality online educational materials.

Visionlearning logo

The Visionlearning logo

Look and feel

One can easily feel overwhelmed when learning anything new, particularly undergraduate-level science! I intentionally used common design patterns and familiar UX elements like tabs and accordions across the entire website. To make it easier to navigate and discover Visionlearning's numerous learning features, several elements were tailored to their one-of-a-kind modular content.

Inclusivity

Visionlearning's content is available in English and Spanish, while the OpenDyslexic typeface option makes reading easier for dyslexic learners. Keyboard users can navigate the website through tabbing.

Depiction of the Visionlearning website on mobile devices

Feature highlights

The multi-tier breadcrumb makes it easy to navigate disciplines and topics from the module.

Visionlearning breadcrumb within a module reading

In the reading, glossary terms are highlightable. They link through to the Glossary section.

Visionlearning highlightable glossary terms

The Glossary uses accordion-style definitions, audio pronunciation, and links to relevant content in the Library.

Visionlearning glossary page

Science illustrations

Using Adobe Illustrator and Photoshop, I created custom scientific illustrations to add clarity to a variety of complex topics. The style depended on their placement and meaning within the content.

The complexity of these illustrations ranged from simple chemical formulas to visualizing the anatomy of plant and animal cells.

Illustrations created for 'Discovery and Structure of Cells

Illustrations created for 'Discovery and Structure of Cells'

Illustrations of various scientific experiments

Illustrations of various scientific experiments

Illustration of RNA and DNA structural composition

RNA and DNA structural composition

Illustration of the four levels of protein structure

Four levels of protein structure

The periodic table of elements

The periodic table of elements