Module 4: Interaction Design, Prototyping, and Usability

Purpose

After doing this assignment, you should be able to:

  • Explain what interaction design is and define its scope for stakeholders and clients
  • Create a working prototype for a design (or redesign) of a product or service, based on previous UX research
  • Conduct a usability test of a design and analyze its findings to product design decisions
  • Create a comprehensive UX Strategy Kit that documents all research conducted for an application

Technologies

On this module, you are encouraged to use any technologies  available to you, including word processors, web browsers, and online applications (e-mail, chat, blogging, productivity, workflow, etc.). We will cover some of these technologies as we go along, but you can use any that you are proficient with or want to experiment with on this module.

You will definitely need access to the following technologies to complete this module:

  1. A working and recently-updated Internet browser (Google Chrome, Firefox, or Safari are recommended)
  2. A word-processing application that allows for the production of documents in standard formats (.doc, .docx, .rtf, or .pdf; Microsoft Word, Open Office’s Writer, or Apple’s Pages are recommended)
  3. A reliable email client (Outlook, Apple’s Mail, or Gmail are recommended)
  4. http://www.uxpin.com/
  5. https://www.usertesting.com/

Situation

Once you have a good understanding of the needs of specific users, it’s time to start incorporating those needs into your design. There are a zillion ways to do this. I like to do it in three ways: interaction design, prototyping, and visual design.

Basically:

  1. I think about interactions users might have with a given system and work to make sure that system accommodates those interactions.
  2. I think about the stories that users bring with them to a system, and how those stories should be reflected by that system.
  3. I put something together to show stakeholders, some kind of prototype, process model, or other deliverable, to help them understand what a new system, or redesign of an existing system, might look like.
  4. I test the prototype or existing website (or both) to determine if it meets the needs of the stakeholders or not.

Your assignment in this module will be to do a usability test of the NCCA using tasks you have identified through your other research.

You will then complete a prototype for one or more new visual elements of the NCCA Coastal Atlas, based on your previous research and utilizing UXPin’s library of common user interface (UI) elements.

You will then assemble all findings from the course into a UX Strategy Kit, or comprehensive explanation of a user experience for a client. This document will serve as a rough draft of your final project for the class.

You will continue in your current teams for this module.

Deliverables You Must Produce for this Project

The following must be posted to Blackboard by the following date / time:

  • Homework #4 – 3/29/18 by Midnight ET
  • An individual Cover Letter (including how you contributed to your team’s documents) and copies of your team’s UX Strategy Kit – 4/19/18 by Midnight ET

The following must be posted to this course website by the following date / time:

  • A copy of your team’s UX Strategy Kit – 4/19/18 by Midnight ET
  • An answer to my design question (see below) on the posts of each of your peers – 4/24/18 by Midnight ET

Audiences

The primary audience for your module is myself, your project manager or UX lead, but users and other stakeholders of the NCCA  website are an important audience to consider as well. I will of course also be your evaluator, and will assess your documents based on the grading criteria for this module.

To Complete This Project (Workflow)

1) 3/29/18 by Midnight Eastern Time >>

Do Homework #4

2) 3/29/18-4/19/18 by Midnight Eastern Time >>

Your first task will in this module will be to conduct a usabilty test of the NCCA website.

As with most forms of research, the best way to understand how a website or mobile application performs is by observing real people using it. This is called usability testing.

To begin, brainstorm 7-10 tasks you think users should be able to complete via the NCCA website. Below are some examples to help you:

  1. Find a specific piece of information.
  2. Register for something.
  3. Add something to your shopping cart.
  4. Search for something.
  5. Navigate to a specific location.

Feel free to use any of the tasks I identified in my own usability testing script: http://www.guiseppegetto.com/engl7766ux/wp-content/uploads/2012/02/NC_Coastal_Atlas_Usability_Script.pdf

Next go to https://www.usertesting.com/ and sign up for a free account. UserTesting has generously made this application available to us for free.

Our gift code is: UX-CG1. Here are instructions on how to use the application: UserTesting Instructions.PDF

You’ll get your results in about 24 hours.

Finally, analyze the data from your tests and draft your Usability Report. The following questions will help you:

  • Were there particular tasks that users failed to complete entirely?
  • Were there particular tasks that were clearly more challenging than others?
  • Were there particular tasks that users took longer to complete than others?
  • From the data collected, can you tell why these tasks had lower complete rates, were more challenging, or took longer than others?
  • Were there closely-related themes that arose again and again in what participants said or did during the test?
  • Where there important terms, images, problems, or issues that you noticed again and again?
  • Were there a lot of familiar plot points in the overall story you heard or saw?
  • What was distinct and different about each user (what didn’t match up with other users)?

Your Usability Report should include the following sections:

  1. Executive Summary: In general, what did you find, and why should people care about what you found? What do your findings say about the website or mobile app you tested? What do they not say? What needs further research?
  2. Findings: Give a concise but complete breakdown of all the patterns you observed in your data. Screenshots of the application are always a good thing to show the client the exact problems!
  3. Design Recommendations: What do these patterns indicate are logical next steps for improving the website or mobile app you tested? What should be the client consider doing, based on these findings?

Your second task in this module will be to return to the data you’ve collected thus far, any and all of it.

Then, use this data to design (or redesign) some elements for the NCCA website.

To do so, make us of UXPin:

  1. Log in to the app.
  2. Click on the plus sign.
  3. Click Create Prototype.
  4. Drag and drop stuff from their library on the lefthand side.
  5. Import screenshots of the existing NCCA website.

This is trickier than it sounds, so here are my top pitfalls for designing prototypes:

  1. Don’t make something that won’t work in real life. This may sound like a given, but if your prototype isn’t possible given current technologies, it’s not a prototype: it’s a dream. What is possible with current technologies? That’s something you have to guestimate. Just be a bit more conservative than you think you need to be.
  2. Using current design aesthetics. Having a hard time coming up with your prototype? Go to your favorite websites. Just don’t pick your friend’s blog ;-). The top websites (Apple, Mashable, Google, Twitter, etc.) are always the people to follow.
  3. Think about what the intended (re)design needs to do. Don’t reinvent the wheel. Prototypes should solve problems. Maybe only one problem you’ve identified.
  4. Think about what your client is actually asking for. This will be tricky for the purposes of this class, but client preferences matter. If your prototype takes the application in a direction that your client hates, even if it is the best thing for users, in your opinion, your prototype will never become a reality.
  5. Think about adding affordances, NOT features. Features are what the current application does. Affordances are opportunities and limitations for users. As a UX designer, you identify the latter, NOT the former (that’s the developer’s job).
  6. Annotations are your friend. A picture may be worth a thousand words, but so is a thousand words: if your client has no idea why you’re recommending something, they will reject it. Arrows are good. As are BRIEF descriptions of specific elements. Just don’t write an essay along with your prototype… he says to the English graduate students ;-).

3) 4/19/18 by Midnight ET >>

Assemble your UX Strategy Kit and post it to:

Your UX Strategy Kit should contain the following elements:

  • An Executive Summary: explain the goals of your research, what methods you used, and summarize the findings. Be sure to list all the design recommendations you have amassed throughout the course. Basically, this executive summary should be like the thesis statement for all the other deliverables contained in your strategy kit.
  • A Persona
  • Findings Report from a card sort
  • Findings Report from a usability test
  • Findings Report from a content audit
  • A Prototype redesign of the NCCA

4) 4/24/18 by Midnight ET >>

Post an answer to the following design question as a comment on the posts of each team’s UX Strategy Kit on this course website.

Each module, I will ask you a design question, which you must post a response to as a comment on the posts of each of your peers. Your design question for this module is the following:

  • What do you think about this team’s UX Strategy Kit and what it recommends regarding a potential redesign of the NCCA website? Is it clear what design recommendations they are making and why? Has the team documented all their findings sufficiently using concrete examples? Has the team exemplified all recommendations by referencing their research?

Grading Criteria

Can be found here: grading criteria for this module