W1D1: A complete design process

Today we’ll do a complete but highly condensed design process. Total time: 65 minutes.

Goal

Today we’ll work in teams to design a digital interface to help students with some aspect of the process of signing up for classes. Each team will:

  1. Choose a specific scenario to focus on.
  2. Brainstorm ideas, sketch interfaces, and create a paper prototype.
  3. Test their design with other teams.

This activity will give you a taste of the design process and feel the importance of testing your designs with real users.

We haven’t studied how to do any of these things yet! And we’re only giving you an hour for a process that might take weeks in a real project! So our goal isn’t to get it right, but to learn from the experience. We’ll unpack the process in more detail in the coming weeks.

Getting Started (10 minutes: 2:45-2:55pm)

  1. Form a team of 3-4 people.
    • Find at least one person you haven’t worked with before.
    • Sit at a table together. Move the tables around so you can see and hear each other.
  2. Introduce yourselves. Share your name, major, why you’re taking this class, and a fun fact about yourself (a hobby, a recent experience, etc.).
  3. Pick a recorder. This person will capture key points and decisions made during the design process.
  4. Pick a facilitator. This person will ensure that all team members have a chance to contribute, the discussion stays on topic, and the team stays on schedule.
  5. Pick a scenario.

We’ll all work on the task of signing up for classes for the following semester. But each team should pick a specific scenario to focus on. Here are some ideas:

  • A prospective student wondering if Calvin has classes that are interesting and valuable to them.
  • A first-semester student who hasn’t used Workday before.
  • A student athlete who has to work around their practice schedule.
  • Section conflicts, prerequisite issues, or other problems that might arise in the process.
  • Planning for a double major or a minor: “will I be able to graduate on time?”

Pick one of these scenarios or come up with your own. Discuss it as a team to add details and constraints based on your own experiences or what you have seen or heard from others.

Write down:

  1. A persona for your scenario. Including a brief description of:
    • Who they are (age, major, anything else relevant to your scenario)
    • What they know (about Calvin, about Workday)
    • Their goals (what they want to accomplish)
  2. What success looks like for your scenario, i.e., the happy path.
  3. What challenges might arise in your scenario.
Glossary: Persona

Persona: A fictional character representing a user of your product. Personas help you keep your design focused on authentic user needs.

In a holistic design process, you would create personas based on user research. You’d interview real people to understand their goals, needs, and challenges. For today, we’ll create personas based on our own experiences and guesses.

Important

Make sure you move to the next section by 2:55pm.

Be Creative (2:55pm-3:20pm)

The tasks in this section will be highly iterative; your team will probably go back and forth between them several times.

Important

Make sure you move to the testing section by 3:20pm!

Ideation and Sketching

  1. Brainstorm ideas for how to help your persona succeed. (Your facilitator might decide to have everyone brainstorm individually first, then share ideas.)
  2. Sketch many possible ideas.
    • Paper and pen, mini whiteboards and the classroom whiteboard are all available.
    • Aim for at least 5 sketches per person. I suggest dividing each paper into 4 or 6 sections and trying to put a different idea in each section.

Storyboarding (optional)

Draw a storyboard of the process of your persona succeding at their task.

  • Focus on what the user sees, thinks, and does. Ignore details of the interface.
  • Use stick figures and simple shapes.
  • You might include them facing a challenge; what aspect of the design helps them overcome it?
  • Aim for 4-8 frames. You can use multiple sheets of paper if you need more space.
Glossary: Storyboard

Storyboard: A sequence of drawings that show how a user interacts with a product. Storyboards help you visualize the user’s experience and identify key interactions.

Paper Prototyping

Design a paper prototype of an interface that could support the interactions you envisioned in your storyboard.

  • Use paper, sticky notes, markers, and tape.
  • Keep it simple. Don’t include every detail. Focus on the key interactions.
Glossary: Paper Prototype

Paper prototype: A simple, low-fidelity version of a user interface. Paper prototypes help you test your design ideas quickly and cheaply.

Test Your Designs (3:20pm)

Pick one or two people from your team to rotate to the next team (clockwise as viewed from above). They will be the testers for the next team’s design. (Re-assign the notetaker job if needed.)

Glossary: Usability Testing

Testing: Observing real users as they interact with your design. Testing helps you understand how well your design meets user needs and identify areas for improvement.

  1. Explain your persona and task to the testers.
  2. Put your prototype in front of them.
  3. Ask them to try to complete the task. Don’t help them. Resist the urge to explain or guide them. Just watch and take notes.

As they “tap” on your prototype, update the interface to reflect their actions. You’ll probably need to quickly sketch some new elements. Don’t worry about making it perfect; just make it good enough that they can continue.

Take notes on what you observe from the testers. Focus on:

  1. In what ways was their experience different from what you expected?
  2. What did they find confusing or difficult?

Team Debrief (3:40pm)

Testers, return to your team. As a team, discuss:

  1. What did you learn from having someone else test your design?
  2. What would you change about your design?

Also consider what if the user had faced some additional challenges, such as a sprained wrist, farsightedness, or limited experience with English. Are there ways you could have improved your design to better serve them?

Wrap-Up (3:45pm-3:50pm)

You may wish to include this experience in your course portfolio. So before you leave, take a few minutes to record:

  1. A brief description of your scenario and persona.
  2. Photos of your storyboard, sketches, and prototypes.
  3. A brief reflection on what you learned from the testing.
  4. Overall reflections on your design process.

We will debrief this activity in the next class. If you have any questions or concerns, please let me know before you leave.

Note

The glossary definitions in this activity were mostly generated by GitHub Copilot.

Whole-Class Debrief (next day)

A successful design process teaches you something about your users, their needs, and what makes a useful and usable design for those needs. So let’s reflect on whether this process helped you learn something about your scenario.

  • What did you learn about your scenario from the “be creative” parts of the process?
    • What aspects of the process helped you learn?
    • What could you have done differently to learn more?
  • What did you learn from testing your design with other teams?
    • How was their experience similar to or different from what you expected?
    • Were your testers “real” users? What difference might that make?
    • How did the level of detail of your prototypes affect what you did and didn’t learn?
  • What aspects of this process would you like to study more? What questions do you have about the design process now?