View
113
Download
2
Category
Tags:
Preview:
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.
Citation preview
UX Basics Workshop
Mindmapping, Paper Prototyping, Wireframing and User Tests
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
UX Basics Workshop
• Audience, User Personas and Stories • Mindmapping • Wireframing • Paper Prototyping
• We’ll lightly cover: – Heuristics – Storyboarding – Collaging
We’ll Cover:!
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?
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?!
UX Basics Workshop
User Personas & Stories!
UX Basics Workshop
UX Basics Workshop
User Personas!
UX Basics Workshop
UX Basics Workshop
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
UX Basics Workshop
Mindmapping!
UX Basics Workshop
UX Basics Workshop
UX Basics Workshop
UX Basics Workshop
Wireframing!
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
UX Basics Workshop
Paper Prototyping!
UX Basics Workshop
Storyboarding!
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
Bank of America UK: http://bankofamerica.co.uk/
Bank of America UK
Bank of America UK/
European Commission: http://ec.europa.eu/index_en.htm
European Commission (English Language)
European Commission (English Language)
BUPA (British Private Insurance): http://www.bupa.co.uk/
BUPA (British Private Insurance)
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.
CONTACT Tricia Okin!tricia@papercutny.com 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 !
Recommended