Hackers guide to UX
-
Upload
cyber-duck -
Category
Design
-
view
1.518 -
download
3
Transcript of Hackers guide to UX
![Page 1: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/1.jpg)
The hackers guide to UX v0101
Danny Bluestone - September 2015
![Page 2: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/2.jpg)
• About • The world we live in • The lean approach • What is UX • Overarching principles • Tactics
TODAY…
![Page 3: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/3.jpg)
The hackers guide to UXDanny Bluestone - September 2015
Hello. We are
![Page 4: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/4.jpg)
![Page 5: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/5.jpg)
![Page 6: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/6.jpg)
The world we live in1
![Page 7: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/7.jpg)
Google sets AI standards Apple sets UI standards
THE WORLD WE LIVE IN
![Page 8: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/8.jpg)
Amazon sets shopping standards
Facebook sets social standards
THE WORLD WE LIVE IN
![Page 9: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/9.jpg)
WEARABLES
http://smartiplex.com/2014/09/09/technology-life/
Would you be interested in wearing a sensor device assuming it was from a brand?
![Page 10: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/10.jpg)
FRAMING UX
![Page 11: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/11.jpg)
The lean approach1
![Page 12: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/12.jpg)
http://seriesf.com/post/117010627556/eric-ries-takes-page-from-tim-ferriss-begins
The Lean startup method is not about cost, its about speed
Eric Ries, The Lean Startup
![Page 13: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/13.jpg)
https://www.thoughtworks.com/insights/blog/how-business-leaders-create-lean-enterprise
![Page 14: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/14.jpg)
https://www.thoughtworks.com/insights/blog/how-business-leaders-create-lean-enterprise
![Page 15: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/15.jpg)
https://www.thoughtworks.com/insights/blog/how-business-leaders-create-lean-enterprise
![Page 16: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/16.jpg)
PROBLEM Ethnography to research customer problems and find opportunities. What will be the triggers and motivations?
LEAN CANVAS
SOLUTION Start with task tables and move into prototypes. Bake in ‘shareability’ and distribution in from outset
Consideration:Alternatives and mental models
KEY METRICS Put customer satisfaction at the core and thinkabout the KPIs you will use
UVP Make sure your UVP is clear within your messaging and brand strategy. Can you build in superior connection tools?
Consideration:Education curve, brand awareness as well as retention.
CHANNELS Which channels will you use and why, think about availability, consistency and seamlessness
UNFAIR ADVANTAGE Your brand’s infrastructure, personalisation and your psychological ‘hook model’
CUSTOMER SEGMENTS List your personas and verify them with real people. Use your personas to inform your designs.
CYBER-DUCK LTD
Consideration:Early adopters, different generations,rewards
COST STRUCTURE From a UX perspective, plan the importance of ongoing design, usability reviews, CRO, quality assurance and organic marketing. Is there a way to crowd source features and content? Can you create a tribe of early adopters within your CRM?
REVENUE STREAMS How can you build in co-efficient revenue models to minimise advertising costs? Think about how you can increase user retention and ‘bake’ in reward models as well as upselling and partnerships.
Through a UX lens
![Page 17: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/17.jpg)
What is UX2
![Page 18: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/18.jpg)
The overall experience of a person using a product such as a website or computer application, especially
in terms of how easy or pleasing it is to use.
According to Wikipedia
![Page 19: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/19.jpg)
UX IS NOT UI
Strategy User centred design Ethnography Use case analysis Stakeholder interviews Feature audits User interviews Usability plans Data analysis Persona driven design Task analysis Information architecture Prototyping Wireframing Usability studies Graphics Iconography Interface design Visual design
Strategy User centred design Ethnography Use case analysis Stakeholder interviews Feature audits User interviews Usability plans Data analysis Persona driven design Task analysis Information architecture Prototyping Wireframing Usability studies Graphics Iconography Interface design Visual design
HOW UX HAS BEEN VIEWED (“THE WHAT”) HOW UX NEEDS TO BE VIEWED (“THE WHY”)
![Page 20: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/20.jpg)
Overarching principles3
![Page 21: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/21.jpg)
CORE MODEL
http://alistapart.com/article/the-core-model-designing-inside-out-for-better-results
![Page 22: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/22.jpg)
TECHNOLOGY
• IoT - The Internet of Things is a precursor of fashion technology. • Innovation - Miniaturisation of sensors (e.g. GPS, NFC, accelerometer),
temperature, pressure, magnetometer, microphone and even chemical sensors. • Limitations - Batteries, healthcare approval, regulations, different demographics.
![Page 23: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/23.jpg)
DESIGN A SYSTEM ‘NOT A DESTINATION’
When designing a product, think about the ‘entire system’, not just a ‘destination’ (e.g.
app).
![Page 24: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/24.jpg)
BRAND STRATEGY
• Essence - The brand essence and values need to tie into the manifestation of the
UX (e.g. Amazon smile, customer is always put first). • Names - Descriptive names are loved by search engines whereas distinctive
names are favoured by trademark lawyers. • Visual aspect - “What is beautiful is usable”, invest in your art direction. • Originality- Make sure your visual language, photography, videos and icons are
authentic and unique.
![Page 25: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/25.jpg)
http://www.thevisibilityproject.com/2014/12/31/this-music-video-brings-maya-angelous-final-project-to-life/
I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.
Maya Angelou, Artist and activist
![Page 26: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/26.jpg)
Tactics4
![Page 27: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/27.jpg)
SYSTEM MAPPING TOOL To create system, sitemaps and app maps
http://quirktools.com/smaps
![Page 29: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/29.jpg)
MARVEL APP Quickly produce interactive prototypes with no coding
https://marvelapp.com
![Page 30: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/30.jpg)
UX RESEARCH Conduct online usability testing with verify app
http://verifyapp.com/tour
![Page 31: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/31.jpg)
Take aways5
![Page 32: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/32.jpg)
CONCLUSION
• Use comics to create user scenarios while working on the lean canvass • Get sketching as soon as you can, start with the most ridiculous ideas • Start branding and growth strategy from the outset and ‘bake it in’ to the UX • Prototype early and do field research • Your pitches will need to show what the ‘experience’ is about
![Page 33: Hackers guide to UX](https://reader034.fdocuments.in/reader034/viewer/2022051709/5877096d1a28ab890e8b612f/html5/thumbnails/33.jpg)
Thank youWe help brands run UX workshops and hackathons, get in touch for more info:
@danny_bluestone @cyberduck_uk
www.slideshare.net/mesibot