Reimagining Templates for User Experience
Canvas ReDesign
CASE STUDY
CIT Pat Woessner and I worked together to create a Canvas template that incorporated MICDS branding guidelines and create a more approachable and professional user experience.
Our goal was to create an aesthetic that did not cause cognitive overload for students.
Audience: Middle and Upper School Students and Teachers
Responsibilities: UX Research and Design, Instructional Design
Tools Used: Miro, Instructure Canvas, HTML, XML, C Programming, Wireframing
Research: JSTOR, Cognitive Science, Visual Perception, Process of Reading
Understanding
The current design is simple and uncluttered, however; it does not reflect
-
an effective schema
-
interacting elements
-
stages of interaction
When used, the template relies heavily on letter-wise processing instead of dealing directly with saccade eye movements that orient the gaze towards an object of interest.
Currently the reader is overwhelmed with an extraneous load of text which takes more cognitive processing, leaving less working memory space to understand what is being asked.
Goals for Better Information Retention
Teachers at MICDS have a lack of understanding of how humans take in information through a graphical user interface.
The current Canvas template is set up for processing text. Users do not have the opportunity to jump around to pick up different types of information. Purposeful areas for the eye to fixate have been undeveloped.
Little consideration of font, size, character width or spacing, weight, and line spacing places extraneous weight on the reader’s cognitive processing.
Our goal is to adjust the way the user skims the GUI to increase fluency, accuracy, and comprehension.
Our brainstorm session started with these areas of concern
-
common eye fixations
-
field of vision
-
minimize cognitive overload
-
user productivity
-
shorten learning restrictions
-
information in intuitive places
-
section 508 color, spacing etc...
-
consistency with user expectations
-
discoverability
-
well-defined landmarks
User Persona Analysis
In this phase we needed to identify the typical user of Canvas to focus faculty and student needs and desires.
We concentrated on the following areas
-
Demographics (age, education level, technology level)
-
Psychographics (social media, extra-curricular activities, spending habits, sports, opinion of technology, reading, video)
-
Triggers (Positive/Negatives of Canvas)
Thinking behind our persona.
Some usability specialists feel that designers will have far more success designing an interface that meets the goals of one specific person, instead of trying to design for the various needs of many.
Our goal was to develop a believable persona so that everybody will accept the person.
We decided to detail these technical skills to give an idea of computer competency, and to include one or two fictional details about the persona’s life.
-
Basic, Intermediate, and Novice Computer Skills
-
Goal oriented user
-
Data driven user
-
Engaged user
-
Fictional user
FRUSTRATIONS
-
"Why can't everything be under assignments?"
-
"Why do we have multiple assignments that are the same thing but have multiple due dates or mislabelled?"
-
"Unnecessarily long assignments so you never know what you’re doing."
-
"I can't always find where to submit"
-
"Why is what I need so hard to find?"
-
"Why do you have to click to so many times to get through a module?"
-
"It's hard to read through all the stuff I need to and then figure out what I am supposed to do."
User Journey
NEEDS
Goals for Better Information Retention
Teachers at MICDS have a lack of understanding of how humans take in information through a graphical user interface.
The current Canvas template is set up for processing text. Users do not have the opportunity to jump around to pick up different types of information. Purposeful areas for the eye to fixate have been undeveloped.
Little consideration of font, size, character width or spacing, weight, and line spacing places extraneous weight on the reader’s cognitive processing.
Our goal is to adjust the way the user skims the GUI to increase fluency, accuracy, and comprehension.
Our brainstorm session started with these areas of concern
-
common eye fixations
-
field of vision
-
minimize cognitive overload
-
user productivity
-
shorten learning restrictions
-
information in intuitive places
-
section 508 color, spacing etc...
-
consistency with user expectations
-
discoverability
-
well-defined landmarks