PROJECT CONTEXT
This online portal empowers the teachers and administrators of entire school districts with a set of tools designed to facilitate and align collaborative improvements in teaching, learning and leading. 
The tool is a complex framework with several tasks in each of the
12 sections 
THE CHALLENGE
Keeping users engaged was the challenge at-hand. The confusing and overwhelming interface contributed to confusion and visual fatigue. A clear and predictable presentation of complex content was essential.
For starters, all fonts were changed to a single font family with Open Sans Light as the primary font.
Establishing a 3 column underlying grid helps organize content predictably. Ample white space provides visual pause and groups related elements in functional groups. This contributes to user confidence and efficiency of motions.
Vertical menu revisions improve typographic legibility and help the user understand current position within the sequence of modules.
Section headers (orange) appear to be interlocking. Sections expand and contract with an accordion motion to maintain focus on one task at a time.
The orange bar indicates the section title and lens number. Followed by instructions with increased legibility. User input is consistently indicated in light blue.
The same table style applied to other lenses.
The help section was relocated below the blue user input area. A collapsible display minimizes clutter, while the most relevant information remains accessible.
By rearranging the sequence of columns, resizing columns, revising colors and enlarging fonts and user tasks were completed with fewer clicks and results became visible at-a-glance. 
The horizontal navigation bar was visually disjointed.
Icons were styled and sized more consistently.
Grouping was implied with spacing.
Cleaner colors helped pop the logo and move the eye horizontally.
Visual hierarchy helps users "digest" content in an intentional sequence. Ample white space provides visual pause. 
Again: Ample white space provides visual pause and groups related elements in functional groups. This contributes to user confidence and efficiency of motions. 
Developer specs are provided in three views
Back to Top