PROTOTYPING TECHNOLOGY

CHECK IN
Energizer?
HOW WAS LAST WEEK?
WEEK 2
Monday: Intro to tools and tech
Tuesday: UI Workshop
Wednesday: Workshop with Marie
Thursday: Individual work on your digital prototype
Friday: test your results, document the outcomes. Feedback
each other. Submit documentation

Bring Laptops!
Are we designing the right thing?
Low Fi Methods

Are we designing the thing right?

High Fi Methods
Low Fi Methods
• Rapid idea testing and definition
• Communicating the core concepts
• No focus on polish or make believe
• When building the underlying flow,
structure and architecture
High Fi Methods
• Idea validation
• Communicating the look and feel
• Strong make believe
• When building the finish and nailing
the details and interactions
 Concept Mapping

Space & Service Testing

Low Fi Prototype

Digital High Fi Prototype

MACRO VS MICRO
ASPECTS
Macro
User Journey, context, user motivations, user groups
etc.

Micro
Interactions, UI, content architecture, accessibility etc.
Are we designing the right thing?
Macro

Are we designing the thing right?

Micro
Wireframes

User Flow

Mock Ups

Prototype
BREAK
Wireframes

User Flow

Mock Ups

Prototype
TOOLS
Sketch
Figma
Adobe XD UI
(Keynote) 

Framer
Principle Flows &
InVision Prototypes
Arduino
Physical & Code
P5
Processing

Unity
TouchDesigner
After Effects
3D & Generative
MAX
Blender
TOOLS
* ** *** ****
Sketch Figma Framer Unity
Adobe XD Arduino P5 TouchDesigner
Principle Processing MAX
InVision After Effects Blender

Keynote
VOICE UI
Adobe XD

Smartphone
VR
Google Cardboard

Samsung

Unity
IOT
Arduino / Raspberry Pi

Sensors

Code
WHAT IS IT YOU
WANT TO TEST?
Test/build the smallest possible thing
THE SCRIPT
User Story: “As Persona X, how can I achieve Y?”

WHY over WHAT

Example
User goal: Browse product offering and purchase an item
Poor task: Purchase a pair of orange Nike running shoes
Better task: Buy a pair of shoes for less than 400 sek
HORIZONTAL VS VERTICAL
SYSTEM STRUCTURE
Lots of features,
little depth

One feature,
deep flow
HAPPY PATH
FEATURE MAP
WIREFRAMES
Feature Hierarchy

Content Hierarchy

UI Hierarchy
BREAK
WIREFRAMES
DON’T USE
colors & images

DO USE
icons, shapes, shadows,
size, outlines
STORYTOURIST
APPLICATION WIREFRAMES

StoryTourist StoryTourist Sherlock and the... Sherlock and the... StoryTourist

BROWSE ALL CATEGORIES MY STORIES See all

Home Science-Fiction Crime

Sherlock Holmes London Downloaded
and the story of
the very long Sherlock Holmes and the
MY STORIES See all
title story of the very long title
- London, England Genre - 2h - 1.3km - 5 languages

Congratulations,
London Downloaded
250 Kr

Sherlock Holmes and the you finished the tour! Story details Launch Tour

story of the very long title

Genre - 2h - 1.3km - 5 languages Sherlock Holmes had opened his mouth to
reply, when the door flew open, and ALSO IN PARIS See all
Summary Peterson, the commissionaire, rushed into
Story details Launch Tour Sherlock Holmes had opened his mouth to the apartment with flushed cheeks and the
London Free
reply, when the door flew open, and face of a man who is dazed with
Peterson, the commissionaire, rushed into astonishment. Sherlock Holmes and the
the apartment with flushed cheeks and the
NEAR YOU See all
face of a man who is dazed with 250m story of the very long title
Till next point Genre - 2h - 1.3km - 5 languages
astonishment.
London Free

Sherlock Holmes and the Story details Downloading...

This tour is available in
story of the very long title English - German - French - Spanish - Latin - Swedish -
Genre - 2h - 1.3km - 5 languages Danish - Norwegian
Additional information RELATED TO SHERLOCK… See all
Suitable for all ages - Accessible
Story details Downloading...
London Bought
2:58 5:00

Tour details
Story Credits
Sherlock Holmes and the
story of the very long title
Author Genre - 2h - 1.3km - 5 languages
Arthur Conan Doyle

Story details Download Tour

Narrator
Start End
Arthur Conan Doyle
221B, Baker Street 221B, Baker Street
Guide PLAN YOUR NEXT TRIP See all
Arthur Conan Doyle
Science-Fiction 2 hours 5.6 kilometers London 250kr

Back to dashboard Sherlock Holmes and the

Listen to Audio Sample
story of the very long title
Genre - 2h - 1.3km - 5 languages

Buy Tour Story details Buy Tour

Hide suggestions based on last tour

 STORYTOURIST STORY ONBOARDING

UPDATED FLOW MAP Screen helping the Story Tourist get

to the first location point if they are
out of bound:

- map with the location of the

user and the first point
- distance from the first point
- list of instructions on how to
get to this first point
- “door to Narnia” entrance to
the story once the first point is
reached

Actions

- exit tour

Call to action
- start tour at the first location
point

StoryTourist StoryTourist Sherlock and the... Sherlock and the... StoryTourist

APP ONBOARDING LOGIN BROWSE ALL CATEGORIES

TOUR CONTINUES MY STORIES See all

Home Science-Fiction Crime

Sherlock Holmes London Downloaded
and the story of
The story tourist is presented with a The Story Tourist can fill their The Story Tourist is presented with Sherlock Holmes and the
carrousel of 3-5 slides describing information in: the very long a map; AR content and text:
the values of the application (what
MY STORIES See all
title story of the very long title
it is, how it works, what they can do Actions - London, England
- main story points Genre - 2h - 1.3km - 5 languages
with it, etc): - extra content
Congratulations,
London Downloaded
250 Kr
- username/email - location of user
Actions - password Sherlock Holmes and the - gps Story details Launch Tour
- did you forget your password? - distance you finished the tour!
- slide forward/backward story of the very long title - volume
between carrousel slides Call to action Genre - 2h - 1.3km - 5 languages - 2D/3D Sherlock Holmes had opened his mouth to
- log in reply, when the door flew open, and ALSO IN PARIS See all
- log in Summary Actions Peterson, the commissionaire, rushed into
Call to action Story details Launch Tour Sherlock Holmes had opened his mouth to the apartment with flushed cheeks and the
- geolocalise me London Free
- create an account reply, when the door flew open, and - skip forward/backward face of a man who is dazed with
Peterson, the commissionaire, rushed into - take a picture astonishment. Sherlock Holmes and the
the apartment with flushed cheeks and the - access story settings
NEAR YOU See all
face of a man who is dazed with 250m - exit tour story of the very long title
astonishment.
Till next point - read text Genre - 2h - 1.3km - 5 languages
London Free
Call to action
Sherlock Holmes and the Story details Downloading...
This tour is available in - play/pause story
story of the very long title English - German - French - Spanish - Latin - Swedish -
Genre - 2h - 1.3km - 5 languages Danish - Norwegian
Additional information RELATED TO SHERLOCK… See all
Suitable for all ages - Accessible
Story details Downloading...
London Bought
2:58 5:00
Tour details
Story Credits
Sherlock Holmes and the
story of the very long title
Author Genre - 2h - 1.3km - 5 languages
Arthur Conan Doyle
Story details Download Tour
Narrator
Start End
Arthur Conan Doyle
221B, Baker Street 221B, Baker Street
Guide PLAN YOUR NEXT TRIP See all
Arthur Conan Doyle
ACCOUNT SETTINGS STORY
PREFERENCES
Science-Fiction 2 hours 5.6 kilometers London 250kr

Back to dashboard Sherlock Holmes and the

The Story Tourist can access their Listen to Audio Sample Screen listing the settings for a story of the very long title
profile as well as the app settings story:
directly from this screen. Genre - 2h - 1.3km - 5 languages
Actions
The settings slide in from the right.
Buy Tour - change story language Story details Buy Tour
Actions - change volume

- edit profile Call to action

- change interface language Hide suggestions based on last tour
- enable vibration - save story preferences
- enable audio
- enable geolocation
- enable contextual help
- access legal terms
- go back to previous screen

Call to action

- save new settings

FLOW MAPS
PLACEHOLDERS
WORK BRIEF A
Pick up the idea from last week, or find a new one.

Identify what you want to test / build. Choose one feature to build a
vertical structure.

Write a testing script.

Create a happy path version of your solution.

WORK BRIEF B
For your happy path solution:

1. Create a wireframe flowchart

2. Test your happy path wireframe prototype
3. Incorporate the feedback and create a happy path including placeholders

4. Create mock ups for your idea and link them into an interactive prototype
5. Test your final mock up based prototype
WORK BRIEF C
Create a simple VUI prototype, using your happy path and your
wireframes.
 PRACTICAL STEPS

(DIGITAL VISUAL UI)
SET UP
Make an asset library
Use a grid
Use real text
BE CONSISTENT
No typos
No changing names or users

Be relevant (pick relevant examples - if it is a travel

app, don’t book a trip from London to Leicester, but
from Karlskrona to Stockholm)