Wireframe and prototyping google Campus talk by Zoe Guiraudon

@zoe_guiraudon

INTRO TO WIREFRAMING AND PROTOTYPINGGENERAL ASSAMBLY @ GOOGLE CAMPUS

@zoe_guiraudon

@zoe_guiraudon

WHAT WILL YOU LEARN TODAY

INTRO TO UX WIREFRAMING PROTOTYPING

@zoe_guiraudon

WHO THE HELL IS SHE?

Zoe Guiraudon

www.zoeguiraudon.com

UX Designer at 100 Shapes

TA at General Assembly

@zoe_guiraudon

MY UX JOURNEY

Finished Uni Yay!

Continue Working In

Social Media

Found out about GA

Al lot of ups and downs but it was all worth it!

My GA Experience

I Need a career change!!!

Teaching at GA

100 Shapes

ITV Project

@zoe_guiraudon

INTRO TO USER EXPERIENCE DESIGN

WHAT IS USER EXPERIENCE?


WE INTERACT WITH PRODUCTS, BOTH DIGITAL AND PHYSICAL.

WE TRY TO ACCOMPLISH GOALS WHEN USING THESE PRODUCTS. THIS LEADS US TO HAVING A USER EXPERIENCE.


JESSE JAMES GARRET

“Experience design is the design of anything independent of medium, or across media, with human experience as an explicit outcome and human engagement as an explicit goal.”


DONALD NORMAN

“User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”


THERE ARE SOME PRODUCTS THAT WE USE DAILY THAT ARE POORLY DESIGNED AND OFTEN PROVIDE POOR EXPERIENCES.

CLASS TITLETODAY’S CLASSWHAT IS USER EXPERIENCE?

EVERYDAY UX


HAVE A THINK - WHAT WAS THE EXPERIENCE LIKE COMING TO THIS TALK?

•Transport •Restaurants/coffee shops •Architecture •Sign posting •Did you use any apps to guide you here?


CAN YOU THINK OF ANY EXAMPLES OF GOOD OR BAD EXPERIENCES?

UX COMES FROM PSYCHOLOGY

Thinking

Feeling

Instinct

UX COMES FROM PSYCHOLOGY


HOW DO WE “DESIGN” THE USER EXPERIENCE?

DESIGNING THE USER EXPERIENCE

WHAT MOST PEOPLE THINK UX ISField research Face to face interviewing Creation and administering of tests Gathering, organising, and presenting statistics Documentation of personas and findings Product design Feature writing Requirement writing Graphic arts Interaction design Information Architecture Usability

Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copy writing Presentation and speaking Working tightly with programmers Brainstorm coordination Company culture evangelism Communication to stakeholders

helloerik.com/ux-is-not-ui

http://helloerik.com/ux-is-not-ui


WHAT UX ACTUALLY ISField research Face to face interviewing Creation and administering of tests Gathering, organising, and presenting statistics Documentation of personas and findings Product design Feature writing Requirement writing Graphic arts Interaction design Information Architecture Usability

Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copy writing Presentation and speaking Working tightly with programmers Brainstorm coordination Company culture evangelism Communication to stakeholders

helloerik.com/ux-is-not-ui

http://helloerik.com/ux-is-not-ui


THE FIELD OF USER EXPERIENCE IS CONCERNED WITH IDENTIFYING A REAL-WORLD PROBLEM AND USING DESIGN TO ATTEMPT TO SOLVE IT.


USER EXPERIENCE IS SUBJECTIVE; WE DESIGN FOR THE NEEDS OF SPECIFIC TYPES OF USER


Jesse James Garrett, 2000

Strategy

Scope

Structure

Skeleton

Surface


WHY IS UX SO IMPORTANT?

WHY IS UX SO IMPORTANT?

AVOID FEATURITIS

Kathy Sierra, Creating Passionate Users, 2006

Number of features

Use

r hap

pine

ss

“Nice, but I wish it did more…”

“So glad they added this!”

“Cool!”

“I rule!” “Guess I’d better read the manual”

“Where the f*** did they put that?!”

“Now I can’t even do the ONE SIMPLE THING I bought this for.”

“I suck at this.”

Happy user peak RAWR!

MASLOW’S HIERARCHY OF NEEDS

USER EXPERIENCE HIERARCHY OF NEEDS

Aarron Walter, Designing for Emotion 2011

Easy to learn to perform basic tasks

Basic features that meet user needs

Service and functional reliability

Fun, joy and delight

WHO PRACTICES UX DESIGN?

Squad

Product owner

UX’er

TesterBusiness Analyst

Developers

Front-end developer

CROSS-DISCIPLINE TEAMS

Squad

Product owner

UX’er


Developers

Front-end developer

Squad

Product owner

UX’er


Developers

Front-end developer

@zoe_guiraudon

WHERE DO WIREFRAMING AND PROTOTYPING FIT IN THE PROCESS?

@zoe_guiraudon

Research Insights PrototypeIdeation

DiscoverBusiness Analysis

Brand Analysis Competitive Analysis Technical Research

User Survey User Interview

Usability Testing

DefineAffinity Map User Flows

User Journeys Personas

Feature Prioritisation

DesignDesign Studio

Sketching Paper Prototype Usability Testing

Iterations Wireframing

Test, iterate, Validate

DeliverDigital Prototype Usability Testing


Test, Iterate, Validate Functional Prototype

@zoe_guiraudon

PrototypeIdeation

DesignDesign Studio







Design

TestLearn

Iteration Process

@zoe_guiraudon

WIREFRAMING

@zoe_guiraudon

!

@zoe_guiraudon

1 - ALWAY START WITH PAPER!

IDEAS ARE CHEAP, BUILDING THING IS EXPENSIVE.

@zoe_guiraudon

CAN YOU DRAW A…

Triangle Circle Cross Rectangle

@zoe_guiraudon

LET’S PLAY A GAME…

CALLED UXIONARY

@zoe_guiraudon

PAPER SKETCHES• Every idea needs user interface

translation

• Good to get the basic concept and interaction down.

• Sketching always comes before wireframing

• Sketching helps you brainstorm ideas with clients

• Sketches can be basic and Still communicate wonderfully

@zoe_guiraudon


translation





@zoe_guiraudon


translation





@zoe_guiraudon

2 - WIREFRAMES

UP THE FIDELITY

@zoe_guiraudon

WIREFRAMES

• Grayscale or monochrome

• Good to test interactions

• Good to test usability

• More tangible

• If well done it should make the next step a “breeze”

@zoe_guiraudon

WIREFRAMES




• More tangible


@zoe_guiraudon

WIREFRAMES




• More tangible


@zoe_guiraudon

3 - MOCKUPS

UP UP THE FIDELITY

@zoe_guiraudon

MOCKUPS

• This is where you get the visual design and branding in

• Great to communicate with stakeholders

• Good to get design feedback

• Additional piece of insight when testing: Look & Feel

@zoe_guiraudon

MOCKUPS





@zoe_guiraudon

MOCKUPS





@zoe_guiraudon

TO RECAP

http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/

Sketch Wireframes Mockup CodeIdea

Getting a basic

concept.

Refining the concept further.

Creating visual

graphic & content.

Developing it in the web

browser.

@zoe_guiraudon

THE TOOLS I use…

Sketch

@zoe_guiraudon

THE TOOLS But people also use…

Omnigraffle Illustrator InDesign Photoshop Affinity Designer

@zoe_guiraudon

PROTOTYPING

@zoe_guiraudon

“IF A PICTURE IS WORTH 1,000 WORDS, A PROTOTYPE IS WORTH 1,000 MEETINGS.”

WHY…

- Tom & David Kelly IDEO

@zoe_guiraudon

PrototypeIdeation

DesignDesign Studio







REMEMBER THIS?

@zoe_guiraudon

Design

TestLearn

Iteration Process

AND THIS?

@zoe_guiraudon

REMEMBER…

UX is not only about the look but also about the human interaction.

•To explore and refine

•To communicate and test

‣Functionality

‣Flow

‣ Interaction

‣Animations

‣Usability

WHY IS PROTOTYPING IMPORTANT?

PROTOTYPES ARE ALL ABOUT THE USER.

WE TEST THE USABILITY OF OUR DESIGNS.

• Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design?

• Efficiency - Once users have learned the design, how quickly can they perform tasks?

• Memorability - When users return to the design after a period of not using it, how easily can they reestablish proficiency?

• Error Management - How many errors do users make, how severe are these errors, and how easily can they recover from the errors?

• Satisfaction - How pleasant is it to use the design?

PRINCIPLES OF USABILITY

























@zoe_guiraudonLEMErrS

USABILITY TESTING

CAN YOU THINK OF ANY SITES OR APPS WHERE USABILITY TESTING HASN’T BEEN THOROUGH?

@zoe_guiraudon

WHAT ARE DIFFERENT TYPES OF PROTOTYPES?

@zoe_guiraudon

REMEMBER THIS?

http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/

Sketch Wireframes Mockup CodeIdea

Getting a basic

concept.

Refining the concept further.

Creating visual

graphic & content.

Developing it in the web

browser.

@zoe_guiraudon

REMEMBER THIS?

Sketch Wireframes Mockup Code

Paper Prototype

Digital / Clickable Prototype


Functional Prototype

@zoe_guiraudon

REMEMBER THIS?

Sketch Wireframes Mockup Code

Paper Prototype



Functional Prototype

Iteration Iteration Iteration

@zoe_guiraudon

IS PROTOTYPE AN MVP*? * MINIMUM VIABLE PRODUCT

@zoe_guiraudon

WHAT IS THE MVP OF…

A CAR?

@zoe_guiraudon


IS IT A WHEEL?

@zoe_guiraudon


NO

@zoe_guiraudon

AN MVP IS THE PROTOTYPE THAT WILL HELP YOUR USER TO ACHIEVE THEIR GOAL.

@zoe_guiraudon

THE TOOLS I use…

Marvel Invision POP

@zoe_guiraudon

THE TOOLS But people also use…

Axure proto.io Flinto UXPin

@zoe_guiraudon

100 SHAPES

http://www.100shapes.com/

[email protected]

+44-203-7738175

CONTACT US:

mailto:[email protected]

@zoe_guiraudon

GENERAL ASSEMBLY

IF YOU ARE INTERESTED IN STUDYING UX

UPCOMING COURSES:

Part Time - 10 weeks: July 26th - September 29th

Part Time - 1 week intensive: August 8th - August 13th

Full Time - UXDI: August 1st - October 7th

@zoe_guiraudon

THANK YOU!

Q&AZOE GUIRAUDON

www.zoeguiraudon.com

@zoe_guiraudon

http://www.zoeguiraudon.com