---
title: "A Few Thoughts About... the Launch of CMPT-363 User Interface Design Summer 2022"
date: 05/09/2022
published: true
continue_link: true
header_image: false
taxonomy:
    category: blog
    tag:
      - Open
      - Docsify
      - OnlineCourse
      - ExperienceDesign
      - 52WeeksOfCMPT363
metadata:
    'twitter:card' : summary
    'twitter:site' : @hibbittsdesign
    'twitter:title' : A Few Thoughts About... the Launch of CMPT-363 User Interface Design Summer 2022
    'twitter:description' : "SFU CMPT-363 User Interface Design online course is once again ready to launch with the goal of being a useful and enjoyable learning experience for participants"
    'twitter:image': 'http://hibbittsdesign.org/blog/posts/2022-05-09-a-few-thoughts-about-my-cmpt-363-user-interface-design-course-summer-2022/screenshot.png'
---

_Recently I tweeted about the launch of my online CMPT-363 User Interface Design course this summer, and I thought I would share them here:_

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">My <a href="https://twitter.com/hashtag/SFU?src=hash&amp;ref_src=twsrc%5Etfw">#SFU</a> CMPT-363 User Interface Design online course is once again ready to launch (tomorrow!) with the goal of being a useful and enjoyable learning experience for participants🚀 <a href="https://t.co/WdYKpszDXL">https://t.co/WdYKpszDXL</a> <a href="https://twitter.com/hashtag/52WeeksOfCMPT363?src=hash&amp;ref_src=twsrc%5Etfw">#52WeeksOfCMPT363</a></p>&mdash; Hibbitts Design (@hibbittsdesign)  <a href="https://twitter.com/hibbittsdesign/status/1523712927714340864?ref_src=twsrc%5Etfw">May 9, 2022</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

===

<br>

<blockquote class="twitter-tweet" data-conversation="none"><p lang="en" dir="ltr">To overcome the technical constraints of the <a href="https://twitter.com/hashtag/CanvasLMS?src=hash&amp;ref_src=twsrc%5Etfw">#CanvasLMS</a>, I&#39;ve again used my <a href="https://t.co/Cj7y22iLmY">https://t.co/Cj7y22iLmY</a> Open Course Starter Kit project for the majority of content - using the system-independent format of Markdown and a streamlined content updating process <a href="https://t.co/HK0vMR1utn">https://t.co/HK0vMR1utn</a></p>&mdash; Hibbitts Design (@hibbittsdesign) <a href="https://twitter.com/hibbittsdesign/status/1523714099137318913?ref_src=twsrc%5Etfw">May 9, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br>

<blockquote class="twitter-tweet" data-conversation="none"><p lang="en" dir="ltr">But even of more importance are the <a href="https://twitter.com/hashtag/UX?src=hash&amp;ref_src=twsrc%5Etfw">#UX</a> principles and related key techniques I utilized when designing the CMPT-363 course site:<br><br>The What?<br>- Human-centered Design (aka UCD)🔄<br> 1. Understand student needs<br> 2. Iterative design process<br> 3. Student feedback loop</p>&mdash; Hibbitts Design (@hibbittsdesign) <a href="https://twitter.com/hibbittsdesign/status/1523714887460921347?ref_src=twsrc%5Etfw">May 9, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br>

<blockquote class="twitter-tweet" data-conversation="none"><p lang="en" dir="ltr">The How?<br>✓ Empathy Maps (emotions)<br>✓ Journey Mapping (flow)<br>✓ Job Stories (goals)<br>✓ Task Prioritization (tasks)<br>✓ Rapid Prototyping (designing)<br>✓ Usability Assessment (evaluating)<br>✓ Ongoing Student Dialog💬 (feedback)</p>&mdash; Hibbitts Design (@hibbittsdesign) <a href="https://twitter.com/hibbittsdesign/status/1523716055411007489?ref_src=twsrc%5Etfw">May 9, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br>

<blockquote class="twitter-tweet" data-conversation="none"><p lang="en" dir="ltr">Here are some Empathy Map excerpts:<br>Think &amp; Feel?<br>I&#39;ve got a full workload this term<br><br>See?<br>Some assignments seem of no value<br><br>Say &amp; Do?<br>Taking lots of notes<br><br>Hear?<br>Which courses are the easiest or hardest<br><br>Pains<br>Keeping within budget<br><br>Gains<br>Wants to get the most out of the course</p>&mdash; Hibbitts Design (@hibbittsdesign) <a href="https://twitter.com/hibbittsdesign/status/1523735908582772736?ref_src=twsrc%5Etfw">May 9, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br>

<blockquote class="twitter-tweet" data-conversation="none"><p lang="en" dir="ltr">And here are some example Journey Map Phases:<br>- Considering Course<br>- Participating in Class<br>- Preparing for Class<br>- Interacting With Instructor<br>- Interacting With Classmates<br>- Completing Assignments<br>- Finishing Course<br>- Continuing Learning</p>&mdash; Hibbitts Design (@hibbittsdesign) <a href="https://twitter.com/hibbittsdesign/status/1523736565608218624?ref_src=twsrc%5Etfw">May 9, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br>

<blockquote class="twitter-tweet" data-conversation="none"><p lang="en" dir="ltr">And here are two example Job Stories:<br>When...An important course deadline is coming up<br>I want to...Be reminded of it<br>So I can...Complete any needed work on time<br><br>When...Looking for particular course materials<br>I want to...Be able to find items quickly<br>So I can...Not waste my time</p>&mdash; Hibbitts Design (@hibbittsdesign) <a href="https://twitter.com/hibbittsdesign/status/1523737830941364224?ref_src=twsrc%5Etfw">May 9, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br>

<blockquote class="twitter-tweet" data-conversation="none"><p lang="en" dir="ltr">And finally, some prioritized Tasks:<br>✓Check upcoming important dates to plan my schedule<br>✓Prepare for next class/unit to better perform in course<br>✓Review current week/unit materials to form a better understanding<br>✓Submit/confirm assignments to fulfill course requirements</p>&mdash; Hibbitts Design (@hibbittsdesign) <a href="https://twitter.com/hibbittsdesign/status/1523738961197207553?ref_src=twsrc%5Etfw">May 9, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br>

<blockquote class="twitter-tweet" data-conversation="none"><p lang="en" dir="ltr">For many educators/instructors there is nothing &quot;new&quot; here, the important thing though is externalizing this information (and student perspective!) and then applying it in a thoughtful and productive way to your course site, materials, etc.</p>&mdash; Hibbitts Design (@hibbittsdesign) <a href="https://twitter.com/hibbittsdesign/status/1523743152795910144?ref_src=twsrc%5Etfw">May 9, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br>

<blockquote class="twitter-tweet" data-conversation="none"><p lang="en" dir="ltr">I should also mention that these findings did not only help shape my CMPT-363 course site over the years, but also the example course templates for my <a href="https://t.co/Cj7y22iLmY">https://t.co/Cj7y22iLmY</a> and <a href="https://twitter.com/getgrav?ref_src=twsrc%5Etfw">@getgrav</a> open source projects. <a href="https://t.co/kboRX2rdnE">https://t.co/kboRX2rdnE</a></p>&mdash; Hibbitts Design (@hibbittsdesign) <a href="https://twitter.com/hibbittsdesign/status/1523748768650199041?ref_src=twsrc%5Etfw">May 9, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br>

<blockquote class="twitter-tweet" data-conversation="none"><p lang="en" dir="ltr">TL;DR Thanks to my many students over the years, here is a set of product design principles for the student experience, in my case for both blended and online:<br>✅ Engaging<br>✅ Organized<br>✅ Relevant<br>✅ Convenient<br>✅ Enjoyable</p>&mdash; Hibbitts Design (@hibbittsdesign) <a href="https://twitter.com/hibbittsdesign/status/1523764153965416448?ref_src=twsrc%5Etfw">May 9, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>