Before Code: How to Plan & Visualize Your Project

Before CodeHow to Plan and Visualize your Project

University of Illinois Web Conference • April 29, 2014

Cate Kompare @CateKompare

!

Melinda Miller @melindamiller

Cate Kompare @CateKompare

Melinda Miller @melindamiller

UX!

UX?

UX

“UX isn’t something you implement, it’s an ethos.”

— Aarron Walter, Director of UX at Mailchimp

Our Perspective

Today’s Agenda

1. Introducing Techniques

2. When you should use them

3. How you can involve your team

Resource Link: http://goo.gl/y2t2Mb

Team• Users

• Stakeholders

• Project Managers

• Content Strategists

• Writers

• Information Architects

• Interaction Designers

• Visual Designers

• Usability Testers

• Developers

• QA Testers

• System Administrators

• Wireframers

… or Team• Users

• Stakeholders

• You!

What would Bernini do?

What would Bernini do?

1Research1Analyze1Design

1Research

Organizational Research

1 Research

1 Research 1 Organizational Research

1 Research 1 Organizational Research

User Research

1 Research

1 Research 1 User Research

1 Research 1 User Research

Competitive Review

1 Research

1 Research 1 Competitive Review

1 Research 1 Competitive Review

Content Inventory

1 Research

1 Research 1 Content Inventory

1 Research 1 Content Inventory

1 Research 1 Content Inventory

1Research 1 Content Inventory

1Research 1 Content Inventory

1Analyze

Flow Diagrams

1 Analyze

1 Analyze 1 Flow Diagrams

1 Analyze 1 Flow Diagrams

(Either/Or)

1 Analyze 1 Flow Diagrams

User Stories

1 Analyze

1 Analyze 1 User Stories

“As a [insert role],

I want to [insert task],

so that I [insert driving

force].”

1 Analyze 1 User Stories

“As a speaker at the U of I Web Con,

I want to give an informative talk,

so that the organizers don’t regret

letting me do this.”

1 Analyze 1 User Stories

Personas

1 Analyze

1 Analyze 1 Personas

1 Analyze 1 Personas

1 Analyze 1 Personas

1 Analyze 1 Personas

NamePersona type

Age>ŽĐĂƟŽŶTechnical comfort

Job Title

Back story

�DŽƟǀĂƟŽŶƐ

�&ƌƵƐƚƌĂƟŽŶƐ

Their ideal experience

Feel free to doodle!

Persona Template

Quote

“

_”

Tell us a bit about their lives

ͻ�ͻ�ͻ�ͻ�

What concerns do they have? Why do they need this website/service? How have they found or heard about the website?

ͻ�ͻ�ͻ�ͻ�

What’s stopping them from choosing the service/website or annoying them?

ͻ�

ͻ�

ͻ�

ͻ�

ͻ�

Their story including features and content which will help them have a great

experience

ͻ�

ͻ�

ͻ�

ͻ�

ͻ�

ͻ�

ͻ�

Sum up their experience with the

ǁĞďƐŝƚĞͬŽƌŐĂŶŝƐĂƟŽŶͬƐĞƌǀŝĐĞ͘

WŽƐŝƟǀĞ�Žƌ�ŶĞŐĂƟǀĞ͘

1Design

Sketchboard

1 Design

1 Design 1 Sketchboard

1 Design 1 Sketchboard

1 Design 1 Sketchboard

Sketching

1 Design

1 Design 1 Sketching

1 Design 1 Sketching

1 Design 1 Sketching

Card Sorting

1 Design

1 Design 1 Card Sorting

1 Design 1 Card Sorting

1 Design 1 Card Sorting

Wireframe

1 Design

1 Design 1 Wireframe

1 Design 1 Wireframe

1 Design1 Wireframe

1 Design 1 Wireframe

Page Tables

1 Design

1 Design 1 Page Tables

Page Title

1 Design 1 Page Tables

1 Design 1 Page Tables

1 Design 1 Page Tables

Usability Testing

1 Design

1 Design 1 Usability Testing

1 Design 1 Usability Testing

So now you’re ready to code!

Right?

Maybe not quite yet…

1. Introducing Techniques

2. When you should use them

3. How you can involve your team

Keep on learning and connecting

• UX Champaign-Urbana ‣ UX Book Club ‣ Content CU ‣ IxDA

• CUDO

Resource Link: http://goo.gl/y2t2Mb

What would Bernini do?

@MelindaMiller 1 @CateKompare

@UXBookClub 1 @ContentCU

@PixoTech

Thanks!

Resource Link: http://goo.gl/y2t2Mb

UX Cards: http://goo.gl/IoSnNi