introduction to prototyping

Research, wireframe, prototype, repeat. This class we will acquaint ourselves with the process of taking a design from the page to the web, ahead of your first assignment ↘

presentation by Claire

introduction to prototyping

Wire-framing and user-flow mapping allows you to test early-stage ideas with potential users and quickly block out different structures for the site.

Analysis (45min)

Each group chooses a site and responds to the following prompts, mapping out its structure, making critiques and offering suggestions.

• How does this interface work?
• What are its users and their goals?
• Map the site and its user flows.
• How does its design influence what behaviours it encourages?
• How could its design change? What effects would this have?

Mapping a User Flow (45min)

0) Who is the ideal user(s) for this site? Who is it not aimed towards?

• use the index cards to craft a user persona
• think about patterns of internet use behavior
• How old are they?
• How did they end up on your site?
• What mood are they in, are they busy, relaxed, at work/school, at home?
• Do they know what they are looking at/for already?
• Be generous to your user: assume that they are open to exploration! After all, this is the homepage of a young designer/creative.

1) User Goals. A series of steps the user takes to achieve a meaningful goal. This could be:

• use the reverse side of the persona cards
• finding a piece of information (an artwork, a project page, contact details)
• having a meaningful experience (a playful interaction, exploring a narrative)
• going on a journey (but what is the mcguffin that takes the user there?)

2) Task Flow. Name the User Flow (“I want to see this designer’s portfolio”, “I want to learn more about this person’s story”). Example Task Flow:

• User goes to homepage
• User clicks “portfolio”
• User selects a portfolio item to view.

3) Wireframe. Using sharpies and paper cutouts, sketch out what the different “views” of the user’s journey to achieve their goal would look like.

• Remember: this is about a low resolution flow of interaction, not the detailed styling of the components.

Critique and Feedback (30min)

2 groups give short presentations to each other on their user flows and give each other feedback about their first impressions.

• Begin by describing how it feels. Is it easy to understand? Is it slow or fast? Clicky or smooth? Emphasising friction or seamlessness?
• Offer suggestions for changes they might make. If you don’t have specific suggestions for improvements, offer alternatives they could try, to see how the experience changes.

Re-iteration (30min)

Each individual returns to the drawing board and re-iterates on the design by their group with a personal twist, retracing the steps of the user flow exercise.

Think expansively: what else could this website do, while the user is pursuing a simple goal (e.g. of viewing your latest project)? Which sides of your work and personality does the website show?

Think spatially: how can the website operate beyond the world of the browser? Could it engage with geography, or time in a creative way?

Think experimentally: you have nothing to lose, so try things out!

Take your wireflow and see how many elements you could remove, and still give the user a meaningful experience.

If your flow emphasises directness and straightforwardness, ask how you could use friction and obfuscation to change the experience.

Your website is about having a conversation with your user. They are ready to hear you, as long as you have something to say. You can be charming, or you can be serious, or you can be a little annoying.

Personal Websites
Taichi Arimoto
Cameron’s World
Kicks Condor
Simon Denny, by Knoth and Renner
Virgil Abloh
John Provencher
Professor Dr. Style
Joeri Woudstra
Scott Langer
E. Roon Kang
Mindy Seu
Marie Otsuka
Laurel Schwulst
Toph Tucker
James Bridle
Christopher Wool

Other Useful Links Personas (Adobe)