Module 4: Interaction Design, Prototyping, and Usability


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


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)


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.


  1. I think about interactions users might have with a given system and work to make sure that the 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 your client website using tasks you have identified through your other research.

You will then complete a prototype for one or more new visual elements of your client website, based on your previous research and utilizing UXPin’s prototyping tool.

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 Canvas by the following date / time:

  • Homework #4 – 4/5/22 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/22 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/22 by Midnight ET
  • An answer to my design question (see below) on the posts of each of your peers – 4/21/22 by Midnight ET


The primary audience for your module is myself, your project manager or UX lead, but users and other stakeholders of your client 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) 4/5/22 by Midnight Eastern Time >>

Do Homework #4

2) 4/5/22-4/19/22 by Midnight Eastern Time >>

Your first task will in this module will be to conduct a usabilty test of your client 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 client 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.

Take a look at this sample usability testing script to give you some ideas:

Next, accept my invitation from UserTesting, go to, and sign in to your account. UserTesting has generously made this application available to us for free.

Here are some handy guides about how to create usability tests in their system:

Once you launch a test, 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 your client 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 client 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/22 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 your client website

4) 4/21/22 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 team’s client 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