idea







Supercharge your Learning

My User Experience Design project idea is an online learning experience designed specifically for accessibility. It's a unique experience - not a replica of in-person learning moved into the virtual realm - where it's possible to create knowledge by including learners, not just transmit it.

Using a web application, I'm applying the techniques we know draw out the highest quality integration for learners to curate a potent, student-focused learning experience.

value proposition

Currently, educators evaluate a student's responsiveness to learning by eliciting participation. Often, this leads to an environment where only one type of interaction is recognized as productive: talking. What if educators had the opportunity to evaluate a student's responsiveness through engagement? This online learning experience provides opportunities to engage that allow for different ways of learning and different ways of understanding. It's an invitation for the learners to show up as themselves and interact in a truly accessible learning experience.

For example, in the current model an instructor will ask a question and call on a learner to answer in front of the group. This is considered good participation. In the online learning experience that I'm designing, a learner has an opportunity to take action (press a button that tells a story to encourage memory, click on a link that opens up a deeper dive into a concept, flip a card to quiz themselves following a lesson) and all of this engagement is encouraged as part of learning success. 

This online learning experience uses what we understand about learning science and integrated learning methodologies and expresses it through digital interaction to create 3 key types of access to learning / understanding: 

1) Access to content via a variety of mediums;

2) Access to concepts through complementary disciplines (ex math and music); and

3) Access to socially and culturally informed contexts.


research

Please see 5 interviewees' responses to 4 questions about their online learning experiences so far.


personas

Persona 1, Explorer, would benefit most from this online learning experience. Persona 2, Endurer, is often included in workplace learning cohorts and exhibits strengths in the final stages of project launching and maintenance, while struggling more with change.

information architecture

Below is the first draft of the project's information architecture. On the left in pink, you can see resources that are available throughout the learning. The yellow portion is a progression of increasingly complex topics starting with the purpose (or why). In blue, you can see that there is a structure of info, example, activity interspersed with especially memory-friendly learning prompts.

user flows


This user flow charts the path from home to interacting with the lesson. 

 

sketches


interaction design

Applying Don Norman's Design Principles (Visibility, Feedback, Affordance, Mapping, Constraint, Consistency) to my project helped me to understand what elements make a design legible and functional. The more I learn about these principles, the more I recognize them in my environment and in all of my favourite products. It will take a lot of iterative practice and feedback to know that I've fully incorporated each of these principles, but through this process I've recognized that using the principle of affordance (borrowing a cultural norm of scrolling through articles while reading) could be applied to organize the blocks of lessons and activities in the web app for Supercharge your Learning.

wireframes

The first wireframe I put together reflects the first issue usability testing uncovered: too much information on one page! 


The second wireframe (shown below) shows a slight improvement for the usability because it allows vertical scrolling and a focus on one chunk of the lesson at a time. Still a work in progress!

prototype

While working through a prototype in InVision and installing Craft and Sketch, I realized the limits of my ancient MacBook Air! Instead of letting an interminable wheel of death (constant buffering in InVision) stop me, I'm getting creative to show you the interactive prototype that I've been testing! Please be prepared - this is ultra low fi.


usability tests


Most helpful insights from usability tests (thanks to patient friends):

1) having all 4 days of learning content on the home page is confusing and overwhelming;

2) showing static options like "dive deeper" in separate task flow may help designate them as distinct functions;

3) could help to scroll through entire daily lesson like reading an article from top to bottom of page with options to divert to deeper learning buttons; and

4) could show a progress bar to help learner know how far they've progressed and feel a sense of achievement when complete.


iteration

The second prototype after more usability tests helps me to see an interface that is much more satisfying! I have a lot of work to do to refine this prototype into being interactive and functional, but I now understand the process to achieve a closer and closer approximation to what will be the most able to reflect the support I'm hoping this web app will offer to learners.


re-test prototype

More usability tests!

Thanks to patient friends (again) I've learned some valuable insights into the latest prototype. For instance:

1) hiding too much information is just as confusing as having too much information;

2) the scrolling function through the day's learning is an improvement to selecting different windows to access information; and

3) overall, I look forward to spending more time with these iterations.

style guidelines & accessibility testing


Primary Colour: Dark Blue #1C5685

Secondary Colour: Light Blue #E8F5FF

Primary Accent Colour: Soft Orange #EBB94C

Alternative Accent Colour: Dark Orange #DC582A

Primary Font: Open Sans Light 300

Secondary Font: Open Sans Regular 400

Buttons: Arrowed submit button through CSS

5 minute 
presentation 
deck

feedback


Looking forward to incorporating any feedback after the presentation. 


Thank you!

© 2023
Using Format