top of page

Reimagining Templates for User Experience

Canvas Upgraded Template UX Design

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

​

  1. an effective schema

  2. interacting elements

  3. 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.

​​

Canvas Template Simple

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

Generation and Convergence Phase

Our first phase was generating ideas and then to converge those ideas.

​

We had to use "The Worst Idea" method when we noticed we kept repeating the same ideas. This helped us better problem solve and find new areas we had not considered.

Cognitive Load, Visual Processing, UX Design

User Task Analysis

A comprehensive user analysis was conducted to determine 

  • bias

  • assumptions

  • internal commonalities

  • improvement areas

  • opportunities

  • gaps

​

Quantitive and qualitative data was used to define

 

  • User persona

  • User stories

  • User experience 

  • Task analysis 

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

 

  1. Demographics (age, education level, technology level)

  2. Psychographics (social media, extra-curricular activities, spending habits, sports, opinion of technology, reading, video)

  3. 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. 

​

  1. Basic, Intermediate, and Novice Computer Skills

  2. Goal oriented user

  3. Data driven user

  4. Engaged user

  5. 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

bottom of page