Week 16: Thur, 12-8 

Fun?

Usability Principles for Modern Websites

  • Textbook, pgs. 147 to 190

Final - UX Kit

  • Goal: Create a resource you can reference at the start of any website, web app, or mobile project
  • See template for UX Kit
  • Gather links & tips for each section, e.g. Personas, Color, etc.
  • Requirements:
    • 5 Links for each section
    • 5 Tips for each section

Final Take Home - iPad App Conversion

  1. Download iPad App GUI
  2. Then choose an existing
  4. Convert E-Commerce Template for iPad
  5. Required screens or pages. At least 4, can be more:
    • “Homepage” : Search products listing, categories, promos, etc. 
    • Individual Product : Single page with product detail. 
    • Checkout : Complete order & check out. 
    • Confirmation : Page displaying successful order. 

Week 16: Tue, 12-6

Hour 1

Final Date & Time

  • Tuesday, 12/13 @10am

Final - UX Kit

  • Goal: Create a resource you can reference at the start of any website, web app, or mobile project
  • See template for UX Kit
  • Gather links & tips for each section, e.g. Personas, Color, etc.
  • Requirements:
    • 5 Links for each section
    • 5 Tips for each section

TreeHouse UX Fundamentals Recap

  • Communication
  • Focus
  • Kaizen
  • User Testing

Hour 2

Review CraigsList Mobile App

Final Take Home - iPad App Conversion

  1. Download iPad App GUI
  2. Then choose an existing E-Commerce Template
  3. Convert E-Commerce Template for iPad
  4. Required screens or pages. At least 4, can be more:
    • “Homepage” : Search products listing, categories, promos, etc. 
    • Individual Product : Single page with product detail. 
    • Checkout : Complete order & check out. 
    • Confirmation : Page displaying successful order. 

Week 15: Thur, 12-1 

Hour 1

Google Jobs

Finish Let’s Go Mobile

Hour 2

Finish CraigsList + Mobile

  1. Download Template
  2. Create screens for:
    • Navigation
    • Keyword Searching for Items
    • Keyword Search Results
    • Listing of Categories
    • Listing by Date, after clicking Category link
    • Listing with Content & Images
  3. Export to JPEGs
  4. Save to Tumblr as a “Photo” type post

Week 15: Tue, 11-30

Hour 1

Final

  • Add to our your UX Kit

Craigslist ReDesign (Redux)

Let’s Go Mobile

Hour 2

CraigsList + Mobile

  1. Download Template
  2. Create screens for:
    • Navigation
    • Keyword Searching for Items
    • Keyword Search Results
    • Listing of Categories
    • Listing by Date, after clicking Category link
    • Listing with Content & Images

Week 14: Tue, 11-22

Hour 1

  • Create a dark pattern variation for optimizely
  • Goal: Get user to go to FaceBook - regardless of link
  • Regroup and put together a sample in Photoshop
  • Take elements of your most successful variation
  • Be deceptive like He Who Shall Not Be Named

Hour 2

Start Final

Goal: Create resource for future projects. Create custom UX Kit with resources, links, & references.

Week 13: Thur, 11-17 

Hour 1

Cont. Dark Patterns

FaceBook Exercise

  • Intentionally add Dark Patterns & bad UI to FaceBook
  • What features of FaceBook do we “cast a spell on”?
  • Smashing FaceBook GUI
  1. Review FaceBook GUI Photoshop file
  2. Find, & name dark pattern from DarkPatterns.org
  3. Identify level of Good to Bad. Reference “Honest” to “Dark” on scale.
  4. Apply to GUI PSD
  5. Save as JPEG. Storyboard with multiple if necessary.
  6. Post to Tumblr.

    Hour 2

    1. Optimizely Summary

    • Create a written summary of results
    • Did it meet your expectations?
    • What were the surprises?
    • Which variation is going to be the final?
    • What would you change?

    2. A Better NIC 404

    • Create one 404 page for each scenarios above
    • PSD file 1024 x 768 pixels - Download Template
    • The content for each scenario will be DIFFERENT
    • The “error message” for each scenario will be different
    • Explain how they got here, & it’s ok.
    • Give the user options, e.g. search, contact form, specific links
    • Feel free to change layout, add elements, take away elements

    3. Create a dark pattern variation for optimizely

    • Goal: Get user to go to FaceBook - regardless of link
    • Regroup and put together a sample in Photoshop
    • Take elements of your most successful variation
    • Be deceptive like He Who Shall Not Be Named

    4. Twitter Redesign

    • Objective 1: Redesign using message threading
    • Objective 2: Place small user profile “widget” on homepage. What information should be included or excluded.
    • Objective 3: Redesign interface to add new images. What would it look like? Where are the button(s)? How would it work? 

    Week 13: Tue, 11-15

    Hour 1

    Dark Patterns Presentation

    Hour 2

    Checkup. Due to DropBox by End of Class on Thur. 11-17

    1. Optimizely Summary

    • Create a written summary of results
    • Did it meet your expectations?
    • What were the surprises?
    • Which variation is going to be the final?
    • What would you change?

    2. A Better NIC 404

    • Create one 404 page for each scenarios above
    • PSD file 1024 x 768 pixels - Download Template
    • The content for each scenario will be DIFFERENT
    • The “error message” for each scenario will be different
    • Explain how they got here, & it’s ok.
    • Give the user options, e.g. search, contact form, specific links
    • Feel free to change layout, add elements, take away elements

    3. Create a dark pattern variation for optimizely

    • Goal: Get user to go to FaceBook - regardless of link
    • Regroup and put together a sample in Photoshop
    • Take elements of your most successful variation
    • Be deceptive like He Who Shall Not Be Named

    4. Twitter Redesign

    • Objective 1: Redesign using message threading
    • Objective 2: Place small user profile “widget” on homepage. What information should be included or excluded.
    • Objective 3: Redesign interface to add new images. What would it look like? Where are the button(s)? How would it work? 

      Week 12: Thur, 11-10

      Hour 1

      Optimizely Summary

      • Create a written summary of results
      • Did it meet your expectations?
      • What were the surprises?
      • Which variation is going to be the final?
      • What would you change?

      Review Presentation

      Hour 2

      Twitter Exercise

      Re-Design of Twitter

      1. Create “Week 12” folder on DropBox
      2. Download Files (Smashing Magazine)
      3. Make 3 copies. Save each as “Objective-1.psd”, “Objective-2.psd”, etc.
      4. Redesign using existing layers
      5. See Nick Finck’s slide #71 for objectives:
        • Objective 1: Redesign using message threading
        • Objective 2: Place small user profile “widget” on homepage. What information should be included or excluded.
        • Objective 3: Redesign interface to add new images. What would it look like? Where are the button(s)? How would it work? 
      6. “Save for Web” as “Objective-1.jpg”,”Objective-2.jpg”, etc.
      7. Upload to DropBox.  

      Week 12: Tue, 11-8

      In my absence, please:

      Check Up on Optimizely Tests

      • Surprised by results?
      • Did results confirm assumptions?
      • What % of testers contacted visited website?
      • Does your team need to contact testers?

      UX Experience Best Practice

      Week 11: Thur, 12-3

      Hour 1

      Defensive Design

      Hour 2

      Launch Optimizely Test

      • [ ] Control Test (original)
      • [ ] Variation 1 
      • [ ] Variation 2
      • [ ] Variation 3 (optional)
      • [ ] Persona Completed
      • [ ] Send email to testers with: “Visit this site. Assume you’re a prospective student. What interests you most?”