Prototyping

  • AD at Humber College
  • Digital Experience Manager,
    Future Skills Centre
  • Assistant Professor, CSU Cal Poly
  • Teaching at Ryerson since 2009
  • Creating websites since 1998

Session #1 Objectives

  • Understand the role of prototyping
  • Implement a rapid design process
  • Use basic visual components to create wireframes
  • Apply Lean Methodology to the design process

What is prototyping?

  • Share an example
  • Is it ever a bad idea?

Session Supplies

  • Paper (3 sheets)
  • Pen/cil
  • Cue cards (optional), 3"x5" ideally
  • A decent web browser

Today's Concept

  • Use this process and adapt it for your concept
  • Initially avoid filtering and get all ideas down
  • Filtering comes later
  • Our concept is...

Should we...

Should we...

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

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

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

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

Draw 2-3 Journeys

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

 

10 minutes ⏰

Steps to Pages

  • List the pages
    • A page could contain several steps ⚠️
  • List content requirements of each page 📰
    • Use a ⭐ for required items
    • Prioritize 2-3 features per page
    • 4+ features, make new page
  • Select a page or two to create for the next section

VUI

Voice User Interface

I/O + Logic

  • Define the user's goals
  • Map out questions
  • Determine responses (decision trees)
  • Consider forgiveness

VUI Prototype

Past examples:

 

Miro Board: https://bit.ly/law-journey

Password: Law-2022

Wireframes

Wireframes

Source: Robert Smith

Getting Started

  • Choose one page or step
  • Use wireframes to
  • 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

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:
    • Miro
    • Figma
    • Visily
  • Using this for tomorrow's session

Session #2 Objectives

  • Develop your brand's voice and image.
  • Create an interactive prototype.
  • Collect feedback through user-testing.
  • Iterate and refine your prototype.

Personas

Personas

  • Not only used for user-types
  • What is the personality of your brand / company
  • Why have a persona?
    • Helps make design decisions
    • Writing using a voice
    • Humanizes your brand

Personas

If it were a person, who would represent it?

  • Maternal leader
  • Support worker
  • Business tycoon
  • Zen master
  • Qualified practitioner

 

5 minutes

Planning the design

Adjectives

  • Helps direct your design
  • Speeds up decision making
     
  • Come up with ~3 adjectives for your app/company
  • Think of how each adjective is visually represented
  • What colours support your adjectives?

 

Example: calm, clear, supportive

Calm / Clear / Supportive

Fast / Precise / Defined

Adjectives

Choose 2-3 adjectives
that represent your startup idea

 

5 minutes

Research

Remix
Reach

What brand(s) already represent your adjectives?

 

An Image search of each term:

Calm // Clear // Supportive

Web Examples

Which organizations represent your org?

 

10 minutes

Mockups

Colour Palette

Icons

  • Simplifies the interface
  • May be familiar or alienating (think of your users)
  • Could be used for your logo (until something better can be designed)

Resources

thenounproject.org

fontawesome.com

icofont.com

fontello.com

Images

  • Use stock photos and illustrations to get going
  • Can get you close to a finished appearance
  • Try to use colour scheme for cohesion
     

Resources

PlaceIMG

Pexels

UnSplash

CompFight

Design Patterns

  • Design pattern = established practice
  • Use existing patterns to speed up design decisions
  • Keeps the UI familiar to the user
     

Resources

Material Design

UI Patterns

styleguides.io

Interface Libraries (UI Kits)

  • For a native or targeted look
  • Use Android or iOS accordingly
  • Lots available for free, software might be required
  • Wireframing software usually includes templates
     

Resources

MarvelInvisionFigmaMoqups

iOS 8 UI Kit

Time to Share

  • Persona selection
  • Design samples
  • Challenges / roadblocks
  • Colour and brand choices

Q&A

sagarwala@ryerson.ca

Law School: Prototyping Workshop

By Am Sagarwala

Law School: Prototyping Workshop

Taking ideas through the design process. Mockups, wireframes, and interactive prototyping.

  • 644