# CPT-363 User Interface Design

> ## What’s Happening This Week
> #### How to explore the problem space?
> ##### Important Reminders
> * [Journey Map](#) assignment <span class='badge'> Tue Jun 12th 11:59pm PDT</span>
> * [Course Reflection Log](#) assignment <span class='badge'> Fri Aug 3rd 11:59pm PDT</span>
>
> ##### Required Reading
> * [The Skeptic’s Guide To Low-Fidelity Prototyping](https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/)
>
> [Required Reading Quiz due Jun 4th](https://canvas.sfu.ca/courses/44038/quizzes/166553 ':class=button')

---

## Week 1 (May 9 - 15)

![UX - User Experience](images/12650723674_d5c85af332_k.jpg ':class=banner-image')

### What is usability and user experience design?

##### Summaries and Questions | Week 1  
[May 9th Class One-minute Summaries](https://sso.canvaslms.com/courses/1924881/assignments/14377751)

##### Presented Slides | Week 1  
<a class="embedly-card" data-card-controls="0" data-card-align="left" data-card-width="100%" href="https://docs.google.com/presentation/d/1BLaaOTsGxDmNcAhg6pdx3hl9IvI8NErg8Oe5ceh83fw/edit?usp=sharing">Grav and Docsify Slides Placeholder</a>

##### Supplemental Materials | Week 1  
<a class="embedly-card" data-card-controls="0" data-card-align="left" data-card-width="100%" href="https://qofr.files.wordpress.com/2016/11/q-of-r-presentation-11.pdf">Elements of User Experience by Jesse James Garrett</a>

##### Downloads | Week 1
[Course Overview](https://sso.canvaslms.com/courses/1924881/files/folder/Downloads/Course%20Overview)  

##### Recommended Reading | Week 1  
<a class="embedly-card" data-card-controls="0" data-card-align="left" data-card-width="100%" href="https://www.nngroup.com/articles/usability-101-introduction-to-usability/">Usability 101: Introduction to Usability</a>

![Flowchart](images/4853380320_492f9dce63_b.jpg ':class=banner-image')

---

## Week 2 (May 16 - 22)

### What is a holistic user experience design process?

#### Summaries and Questions | Week 2   
[May 16th Class One-minute Summaries](https://sso.canvaslms.com/courses/1924881/assignments/14377743)

#### Presented Slides | Week 2   
<a class="embedly-card" data-card-controls="0" data-card-align="left" data-card-width="100%" href="https://docs.google.com/presentation/d/1BLaaOTsGxDmNcAhg6pdx3hl9IvI8NErg8Oe5ceh83fw/edit?usp=sharing">Grav and Docsify Slides Placeholder</a>

#### CPT-363 UX Design Process/Toolkit | Week 2
![UX Design Process/Toolkit](images/ux-toolkit-8-no-numbers.png)

#### Downloads | Week 2
[Product Reaction Cards](https://sso.canvaslms.com/courses/1924881/files/folder/Downloads/Product%20Reaction%20Cards)  

#### Assignments | Week 2
[Course Reflection Log](https://sso.canvaslms.com/courses/1413912/assignments/9519528)  

#### Recommended Reading  
<a class="embedly-card" data-card-controls="0" data-card-align="left" data-card-width="100%" href="https://uxplanet.org/the-evolution-of-ux-process-methodology-47f52557178b">The Evolution of UX Process Methodology</a>

---

## Week 3 (May 23 - 29)

![Bullseye](images/6384294717_5047a35d48_b.jpg ':class=banner-image')

### How to make more strategic design decisions?

#### Summaries and Questions | Week 3  
[May 23rd Class One-minute Summaries](https://sso.canvaslms.com/courses/1924881/assignments/14377744)

#### Presented Slides | Week 3  
<a class="embedly-card" data-card-controls="0" data-card-align="left" data-card-width="100%" href="https://docs.google.com/presentation/d/1BLaaOTsGxDmNcAhg6pdx3hl9IvI8NErg8Oe5ceh83fw/edit?usp=sharing">Grav and Docsify Slides Placeholder</a>

#### Supplemental Materials | Week 3  
<a class="embedly-card" data-card-controls="0" data-card-align="left" data-card-width="100%" href="https://www.youtube.com/embed/a40QYgO-_aM">Customer Journey Mapping</a>

#### Assignments | Week 3
[Journey Map](https://sso.canvaslms.com/courses/1924881/assignments/14377756)  
[Informed Consent Materials](https://sso.canvaslms.com/courses/1924881/files/folder/Downloads/Informed%20Consent)  

#### Required Reading | Week 3  
<a class="embedly-card" data-card-controls="0" data-card-align="left" href="https://www.aytech.ca/blog/user-journey-map/">What is a User Journey Map?</a>

---

## Week 4 (May 30 - Jun 5)

![Wireframe](images/6968244538_4c0f7c7e64_k.jpg ':class=banner-image')

### How to explore the problem and design space?

#### Summaries and Questions | Week 4  
[May 30th Class One-minute Summaries](https://sso.canvaslms.com/courses/1924881/assignments/14377745)

#### Presented Slides | Week 4  
<a class="embedly-card" data-card-controls="0" data-card-align="left" data-card-width="100%" href="https://docs.google.com/presentation/d/1BLaaOTsGxDmNcAhg6pdx3hl9IvI8NErg8Oe5ceh83fw/edit?usp=sharing">Grav and Docsify Slides Placeholder</a>

#### Supplemental Materials | Week 4    
<a class="embedly-card" data-card-controls="0" data-card-align="left" data-card-width="100%" href="https://www.youtube.com/embed/MwidSAlbEB8">UI Sketching Conventions</a>

#### Downloads | Week 4  
[4-UP BROWSERS + GRID](https://sso.canvaslms.com/courses/1924881/files/folder/Downloads/Sketching%20Templates/sneakpeekit-4-browsers)  
[4-UP MOBILES + GRID](https://sso.canvaslms.com/courses/1924881/files/folder/Downloads/Sketching%20Templates/sneakpeekit-4-mobiles)  

#### Required Reading | Week 4    
<a class="embedly-card" data-card-controls="0" data-card-align="left" href="https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/">The Skeptic’s Guide To Low-Fidelity Prototyping</a>

---

## Schedule

### <i class="fas fa-calendar fa-fw"></i> Week 1 (May 9 - 15)
**What is usability and user experience design?**  
<i class="fas fa-desktop fa-fw"></i> [Introduction to UX Design](https://docs.google.com/presentation/d/e/2PACX-1vRnnRFelgw1ksq_p8Eryg3dnyLCRRLPf5fBgdwdv9p-tCIwcxqWvzDGrGbjxGHL7HqEJVpmV26ntk3a/pub?start=false&loop=false&delayms=3000)   
<i class="fas fa-book fa-fw"></i> [Usability 101: Introduction to Usability](https://www.nngroup.com/articles/usability-101-introduction-to-usability/)  

### <i class="fas fa-calendar fa-fw"></i> Week 2 (May 16 - 22)
**What does a holistic user experience design process look like?**  
<i class="fas fa-keyboard fa-fw"></i> [Course Reflection Log](https://sso.canvaslms.com/courses/1924881/assignments/14377752) <span class='badge'> Fri Aug 3rd 11:59pm PDT</span>  
<i class="fas fa-desktop fa-fw"></i> [The Process of UX Design](https://docs.google.com/presentation/d/e/2PACX-1vRnnRFelgw1ksq_p8Eryg3dnyLCRRLPf5fBgdwdv9p-tCIwcxqWvzDGrGbjxGHL7HqEJVpmV26ntk3a/pub?start=false&loop=false&delayms=3000)   
<i class="fas fa-book fa-fw"></i> [The Evolution of UX Process Methodology](https://uxplanet.org/the-evolution-of-ux-process-methodology-47f52557178b)  

### <i class="fas fa-calendar fa-fw"></i> Week 3 (May 23 - 29)
**How to make more strategic design decisions?**  
<i class="fas fa-keyboard fa-fw"></i> [Journey Map](https://sso.canvaslms.com/courses/1924881/assignments/14377756) <span class='badge'> Tue Jun 12th 11:59pm PDT</span>  
<i class="fas fa-folder fa-fw"></i> [Informed Consent Materials](https://sso.canvaslms.com/courses/1924881/files/folder/Downloads/Informed%20Consent)  
<i class="fas fa-desktop fa-fw"></i> [Strategic UX Design](https://docs.google.com/presentation/d/e/2PACX-1vRnnRFelgw1ksq_p8Eryg3dnyLCRRLPf5fBgdwdv9p-tCIwcxqWvzDGrGbjxGHL7HqEJVpmV26ntk3a/pub?start=false&loop=false&delayms=3000)   
<i class="fas fa-book fa-fw"></i> [What is a User Journey Map?](https://www.aytech.ca/blog/user-journey-map/)  

### <i class="fas fa-calendar fa-fw"></i> Week 4 (May 30 - Jun 5)
**How to explore the problem space?**  
<i class="fas fa-desktop fa-fw"></i> [Prototyping](https://docs.google.com/presentation/d/e/2PACX-1vRnnRFelgw1ksq_p8Eryg3dnyLCRRLPf5fBgdwdv9p-tCIwcxqWvzDGrGbjxGHL7HqEJVpmV26ntk3a/pub?start=false&loop=false&delayms=3000)   
<i class="fas fa-book fa-fw"></i> [The Skeptic’s Guide To Low-Fidelity Prototyping](https://www.smashingmagazine.com/2014/10/the-skeptics-guide-to-low-fidelity-prototyping/)  
<i class="fas fa-users fa-fw"></i> In-class office hours (tentative)  

### <i class="fas fa-calendar fa-fw"></i> Week 5 (Jun 6 - 12)
**How to plan, conduct, and summarize usability tests?**  
<i class="fas fa-desktop fa-fw"></i> [Usability Testing](https://docs.google.com/presentation/d/e/2PACX-1vRnnRFelgw1ksq_p8Eryg3dnyLCRRLPf5fBgdwdv9p-tCIwcxqWvzDGrGbjxGHL7HqEJVpmV26ntk3a/pub?start=false&loop=false&delayms=3000)   
<i class="fas fa-book fa-fw"></i> [The Art of Guerrilla Usability Testing](http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/)  
<i class="fas fa-users fa-fw"></i> In-class office hours (tentative)

---

## Resources

### Reflective Writing  
*   [A short guide to reflective writing](https://intranet.birmingham.ac.uk/as/libraryservices/library/skills/asc/documents/public/Short-Guide-Reflective-Writing.pdf)
*   [How Reflecting On Your Work Can Make You A Better Designer](https://medium.com/center-centre-cohort-01/how-reflecting-on-your-work-can-make-you-a-better-designer-5ce2f3886f51)
*   [Online Guide to Reflective Writing](https://nile.northampton.ac.uk/bbcswebdav/pid-1244383-dt-content-rid-3278540_1/courses/Centre-for-Achievement-and-Performance/Skills/Reflective%20Writing/Reflective%20Writing%20-%20Feb%202017.pdf)
*   [Reflective Toolbox](http://writeonline.ca/media/documents/ReflectiveToolbox.pdf)
*   [Reflective writing: a basic introduction](http://www.port.ac.uk/media/contacts-and-departments/student-support-services/ask/downloads/Reflective-writing---a-basic-introduction.pdf)

### UX Platform Guideline Collections  
*   [Android User Interface Design Guidelines](https://developer.android.com/guide/practices/ui_guidelines/index.html)
*   [Google Material Design Guidelines](https://material.google.com/)
*   [iOS Human Interface Design Guidelines (iPhone and iPad)](https://developer.apple.com/ios/human-interface-guidelines/)
*   [KDE Human Interface Design Guidelines](https://community.kde.org/KDE_Visual_Design_Group/HIG)
*   [OS X Human Interface Design Guidelines](https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html#//apple_ref/doc/uid/TP40002720-TPXREF101)
*   [Windows App Design Guidelines (Touch)](https://msdn.microsoft.com/en-us/library/dn742468.aspx)

### UX Templates  
*   [Contextual Interview Form](http://userfocus.co.uk/pdf/cisheet.pdf)  
*   [One Page User Research Plan](https://www.smashingmagazine.com/2012/01/ux-research-plan-stakeholders-love/)  
*   [Templates & Downloadable Documents | Usability.gov](http://www.usability.gov/how-to-and-tools/resources/templates.html)
*   [cxpartners | Resources](http://www.cxpartners.co.uk/ux-resources/)
*   [The PM Toolkit](http://thepmtoolkit.com/)
*   [UX Project Checklist](http://uxchecklist.github.io/)

### UX Design Checklists  
*   [A Checklist for Designing Mobile Input Fields](http://www.nngroup.com/articles/mobile-input-checklist/)  
*   [Mobile UX Checklist (PDF, by Mobify)](http://downloads.mobify.com.s3.amazonaws.com/ebooks/25-Ways-to-Make-Your-Mobile-E-Commerce-Revenue-Skyrocket-Mobify.pdf)  
*   [One-Page Touch Interaction Design Checklist (PDF)](https://canvas.sfu.ca/courses/38847/files/folder/Handouts/Touch%20Interaction%20Checklist)
*   [Usability checklist (Userium)](https://userium.com/)
*   [UX Project Checklist](http://uxchecklist.github.io/)

### UX Technique Collections  
*   [Methods | Usability.gov](http://www.usability.gov/how-to-and-tools/methods/)
*   [Methods | Usability Body of Knowledge](http://www.usabilitybok.org/methods)
*   [Usability Planner](http://usabilityplanner.org/#home)
*   [UX Techniques (by UX Mastery)](http://uxmastery.com/resources/techniques)

### UX Article Collections  
*   [The UX Bookmark](http://www.theuxbookmark.com/)
*   [User Experience Magazine (UXPA)](http://uxpamagazine.org/)
*   [UI/UX Articles (Medium)](https://medium.com/ui-ux-articles)

### UX eBooks  
*   [50 UX Best Practices by Above the Fold (email address required)](http://www.userexperiencedesigns.com/)
*   [Bright Ideas for User Experience Designers](http://www.userfocus.co.uk/ebooks/uxdesign.html)
*   [The Fable of the User-Centered Designer](http://www.userfocus.co.uk/fable/)

### UX Design MOOCs & Courses
*   [Human-Computer Interaction | Coursera](https://www.coursera.org/course/hciucsd)
*   [The Design of Everyday Things | Udacity](https://www.udacity.com/course/design101)
*   [Rapid Wireframing: Finding the Right Product Design](https://www.skillshare.com/classes/design/Rapid-Wireframing-Finding-the-Right-Product-Design/1947996659)

### UX Podcast Collections  
*   [Design Critique: Products for People](http://designcritique.net/)
*   [Podcasts - UIE Brain Sparks](http://www.uie.com/brainsparks/topics/podcasts/)
*   [Boagworld Podcast](https://boagworld.com/show/)
*   [User Experience Podcast](http://www.infodesign.com.au/uxpod)

### UX Video Collections  
*   [Google Developers Channel](https://www.youtube.com/user/GoogleDevelopers/search?query=user+experience+usability)  
*   [Interaction Design Association Vimeo Channels](http://vimeo.com/ixdaglobal/channels)  
*   [NNgroup YouTube Channel](https://www.youtube.com/user/NNgroup/videos)  
*   [UX Mastery YouTube Channel](https://www.youtube.com/channel/UCXmQyv8sAjmvgCCgvRKi9hw)

---

## LMS Links

[Calendar](https://canvas.sfu.ca/courses/44038/calendar)  
[Assignments](https://canvas.sfu.ca/courses/44038/assignments )  
[Quizzes](https://canvas.sfu.ca/courses/44038/quizzes)  
[Class Discussions](https://canvas.sfu.ca/courses/44038/discussion_topics)  
[Syllabus](https://canvas.sfu.ca/courses/44038/assignments/syllabus)  

---

## Contact

### Course Instructor  
Some Name  
somename@somewhere.edu  

Online office hours:  
Mondays 12:00-1:30pm  
Fridays 12:00-1:00pm  

Suggestion, concern or complaint?  
Send me your [anonymous course feedback](#)!