Concept Framework: Prototyping

Associate Dean of Interaction Design,
Humber College
Professor, designer, developer
Creating websites since 1998

Session Objectives

Define website and app requirements
Design a content flow
Create wireframes to structure content

Session Supplies

Paper (5-10 sheets)
Pencil
Cue cards (optional), 3"x5" ideally
A modern web browser

Come up with as many ways as possible to use a...

Should we...

create an application?
ask people to change how they do things?
develop this without a partner/client/mentor?
reinvent a workflow?
choose only one approach?
consider under-served and minoritized peoples?
find out why would anyone not use/need this?

Our Goal

To create an event app

What kind?
Conferences, concerts, experiences?

User Needs

List as many things as you can. For example:

Purchase tickets
Event itinerary
Travel details
...

Categorize Needs

Organize needs by relationships:

Ticketing + Purchase + Receipt

Location + Wayfinding + Transport

Help + Contact + Live Chat

Categories may form our navigation

Journey Map

A flowchart depicting the steps a user must go through to complete their goal.

Onboarding process
Storyboard a particular user type
New vs returning user
Desktop vs mobile

Three Examples

Let's hear from entrepreneurs (you) 🎤

Briefly state your idea (elevator pitch)
What do your users need to achieve?
Where would they start?
How could they get there?

Journey Map: Login

🔗 Login link (all pages)

📝 Login form

😬 Forgot password

🔗 Email with link

🔑 Reset password

✅ Login completed

Journey Map

Create a list of starting-points, goals, and completion steps:

Starting-points: Where might they begin
Goals: The user's intention
Steps: Actions that support goals

⏰ 5 minutes ⏰

Wireframes

Source: Robert Smith

Convert Steps to Pages

A page could contain several steps (avoid this)
Select a page to create for the next section
List the features the page
- Use a ⭐ for required items
- Prioritize 2-3 features per page
- 4+ features, make new page

Let's do an example!

Getting Started

Choose one page or step
What content and features belong?
Limit the number of features per step
(split big steps into a few smaller ones)
- Chat screen
- Login form
- Create claim (many sub steps?)
- Payout
Choose 2-3 steps to wireframe

Wireframing Benefits

Shows just enough to make sense
Extremely fast to generate
Nothing special needed
Allows for rapid iteration
Helps reveal what supporting content is needed

Wireframe
Sketching

Create 3 Wireframes

Based on a journey, select 3 steps
Create a "view" or page for each step
Imagine what supporting content is needed
Fake it using placeholder blocks for now

Free templates: sketchize.com

Homework

Create wireframes for 1-3 journeys
Must be created using design software or neatly drawn:
- Adobe XD
- Miro
- Figma
Using this for tomorrow's session

Hands-on

Journey Map:
http://bit.ly/liz-2021

Password: rulaw2021

Create 2-3 Journeys

Using a starting-point and goals
Write down all major steps to achieve the goal
Are there several ways to complete a single goal? What are they and include those steps also.

⏰ 10 minutes ⏰