ux basics workshop at general assembly london by tricia okin

38
UX Basics Workshop Mindmapping, Paper Prototyping, Wireframing and User Tests

Upload: tricia-okin

Post on 28-Jan-2015

111 views

Category:

Technology


2 download

DESCRIPTION

This workshop will help you think through your current sites and projects from your users' perspectives by physically mapping out their concerns in space. First we'll review the various techniques to gather user research, then practice them in groups, organize the issues and plan execution. We'll cover the following methods:- Mind mapping Paper prototyping- Narrowing down concepts to features and uses- Talking to your users (targeted and off the cuff prototyping)- WireframingThis course is for people reviewing their current products who need address user issues or people who just need to integrate these techniques into their organizations. Students can expect to leave with some new paper prototyping skills, along with some apps and methodologies to translate to digital materials.

TRANSCRIPT

Page 1: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

Mindmapping, Paper Prototyping, Wireframing and User Tests

Page 2: UX Basics Workshop at General Assembly London by Tricia Okin

ABOUT Tricia Okin!+ web, mobile and ux designer based in Brooklyn since 2001 + designs and builds web and mobile sites/applications for companies within the food, green and tech startup fields + BFA in photography from University of Florida and an MFA in Design & Technology from Parsons The New School for Design. http://papercutny.com/ @papercutny

Page 3: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

•  Audience, User Personas and Stories •  Mindmapping •  Wireframing •  Paper Prototyping

• We’ll lightly cover: –  Heuristics –  Storyboarding –  Collaging

We’ll Cover:!

Page 4: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

Who is Your Audience?!•  Age, Urban or Sub-urban, Ethnicities? •  What Careers / Professions? •  Technology usage? •  What issues do they care about that would draw/force them to use your idea? •  Luxury product for a few or mass market? •  Government or institutions? •  Students or anyone on a budget? •  Early career folks making around £30.000 with small precious disposable

income? •  Couples making £50k - £90k who are used to paying more for quality? •  Affluent / luxury – household income of £120k - £205k?

 

Page 5: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

•  What needs fixing? •  What do your users say need fixing? •  What are the pain points to using your product or application? •  What improvements can be done first and easily then understand next phases

 

What Problem Are You!Trying to Solve?!

Page 6: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

User Personas & Stories!

Page 7: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

Page 8: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

User Personas!

Page 9: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

Page 10: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

Page 11: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

People use BlogTalkRadio because it gives them a forum for their message.

Engagement Action FulfillmentAwareness

remote playersocial shareadvertisementsearch resultemail shareblog entry

Exploration

landing pagehomepageepisode page

Build Desire

product tourbenefits of hosting a showstudio featureshost testimonials

Studio DemoRegister

BroadcastPromotion

ReportsNewsfeedAudience-Engagement

Perceived lack of timeSetup laborSignup FatigueTechnical confusion

The BlogTalkRadio Customer Experience Map

An online radio show is often just one part of a larger content and social strategy.

The appeal of BlogTalkRadio is its low barrier of entry of the tools and the built in audience / community.

We delight users when we help them overcome their anxieties and exceed their expectations.

Writer's block, "What do I talk about?"

Stage fright: "Is this live? What if I mess up?"

Technical confusion: "How do I put my guests on?"

Here are popular show topics...

Learn how to sound like a pro...

Congrats on your first show

You can build your audience...

Obstacles To Starting Anxiety Points OpportunitiesPromote

Engage

Broadcast

Fulfillment

customer-experience-map.graffle - Wed Jun 06 2012 - p 1 of 1CXM

Page 12: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

Mindmapping!

Page 13: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

Page 14: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

Page 15: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

Page 16: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

Wireframing!

Page 17: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

What Is BTR PageWireframe 1 Up

Fri Jun 01 2012

Creator

Modified

Tricia Okin4 / 5

1. Tagline / Call to action

2. Page navigation2.1 User can click to directly go to particular spot on the page. 2.2 Do we want this to move with the user as s/he moves down the page?

3. What Is BlogTalkRadio Video 3.1 500px x 285px dimensions3.2 Will NOT be Autoplay

4. Button - Implies 30 Day Free Trial4.1 Goes to Registration Page4.2 A/B test this (entire page) going to the Studio Demo

5. Button - Users can move down & up the page 5.1 "Up" may not be necessary if we have the nav bar follow them

6. Wide format Slider 6.1 Navigation dots change the entire area of both image and written content 6.2 Only feature 6 Benefits max. 6.3 The last two panels can be testimonials that we already have from other designs 6.4 Try Button goes to Registration

7. Screenshot of Studio7.1 Standard or Premium?4.2 A/B test this (entire page) going to the Studio Demo

8. Screenshot of a (Premium) Studio Feature

9. Button 9.1 Entire section/text is a button 6.2 Can add additional marketing copy if need be

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Try Now For Free V

2.0

1.0

What Is BlogTalkRadio? Benefits Try the Studio Demo Try It Now Free

16:9

Phasellus et justo arcu. Etiam vulputate commodo tortor, quis posuere ante sollicitudin ut. Sed non eros non urna luctus tristique.

WHAT IS BLOGTALKRADIO?

▶ Quisque lobortis odio sed dolor commodo non accumsan diam auctor.

▶ Nulla auctor pellentesque laoreet. Etiam eros lacus, ornare.

▶ Duis odio metus, egestas nec luctus imperdiet, congue ut sapien. Integer enim leo, semper ut placerat in, vehicula in ante lipsum.

▶ Cras non urna elit. Proin quis varius est. Nam sagittis nisi in velit gravida pulvinar.

BENEFITS OF BLOGTALKRADIOBENEFIT #1: Praesent viverra ultricies congue.

Phasellus et justo arcu. Etiam vulputate commodo tortor, quis posuere ante sollicitudin ut. Sed non eros non urna luctus tristique.

Duis odio metus, egestas nec luctus imperdiet, congue ut sapien. Integer enim leo, semper ut placerat in, vehicula in ante. Aenean rutrum, massa at consequat venenatis, elit urna pharetra est, vel vehicula urna massa non tellus.

Try Now For Free V

TRY THE STUDIO DEMOPhasellus et justo arcu. Etiam vulputate commodo tortor, quis posuere ante sollicitudin ut. Sed non eros non urna luctus tristique.

Try Studio Demo V

Phasellus et justo arcu.

Duis odio metus, egestas nec luctus imperdiet, congue ut sapien. Integer enim leo, semper ut place.

Phasellus et justo arcu.

Duis odio metus, egestas nec luctus imperdiet, congue ut sapien. Integer enim leo, semper ut place.

STILL NOT CONVINCED, FOOLS? TRY IT NOW FREE FOR 30 DAYS V

3.0

4.0

5.0

6.0

7.0 8.0

9.0

Page 18: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

Paper Prototyping!

Page 19: UX Basics Workshop at General Assembly London by Tricia Okin
Page 20: UX Basics Workshop at General Assembly London by Tricia Okin
Page 21: UX Basics Workshop at General Assembly London by Tricia Okin
Page 22: UX Basics Workshop at General Assembly London by Tricia Okin
Page 23: UX Basics Workshop at General Assembly London by Tricia Okin
Page 24: UX Basics Workshop at General Assembly London by Tricia Okin
Page 25: UX Basics Workshop at General Assembly London by Tricia Okin
Page 26: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

Storyboarding!

Page 27: UX Basics Workshop at General Assembly London by Tricia Okin
Page 28: UX Basics Workshop at General Assembly London by Tricia Okin

UX Basics Workshop

Exercise: !•  Name the users of the sites •  Name the potential user groups of the sites •  Remove or add any features from the home

page and menu systems that are (un)necessary

Page 29: UX Basics Workshop at General Assembly London by Tricia Okin

Bank of America UK: http://bankofamerica.co.uk/

Page 30: UX Basics Workshop at General Assembly London by Tricia Okin

Bank of America UK

Page 31: UX Basics Workshop at General Assembly London by Tricia Okin

Bank of America UK/

Page 32: UX Basics Workshop at General Assembly London by Tricia Okin

European Commission: http://ec.europa.eu/index_en.htm

Page 33: UX Basics Workshop at General Assembly London by Tricia Okin

European Commission (English Language)

Page 34: UX Basics Workshop at General Assembly London by Tricia Okin

European Commission (English Language)

Page 35: UX Basics Workshop at General Assembly London by Tricia Okin

BUPA (British Private Insurance): http://www.bupa.co.uk/

Page 36: UX Basics Workshop at General Assembly London by Tricia Okin

BUPA (British Private Insurance)

Page 37: UX Basics Workshop at General Assembly London by Tricia Okin

TOOLS & REFERENCES Wireframing!http://www.balsamiq.com/ http://www.adobe.com/products/proto.html http://mockflow.com/ Mindmapping!http://popplet.com/ http://lovelycharts.com/ - UX document creator (sitemaps, user flows, etc) http://www.mindmeister.com/ Grid Systems/Frameworks!http://foundation.zurb.com/grid.php http://twitter.github.com/bootstrap/ Responsive Design!http://mediaqueri.es/ http://twitter.github.com/bootstrap/ http://www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop – Responsive wireframes http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/ - very detailed and not just vague. Also has a downloadable PDF content priority guide.

Page 38: UX Basics Workshop at General Assembly London by Tricia Okin

CONTACT Tricia [email protected] http://papercutny.com/ Follow me on Twitter @papercutny

I’ll put these slides up on Slide Share in the next 36 hours: http://www.slideshare.net/papercutny !