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](/static/f61e582bc54400615103d7661db521e7/4133c/visionlearning.jpg)
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](/static/795ab4ccd984a704d7d30a387271f18f/4133c/grid-mobile-visionlearning.jpg)
Feature highlights
The multi-tier breadcrumb makes it easy to navigate disciplines and topics from the module.
![Visionlearning breadcrumb within a module reading](/static/a8efdaa1a12fe1309d7b3db42b5adb3e/d76a8/project-tour-visionlearning-module-breadcrumb.jpg)
In the reading, glossary terms are highlightable. They link through to the Glossary section.
![Visionlearning highlightable glossary terms](/static/6225c4f69e2ef635ec55abbe6fb34691/d76a8/project-tour-visionlearning-glossary-terms.jpg)
The Glossary uses accordion-style definitions, audio pronunciation, and links to relevant content in the Library.
![Visionlearning glossary page](/static/2865eaa1b916324d88f0e682f7aae2be/d76a8/project-tour-visionlearning-glossary-definition.jpg)
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](/static/88c3e65c73038fb0fe7e19bbb11424a8/3fc48/visionlearning-illustrations-cells.jpg)
Illustrations created for 'Discovery and Structure of Cells'
![Illustrations of various scientific experiments](/static/96686e103c70e51316a26001b3930c83/3fc48/visionlearning-illustrations-experiments.jpg)
Illustrations of various scientific experiments
![Illustration of RNA and DNA structural composition](/static/019aaaf7fafb0cdb37df44555ad3aa1d/3fc48/visionlearning-illustrations-rna-dna.jpg)
RNA and DNA structural composition
![Illustration of the four levels of protein structure](/static/8aa951412dc823d7ebd2337076685cc6/3fc48/visionlearning-illustrations-protein-structure.jpg)
Four levels of protein structure
![The periodic table of elements](/static/d1aa039bf0063b1a4a339db2aaf13619/3fc48/visionlearning-illustrations-periodic-table.jpg)
The periodic table of elements