GD 142

UX/UI Design

Fall 2020

Week One:

Monday 8/17

  • No Class

    For Next Class

Wednesday 8/19


      For Next Monday

    1. Review the Syllabus
    2.  
    3. Take the Learner Profile survey. https://forms.gle/XauQi72ZaesuGtdc9
    4. Sign  up for Discord Join: GD 142 https://discord.gg/3KxrQuG Interactive Multimedia design https://discord.gg/zbZd4T (https://discord.com/download)
    5. Sign up for Fresno County Library Card and log into Lynda.com
    6. Start Getting to know each other exercise and learning about personas

Friday 8/21


    For Next Class

Week Two:

Monday 8/24

  • Class Activities
  • Review Canvas
  • Introductions - Brief review of Personal Persona Activity
  • Questions on Syllabus
  • Discord and Lynda.com access (Add dr. Laura as a friend on Discord lhuisinga#3594) Presentation: What is UX and UI? https://docs.google.com/presentation/d/1-6Sn9XJPYKGYDhlFI9SDwELgOVg1tHWCGVJlPTNL8dA/edit?usp=sharing (Links to an external site.)
  • Watch Normans Doors
  • It is not you. Bad doors are everywhere. (Links to an external site.)
  • Review what Sketch Notes are and how to take them

    1. For Next Class

    2. Activity: The tools we use: Challenging dogma in the design process (Watch or Read: The tools we use: Challenging dogma in the design process (Links to an external site.)and take 2 pages of Sketch Notes.)
    3. Listen to UI Breakfast Podcast. Episode 69: Switching to UI/UX with Nick Babich (Links to an external site.) ( https://uibreakfast.com/69-switching-ui-ux-nick-babich/)

Wednesday 8/26

  • Class Activities
  • Review Canvas
  • OPTIONAL: Sign up for this week's check-in on zoom or send any questions via canvas message.
  • Introduce Smartwatch Project
  • If you could have any superpower what would it be? Create a persona for a superhero based on this superpower Refer to Personas resources for template and additional persona information
  • Read: 6 fundamental UX Smartwatch lessons that Apple learned the hard way (Links to an external site.) and Review: smartwatch inspiration https://uimovement.com/tag/smartwatch/ (Links to an external site.)
  • Crazy 8 ideation and Crazy 8 Wireframes (Links to an external site.)

    For Next Class

  1. [_] Read: Preface and Chap. 1 (Links to an external site.) Create one Page of sketchnotes per chapter Add Notes to collaborative slides (Links to an external site.)
  2. [_] Create a superhero persona and start ideation/crazy 8s

Friday 8/28

  • Class Activities
  • Review Canvas
  • [_} Work on P1: Superhero persona, crazy8s, Ideation, and visual research. {_} Read: Chap 2 and Chap 3 (Links to an external site.) Create one Page of sketchnotes per chapter Add Notes after your chapter one slide to the UX collaborative slides

    For Next Class

  1. Add your Chap 2 and Chap 3 (Links to an external site.) Sketchnotes after your chapter one slide to the The Basics of UX Design collaborative slides
  2. Post your Superhero persona and crazy8s to the Collaborative Crazy 8s P1 google slides (Links to an external site.). (We will use this sideshow to easily share our P1 ideas on Monday )

Week Three

Monday 8/31

  • Class Activities
  • Review Canvas
  • Group Zoom 10 am
  • A brief review of P1 statement and Questions (Process PDF and Design Summary video) Small group break out to share P1 Ideas Slides (Links to an external site.)
  • [_] Check out some P1 Examples from Fall2019 (Links to an external site.)
  • [_] Read: (Links to an external site.)How To Design For Smartwatches And Wearables To Enhance Real-Life Experience (Links to an external site.)
  • https://www.smashingmagazine.com/2015/02/designing-for-smartwatches-wearables/ (Links to an external site.)

    For Next Class

  1. Sign up for a zoom check-in on Wed or during Tuesdays' office hours or prepare a canvas message check-in. (Include your progress on P1, and any questions you have)
    1. What have I done so far on P1?
    2. What do I plan to finish this week on P1?
    3. What questions do I have?

Wednesday 9/2


    For Next Class

  1. Read: How to use typography in UI Design
  2. Read: Helping Hand: 15 Creative UI Design Concepts for Everyday Needs
  3. Have digital mock-up ready for critique

Friday 9/4


    For Next Class

  1. Leave critique comments by sunday night.
  2. Finalize P1 and turn in on Wed.

Week Four

Monday 9/7

  • NO Group Zoom
  • Labor Day Holiday

    For Next Class

  1. Finish P1

Wednesday 9/9

  • Class Activities
  • Review Canvas
  • Check in via Canvas Message or zoom meeting

  • Turn in P1 smartwatch designs, processbook and design summary video
  • Introduce P2/
  • Presentation:
  • Activity: Ideation

    For Next Class

  1. Read: How To Create Icons In Adobe XD
  2. Review 3 different Icon sets from IconFinder and tell me 1.What is working well and 2.What could be improved (2-5 sentences)
  3. Check out 20+ Tutorials for Creating Icons in Adobe Illustrator
  4. Read: A Comprehensive Guide To UI Design
  5. Linked In Learning Video OPTIONAL: Creating Icons with Illustrator

Friday

  • Work Day
  • Work on P2
  • Have Visual Research, Ideation and Sketches done before Monday.
  • Start bringing your design into the computer in Illustrator or XD for Monday

    For Next Class

  1. Be ready to show in-progress work on the computer

Week Five

Monday 9/14

  • Class Activities
  • Review Canvas
  • Group Zoom 10 am
    1. Review future projects and quick look at the rest of the semester.
    2. Announcement
    3. Questions on P2 or semester?
    4. break out rooms to share start of P2 Icons
  • Review Icon and UI pattern presentations in Canvas Resources Module

    For Next Class

  1. Read: UI Icons
  2. Work on P2

Wednesday 9/16

  • Class Activities
  • Review Canvas
  • Check in via Canvas Message or zoom meeting

  • Review: Usability page in the Resources Module
  • Activity: usability Analysis
  • work on p2

    For Next Class

  1. Finish up P2

Friday


    For Next Class

  1. Turn in P2

Week Six

Monday 9/21

  • Class Activities
  • Review Canvas
  • Group Zoom 10 am

  • Finish P2 Design and Process book
  • Presentation: Introduce P3
  • Activity: Crazy 8s

    For Next Class

  1. Add final icons and description to presentation P2 Final Slides
  2. Read: Choosing Whether to Create a Responsive Web or Native App
  3. Read: Crafting Winning Personas

Wednesday 9/23

  • Class Activities
  • Review Canvas
  • Check in via Canvas Message or zoom meeting

  • P2 Due
  • Review: Usability and User Research in the Resources Module
  • Introduce P3

    For Next Class

  1. Read: Chap 6 and Chap 7 Create one Page of sketchnotes per chapter (Turn in on canvas)
  2. Ideation and Visual Research

Friday

  • Work Day
  • View everyones finished icons. Leave a comment for the person before and after you.
  • Activity: Work Time on P3 Personas and Scenarios
  • Read: Chap 8 and Chap 9 Create one Page of sketchnotes per chapter (hold on to them and save them in a digital file)
  • Catch up on Chap 6 and Chap 7 if needed.

    For Next Class

  1. Turn in Sketch Notes on canvas

Week Seven

Monday 9/28


    For Next Class

  1. Read: Information Architecture Basics
  2. Read: Card Sorting from usability.gov
  3. Set up your own card sort in preparation for your Information Architecture

Wednesday 9/30


    For Next Class

  1. Conduct your card sort
  2. Analyze Your Data

Friday

  • Work Day
  • Create Information Architecture Flow Chart
  • Work on wire-frames based off of Information Architecture be ready to report on your UX findings of your card sort.
  • Update Icons and any new icon designs for in-progress critique on Monday

    For Next Class

  1. Place Flow charts and updated Icons into P3 critique slides for Monday

Week Eight

Monday 10/5

  • Class Activities
  • Review Canvas
  • Group Zoom 10 am

  • Break out rooms review of IA (information architecture) flow charts and updated/new icons
  • Work Time: Creation of wire-frames

    For Next Class

  1. Read:Chap 7 Evaluative Research 1-2 page of sketch notes due Friday

Wednesday 10/7

  • Class Activities
  • Review Canvas
  • Check in via Canvas Message or zoom meeting

  • Review: Paper prototyping or lo-fidelity prototyping and usability testing. (in Resource Module)
  • Activity: Building task list for paper lo-fidelity user testing

    For Next Class

  1. Read:Chap 7 Evaluative Research 1-2 page of sketch notes due Friday
  2. Read: Why brands need emotional value
  3. Review: Create Prototypes in Adobe XD
  4. Review: Animate Prototypes XD
  5. Watch: Timed Loading screen XD and XD documentation time triggers to create timed transitions
  6. Read: Manage assets in XD project using Assets panel

Friday

  • Work Day
  • Activity: Lo-fidelity User testing (3-5 people)
    • - How many errors did participants make?
    • - What elements of you current design do you want to adjust or change and why?
  • Catch up on readings/videos from Wed

    For Next Class

  1. Watch: Designing Adobe XD - Episode 05 - User Research and User Testing (38m)
  2. Read:Chap 7 Evaluative Research 1-2 page of sketch notes (turn in on Canvas)

Week Nine

Monday 10/12

  • Class Activities
  • Review Canvas
  • Group Zoom 10 am

  • Share usability report with class (Verbal)
  • Activity: Work time on Mobile App, make needed design changes based on usability report. Flag areas to test again.

    For Next Class

  1. Read: Scrollable Art boards in XD
  2. Finish your low fidelity user testing by Wed, Move on to creating your hi-fidelity prototypes in XD
  3. Read: Elevating Web Typography

Wednesday 10/14

  • Class Activities
  • Review Canvas
  • Check in via Canvas Message or zoom meeting

  • Activity: Work time on Mobile App, Work on Hi-fidelity prototype.

    For Next Class

Friday 10/16

  • Remote Class
  • Activity: Work time on Mobile App, Work on Hi-fidelity prototype.

    For Next Class

Week Ten

Monday 10/19

    <
  • Class Activities
  • Review Canvas
  • Group Zoom 10 am

  • Peer Critiques in Canvas
  • Activity: plan next round of usability testing.

    For Next Class

Wednesday 10/21

  • Class Activities
  • Review Canvas
  • Check in via Canvas Message or zoom meeting

  • Run through usability testing in small group with hi-fielity prototype.
  • Activity: Work time

    For Next Class

  1. Read: mobile app design mistakes
  2. Read:mobile heuristic principles

Friday 10/23

  • Remote Class
  • Run Hi-Fidelity usability test. (3-5 people)
    • - How many errors did participants make?
    • - What elements of you current design do you want to adjust or change and why?
    • - What did participans respond positivly and nagativly to?
  • Presentation:
  • Activity: Review each screen and identify what works well esteticly, what could be improved, and WHY. (Design principles, usability report)

    For Next Class

  1. Be prepared to share usability results in class

Week Eleven

Monday 10/26

  • Class Activities
  • Review Canvas
  • Group Zoom 10 am

  • Small group exercise, share usability results and screen evaluations.
  • Activity: work time (Finish Video, Process book, add to collaberation presentation)
  • Use adobe Spark or after effects to make a short video showing your concept and screen capture of prototype. (When you play your prototype in XD you can hit record in the upper right hand.)

    For Next Class

  1. Create screen capture video of clicking around in your prototype and add short design concept to your video
  2. Finish up Process book and submit on Canvas
  3. Add to collaberative Presentation for P3

Wednesday 10/28


    For Next Class

Friday 10/30

  • Remote Class
  • Gather user research and ideation for Starbucks Project
  • Create personas
  • Activity: review other branding guide websites

    For Next Class

Week Twelve

Monday 11/2


    For Next Class

Wednesday 11/4

  • Class Activities
  • Review Canvas
  • Check in via Canvas Message or zoom meeting

  • Presentation: Introduce Website redesign group project
  • Guest speakers! Our Clients are visiting
  • Activity: website analysis
  • Desk Check-ins (starbucks project and final project)

    For Next Class

  1. Work on Starbucks project(GD175) or Learning to use CMS(not in GD175)

Friday 11/6

  • Remote Class
  • Website Inital Analysis (collaberative on google slides)
  • Work on Starbucks project(GD175) or Learning to use CMS(not in GD175)
  • Activity:

    For Next Class

Week Thierteen

Monday 11/9

  • Class Activities
  • Review Canvas
  • Group Zoom 10 am

  • NO CLASS
  • Veterans Day Holiday
  • Activity:

    For Next Class

Wednesday 11/11

  • NO Class Veterans Day
  • No Check-in today

  • Presentation how to conduct a heuristic evaluation
  • Share group inital UX research
  • Activity: Make Information Architecture
  • Activity: 6 up 1 up and telephone

    For Next Class

  1. Create and finalize a collaberative information architecture flowchart
  2. Suggestion: Devide up different pages and each person sketch out a 6 different wierframes of one page based on Info Arch
  3. Review: Collaborative Design Activities

Friday 11/113

  • Remote Class
  • Read: how to write usability testing questions Start a collaberative document for paper prototype usibility test questions
  • Finish Information Archetechture. May want to conduct a reverse card sort to varify.
  • Refine UX report based on Huristic Evaluation
  • Share Wierframe ideas, discuss and refine. Have first viersion of wierframes for class on Monday.

    For Next Class

  1. Update UX report
  2. Finalize Infomation Archetecture/ card sort
  3. Compleate first version of Wierframes to share
  4. Start collaberative document for usibility questions

Week Fourteen

Monday 11/16

  • Class Activities
  • Review Canvas
  • Group Zoom 10 am

  • Group recap time
  • Share wierframes
  • Presentation:
  • Activity: work on task lists, starting design guidelines, and refining wierframes
  • Check in on Starbucks project

    For Next Class

Wednesday 11/18

  • Class Activities
  • Review Canvas
  • Check in via Canvas Message or zoom meeting

  • As a group refining wierframes and prepare for low fidelity Usibility test
  • Refine Group Design Guidlines document

    For Next Class

  1. Finalize Design Guide (google Slides or Docs)
  2. Usibility test Wierframes

Friday 11/20

  • Remote Class
  • Usibility test wierframes (Multiple people may want to test)
  • Presentation:
  • Activity: Start Collaberative Process book use project statment as a check list for each section of process book

    For Next Class

  1. Have inital UX report from Usibility test (google Slides or Docs)

Week Fiveteen

Monday 11/23

  • Class Activities
  • Review Canvas
  • Group Zoom 10 am

  • Report from Usibility study should be compleate and shared with group Also Share with Dr. Laura for feed back
  • Start/update Hi-fidelity prototype in Adobe XD based on usibility test
  • Work on Collaberative Process book use project statment as a check list for each section of process book
  • Activity:

    For Next Class

Wednesday 11/25

  • NO CLASS
  • Happy Thanksgiving Break!
  • Activity: hang out with friends and family.

    For Next Class

Friday 11/27

  • NO CLASS
  • Presentation:
  • Activity:

    For Next Class

Week Sixteen

Monday 11/30

  • Class Activities
  • Review Canvas
  • Group Zoom 10 am

  • Group recap time: Consider meeting together in person as a group to work on the website, prototype, process book as a team. Study rooms can be checked out at the library by students for group work.
  • Work on Hi-fidelity prototype in Adobe XD (Finalize Idealy)
  • Get feedback on Prototype from Dr. Laura
  • Send prototypes to clients for feed back
  • prepare for High-fidelity Usibility test
  • Work on Collaberative Process book use project statment as a check list for each section of process book
  • Activity: Start adding content to CMS systems in class

    For Next Class

  1. Usibility test
  2. Continue to add content and update website (CMS system)
  3. Wild Apricot Webinar: How to get the most out of Wild Apricot

Wednesday 12/2

  • Class Activities
  • Review Canvas
  • Check in via Canvas Message or zoom meeting

  • Group Recap Time (10 min)
  • Presentation: Recap of what should be included in the process book
  • Activity: Work time on adding content to the CMS
  • Finalize prototype make any updates based on usibility test
  • Work on Process book

    For Next Class

  1. Continue to add content and update website (CMS system)

Friday 12/4

  • Remote Class
  • Finish Process book
  • Record screen capture of Prototype
  • Continue to add update websites through the CMS

    For Next Class

  1. Website redesign due

Week Seventeen

Monday 12/7

  • Class Activities
  • Review Canvas
  • Group Zoom 10 am

  • Website redesign Due
  • Presentation: Final presentation instructions (Reels)
  • Activity: Crazy 8s for Reels
  • Present the website redesigns

    For Next Class

Wednesday 12/9

  • Last Day of Instruction
  • Class Activities
  • Review Canvas
  • Check in via Canvas Message or zoom meeting

  • Work time on Final Presentation

    For Next Class

  1. Final Wed 18th at 11 am
  2. READ: creating a successful demo reel

Friday

  • Dead Days

    For Next Class

Week Eighteen Finals

Monday 12/14

  • No Class
  • Prepare for your final on Wed

    For Next Class

Wednesday 12/16

  • FINAL 11-1:00
  • Activity: Take Exit assessment
  • Presentation: Show Reels and What was your biggest take away from each project?

    For Next Class

Friday

  • No Class
  • Have a great winter break!
  • Activity: Get Outside and go on an adventure.

    For Next Class