UX Basics Workshop at General Assembly London by Tricia Okin
-
Upload
tricia-okin -
Category
Technology
-
view
111 -
download
2
description
Transcript of UX Basics Workshop at General Assembly London by Tricia Okin
![Page 1: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/1.jpg)
UX Basics Workshop
Mindmapping, Paper Prototyping, Wireframing and User Tests
![Page 2: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/2.jpg)
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](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/3.jpg)
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](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/4.jpg)
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](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/5.jpg)
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](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/6.jpg)
UX Basics Workshop
User Personas & Stories!
![Page 7: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/7.jpg)
UX Basics Workshop
![Page 8: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/8.jpg)
UX Basics Workshop
User Personas!
![Page 9: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/9.jpg)
UX Basics Workshop
![Page 10: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/10.jpg)
UX Basics Workshop
![Page 11: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/11.jpg)
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](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/12.jpg)
UX Basics Workshop
Mindmapping!
![Page 13: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/13.jpg)
UX Basics Workshop
![Page 14: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/14.jpg)
UX Basics Workshop
![Page 15: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/15.jpg)
UX Basics Workshop
![Page 16: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/16.jpg)
UX Basics Workshop
Wireframing!
![Page 17: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/17.jpg)
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](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/18.jpg)
UX Basics Workshop
Paper Prototyping!
![Page 19: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/19.jpg)
![Page 20: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/20.jpg)
![Page 21: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/21.jpg)
![Page 22: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/22.jpg)
![Page 23: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/23.jpg)
![Page 24: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/24.jpg)
![Page 25: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/25.jpg)
![Page 26: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/26.jpg)
UX Basics Workshop
Storyboarding!
![Page 27: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/27.jpg)
![Page 28: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/28.jpg)
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](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/29.jpg)
Bank of America UK: http://bankofamerica.co.uk/
![Page 30: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/30.jpg)
Bank of America UK
![Page 31: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/31.jpg)
Bank of America UK/
![Page 32: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/32.jpg)
European Commission: http://ec.europa.eu/index_en.htm
![Page 33: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/33.jpg)
European Commission (English Language)
![Page 34: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/34.jpg)
European Commission (English Language)
![Page 35: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/35.jpg)
BUPA (British Private Insurance): http://www.bupa.co.uk/
![Page 36: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/36.jpg)
BUPA (British Private Insurance)
![Page 37: UX Basics Workshop at General Assembly London by Tricia Okin](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/37.jpg)
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](https://reader031.fdocuments.in/reader031/viewer/2022020207/54c7db294a795956078b466b/html5/thumbnails/38.jpg)
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 !