Spring 2017

Advanced Interaction Design

COGS 160

A4: Lead User Innovation

Reading Material: Understanding Lead Users. You can also watch this video.

A4.1

Tuesday 5/16

Brainstorm domains and settings where you could find a lead user and write down at least ten ideas. Select one of those domains, and find a lead user. Observe and interview them.

Submit a PDF that documents their lead-user innovation with pictures and 2 paragraphs of text.

Rubric

  1. At least 10 distinct lead user domains is listed.
  2. PDF of lead user documentation is submitted for one of the 10 domains.
  3. The documentation describes the lead user found and observed.
  4. The lead user is a real person and not an idealized persona.
  5. The documentation describes a substantial problem problem or gap in design that the lead user encountered.
  6. The problem or gap in design described is real and fits within the chosen domain.
  7. The lead user innovation is clearly described.
  8. The lead user innovation is showcased through pictures.
  9. The lead user innovation fits within the domain chosen.
  10. The lead user innovation clearly solves the problem from 5 and adds value to the domain.


A4.2

Thursday 5/18

Create a low-fidelity design prototype that draws from your lead user innovation. This could be sketches of a user interface, a cardboard mock-up, a video or a skit to capture the experience - anything that expresses your work.

Be really attentive to the task or problem you are trying to solve - make sure it is real.

As with all assignments, you are free to change your domain and lead user from A4.1 if you feel the need to.

Submit a pdf containing:

Rubric

  1. A picture or video of a low-fidelity prototype was submitted.
  2. A clear description of the lead user innovation/problem is present.
  3. The lead user innovation/problem described is real and valid in the real world.
  4. A clear description of the design/solution is present.
  5. The design is clearly inspired from the lead user innovation/problem described.
  6. A clear description of a task the design helps accomplish is present.
  7. The description of the task is not vague and communicates a specific goal.
  8. The task described is real and valid in the real world.
  9. The prototype has enough detail to understand the interactions involved.
  10. The pictures/video captures how the design accomplishes the task.


A4.3

Tuesday 5/23

Build on your prototypes from A4.2 and create a 1-2 minute video that captures a real scenario that shows your design in use. Your design must draw from the lead user innovation you observed.

Your lead user must be a real person. Also be sure to capture real content and a concrete scenario in your video.

As with all assignments, you are free to change your domain and lead user from if you feel the need to.

Submit:

Rubric

  1. A video is submitted and is not more than 2 minutes long.
  2. The lead user is a real person - first and last name is submitted.
  3. The information provided on the lead user is relevant to the design and describes a lead user innovation/problem.
  4. A description of the scenario the video captures is present is not vague and communicates the user goal.
  5. The contents/details of the scenario captured in the video are valid in the real world.
  6. The video captures a low-fidelity prototype used in the scenario.
  7. The prototype is an artifact created by the student and shows at least one user interface screen.
  8. The prototype design is clearly inspired from the lead user innovation/problem described.
  9. The prototype/design clearly allows for the task the scenario captures to be accomplished.
  10. The prototype has enough detail to understand the interactions involved.


A4.4

Thursday 5/25

Build on your designs from A4.3 and create pixel prototypes. Your prototypes should not use color and should reflect the actual application - this means that it should look like the final design will.

Think really hard about sizes of elements, fonts, layouts and the alignment of the design. Also think about and flesh out different perspectives of the UI - think about the interactions for all the users of the application. For example, for an event planning application you should think of (and show) views and interactions for both the event planner and the attendees.

Be careful not to fallback on configuration capabilities - configuration is not allowed for all of A4. Make design decisions that ensures good defaults and give your user as little choice as possible.

Submit:

Rubric

  1. A video walkthrough of the design is submitted.
  2. A specific domain the design falls in is described.
  3. A concrete task the design helps accomplish is described.
  4. The task described clearly fits within the domain,
  5. The video showcases pixel prototypes that allows the user to accomplish the task described.
  6. The pixel prototypes include all perspectives of the UI (includes interactions for all users of the system)
  7. The prototypes do not use any color.
  8. The prototype is usable and optimized for the form factor and interaction methods picked.
  9. The prototype has good visual hierarchy - Large blocks should contain the information most valuable to a user's task.
  10. The prototype has a clear grid from top to bottom - there are no awkward line-breaks or uneven gaps between blocks. Whitespace used give elements room to breathe and should not be so large that connected elements get lost.


A4.5

Tuesday 5/30

Submit pixel prototypes for your lead user inspired design - focus on the layout of all the elements on the screen.

Work to reduce clutter and avoid chart-junk. Use a grid to help align the elements and ensure the whitespaces work to convey grouping. You can also use colors in this assignment. Both the color scheme and the layout must be the same as your final application/finished product. Colors, element sizes, and typefaces should work together - all of these should reflect variation in the information structure and importance.

Also, focus on and describe the task/problem your design helps accomplish/solve. Be very specific - for example, instead of saying "X finds it hard to find good shoes", say "X has wide feet and finds it hard to find well-fitting running shoes for his daily outdoor runs".

Just like in A4.4, you should think about all the users of your application/product and flesh out the different perspectives of your user interface.

Make sure that your designs draw from a lead user - your lead user observations should provide insight on either a lead user solution or a hindrance(the problem they face) or both.

Come into class on 5/30 with a printout of your prototypes including a key screen with a grid laid over it. All of the screens must have real content.

Submit:

This assignment must be done in pairs


A4.6

Thursday 6/1

Build on and submit pixel prototypes for your lead user inspired design.

Most projects have great starting points and interesting tasks. We have however noticed the quality of work on visual design is lacking and will continue to focus on it for this assignment.

Work hard to reduce clutter and avoid chart-junk. Use a grid to help align the elements - grids provide a sense of order to your layout, and also provide users with a clear structural reference to fall back on. Ensure the whitespaces work to convey grouping.

You can also use colors in this assignment. Both the color scheme and the layout must be the same as your final application/finished product. Colors, element sizes, and typefaces should work together - all of these should reflect variation in the information structure and importance.

Just like in A4.4 and A4.5, you should think about all the users of your application/product and flesh out the different perspectives of your user interface. Also, think through the on-page interactions your application affords - there should be little-to-no input for the most common tasks.

Also, focus on and describe the task/problem your design helps accomplish/solve. Be very specific - for example, instead of saying "X finds it hard to find good shoes", say "X has wide feet and finds it hard to find well-fitting running shoes for his daily outdoor runs".

Make sure that your designs draw from a lead user - your lead user observations should provide insight on either a lead user solution or a hindrance(the problem they face) or both.

Come into class on 6/1 with a printout of your prototypes including a key screen with a grid laid over it. All of the screens must have real content.

Submit:

This assignment must be done in pairs

Rubric

  1. A description of the lead user and the task/problem the design helps accomplish/solve is present.
  2. The description of the lead user focuses on either a lead user solution or a hindrance(the problem they face) or both.
  3. The description of the task is specific(concrete examples) and valid in the real world.
  4. A video/pdf capturing how the design helps accomplish a task is submitted. A concrete setting (with specific details that help accomplish the specific task) is captured/obvious.
  5. The video/pdf shows the pixel prototypes of the user interface designed.
  6. The pixel prototypes allow the most common tasks the interface is designed for to be accomplished with little-to-no input.
  7. The pixel prototype includes all perspectives of the UI (includes interactions for all users of the system).
  8. The color scheme of the pixel prototype is appropriate for the task/problem the design helps accomplish/solve (for example, applications meant to work outdoors/in sunlight uses contrast to make information more readable).
  9. The pixel prototype has good visual hierarchy - Large blocks should contain the information most valuable to a user's task.
  10. The pixel prototype has a clear grid from top to bottom - there are no awkward line-breaks or uneven gaps between blocks. Whitespaces convey grouping and give elements room to breathe and should not be so large that connected elements get lost.


A4.7

Tuesday 6/6

Build on your designs from A4.6 and submit pixel prototypes for your lead user design.

- Every pixel on your prototype must be optimal - really think through the placement of the elements on the screen and make sure to use the screen space wisely.

- Aim for clean, non-cluttered interfaces that have a sense of order. Use a grid to help align the elements and ensure the whitespaces work to convey grouping.

- The color scheme and the layout must be the same as your final application/finished product. Colors, element sizes, and typefaces should work together: all of these should reflect variation in the information structure and importance.

Watch these videos to better understand:

Just like in previous assignments, you should think about all the users of your application/product and flesh out the different perspectives of your user interface. Also, think through the on-page interactions your application affords - there should be little-to-no input for the most common tasks.

Also, focus on and describe the task/problem your design helps accomplish/solve. Be very specific - for example, instead of saying "X finds it hard to find good shoes", say "X has wide feet and finds it hard to find well-fitting running shoes for his daily outdoor runs".

Make sure that your designs draw from a lead user - your lead user observations should provide insight on either a lead user solution or a hindrance(the problem they face) or both.

Come into class on 6/6 with a printout of your prototypes. All of the screens must have real content.

Submit:

This assignment must be done in pairs

Rubric

  1. The description of the lead user focuses on either a lead user solution or a hindrance(the problem they face) or both.
  2. The description of the task(s) is specific(concrete examples) and valid in the real world.
  3. The video captures how the design would handle a valid common case in a real setting and shows pixel prototypes of the user interface.
  4. The video captures how the design would handle a valid exception case in a real setting and shows pixel prototypes of the user interface.
  5. The pixel prototype handles the common case with little-to-no input from the user.
  6. The pixel prototype includes all perspectives of the UI (includes interactions for all users of the system).
  7. The color scheme of the pixel prototype is appropriate for the task/problem the design helps accomplish/solve (for example, applications meant to work outdoors/in sunlight uses contrast to make information more readable).
  8. The pixel prototype has good visual hierarchy - Large blocks should contain the information most valuable to a user's task.
  9. The pixel prototype uses screen space wisely and has a clear grid from top to bottom - there are no awkward line-breaks or uneven gaps between blocks. Whitespaces convey grouping and give elements room to breathe and should not be so large that connected elements get lost.
  10. All the content (photos, labels and any other details) in the pixel prototypes are real (no placeholders).


A4.8 - Final Assignment

Thursday 6/8

For your final presentation on Thursday (6/8) - Submit a pdf of your pixel prototype and a link to a youtube video by 10:00 am. (Submit the link below)

The video must be a maximum of 3.5 minutes long. The time limit will be strictly enforced.

There will be 5 groups of 3 presentations each, with feedback from the jurors after each group has presented.


Rubric

  1. A video has been submitted and is not more than 3.5 minutes long.
  2. A lead user is presented and is a real, specific person.
  3. The design draws from a lead user innovation or problem and the video explains the challenges/insight.
  4. The video/presentation conveys the value of the solution/design and walks through a concrete scenario with the main features, or the most common tasks.
  5. Several screens or audio of the user interface is shown and linked to the motivation behind the scenario.
  6. The video/presentation conveys how the solution is unique and why it isn't met elsewhere.
  7. The video/presentation captures at least one "uh-oh moment". (Something unexpected/unplanned that the solution helps mitigate)
  8. The video is visually attractive and creative.
  9. Narration, if any, is live. The video has no voice over.
  10. The speakers are audible and the narration is well rehearsed.
  11. The design handles the common case with little-to-no input from the user.
  12. A pdf of the pixel prototype of the user interface is submitted.
  13. The pixel prototype is clean, clutter-free and visually appealing.
  14. All the content (photos, labels and any other details) in the pixel prototypes are real (no placeholders).
  15. The pixel prototype has good visual hierarchy - Large blocks should contain the information most valuable to a user's task.
  16. The pixel prototype uses strong visual cues that makes the user interface intuitive without the need for additional instructions/explanations.
  17. The type on the pixel prototype is readable and legible.
  18. The pixel prototype uses screen space wisely and has a clear grid from top to bottom.
  19. There are no awkward line-breaks or uneven gaps between blocks. Whitespaces convey grouping and give elements room to breathe and should not be so large that connected elements get lost.
  20. The color scheme of the pixel prototype is appropriate for the task/problem the design helps accomplish/solve (for example, applications meant to work outdoors/in sunlight uses contrast to make information more readable).