UX Work Shop
Upcoming SlideShare
Loading in...5

UX Work Shop



1 day UX Work Shop prepared by Rik Lomas and Jessi Baker for General Assembly

1 day UX Work Shop prepared by Rik Lomas and Jessi Baker for General Assembly



Total Views
Views on SlideShare
Embed Views



6 Embeds 750

http://projectprovenance.com 466
http://jessibaker.co.uk 272
http://www.tumblr.com 5
http://safe.tumblr.com 3
http://www.jessibaker.co.uk 3
http://cargocollective.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    UX Work Shop UX Work Shop Presentation Transcript

    • UX WorkshopRik Lomas Jessi Baker @riklomas @jessibaker
    • What are we going to do today?
    • What’s UX!? UX success Strategy User Centred Design Goals, tasksInformation Architecture Wireframing Sketching Paper Prototyping Assessment States User Flows & ScenariosMake a case for wireframes Mock-up soware Code prototypes User Testing
    • What will you get out of it?
    • What’s UX!?
    • User Experience Design
    • “Anyone can make the simplecomplicated. Creativity ismaking the complicatedsimple.” - Charles Mingus
    • e design of experiences
    • e design of experiencesHuman centred
    • e design of experiencesHuman centredInteractions
    • e design of experiencesHuman centredInteractionsDifferent to UI
    • e design of experiencesHuman centredInteractionsDifferent to UIAccess to value
    • Examples of good UX
    • POST (& other apps) by Meri Media
    • Dollar Shave Club
    • dribbble
    • Rdio product site
    • myownbike.de
    • path app
    • Bus o clock
    • Where to start with UX?
    • A great idea!
    • What’s your idea?
    • Now write yours with nomention of the technologymedium or other ideas...
    • Do you LOVE this idea?
    • Platforms to consider
    • MVP
    • Roadmap
    • What’s success?
    • Select your platforms
    • Name your idea
    • Elevator pitch!
    • Design based on a real needand for real people...
    • Do you have access to yourusers?
    • What is a persona?
    • Exercise –Write down 3 personas for your site/app
    • What are the key goals?
    • What the user wants to do, not how the userachieves them.No assumptions about the system interface.Can be used to compare different interfacedesign alternatives in a fair way.Can be personal, practical or false goals.
    • Tell my friends who are in town that I have just arrived at a locationKey goal of Foursquare
    • Demo –Goals for PopDown
    • Exercise –Write down the key goals for your project
    • Tasks
    • Describe the steps necessary to achievethe goals.Can vary with the available technology.Broken down into steps for task analysis, and arerecombined into sequence of steps for scenariodevelopment.
    • Select foursquare app on my phone Select “check-in” button Select the location I’m at from a list of nearest locations Select “Share with facebook” Select “check-in” buttonKey task of Foursquare
    • Demo –Tasks for PopDown
    • Exercise –Write down 3 task that achieve 3 goals foryour site/app
    • InformationArchitecture
    • Post-its to Omnigraffle...
    • Site maps & Flow charts
    • Site map
    • Site map
    • Site map
    • Flow chart
    • Flow chart
    • Flow chart
    • Example -Craing an IA for PopDown
    • Link tasks into simple steps, think about a realuser performing the tasks
    • Highlight the core functions in your flow
    • Exercise –IA: Draw a hierarchy of the key tasks,highlighting the key functions
    • Remove the crap from your app
    • Core repeatable functions.e.g. Tweet, retweet + follow
    • What is a wireframe?
    • No fontsNo colourNo graphics
    • Wireframe fidelityLow HighSketching Paper Mock up Code Prototype Soware Prototype
    • Why make wireframes?
    • Concept Exploration
    • Concept ExplorationLayout Content on Pages
    • Concept ExplorationLayout Content on PagesBrainstorm Interactions
    • Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytelling
    • Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild Consensus
    • Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentation
    • Concept ExplorationLayout Content on PagesBrainstorm InteractionsStorytellingBuild ConsensusDocumentationMinimize Risk
    • Sketching
    • Demo –Facebook Profile Page
    • Exercise –Draw a sketch of the Twitter profile pageon the web version or the app version
    • LUNCH!
    • Guess the wireframe!
    • 8 tips for wireframing
    • Have clear objectives
    • Make it functional
    • Keep it clean
    • User Interface is not User Experience
    • Repetition. Repetition. Repetition.
    • Consider dependencies
    • Don’t be lazy
    • Know when to stop
    • Demo –Sketch of PopDown
    • Exercise –Draw a sketch for your idea.
    • Assessment
    • Do your key functions standout?
    • Why designs fail?
    • Why designs fail?Users aren’t motivated to achieve goals
    • Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it works
    • Why designs fail?Users aren’t motivated to achieve goalsUsers don’t understand how it worksUsers don’t see things
    • States
    • Errors, alerts & successes
    • No content
    • Events (e.g. click, hover, tap and swipe)
    • Hover mode - Google maps
    • Responsive design and orientation
    • Responsive web design examples
    • User flows & Scenarios
    • User Flow for 1 scenario
    • User flow for multiple scenarios
    • User flow for multiple scenarios
    • User flow for all scenarios
    • Scenarios help you design and test
    • Demo-Scenario for PopDown and wireframingof the user flow
    • Excercise -Chose a scenario for your project andwireframe of the user flow with less than 5key screens
    • BREAK
    • Paper prototyping
    • Demo-Paper Prototype for PopDown
    • Popdown Paper Prototype - Home screen
    • Popdown Paper Prototype - Shop mode
    • Popdown Paper Prototype - select a category
    • Popdown Paper Prototype - aer a category is selected
    • Popdown Paper Prototype - shop view hover mode
    • Popdown Paper Prototype - product view
    • Exercise –Paper prototype your site/app
    • Making a case for wireframes
    • Agencies
    • Creativity is in the making
    • Making changes in Photoshop or code willtake much longer than in wireframes
    • Some clients are happy to see IA andwireframes, if not, storyboard or sketch a userjourneyYour client knows customer experience isking!Testing on paper with the whole team willenage everyone with the importance of the UXDo it anyway...
    • You’re broke! So it’s even more importantto get it right in a lo-fi way...
    • Customer experience will help you writecertain aspects of your business plan
    • Mockup Soware
    • Balsamiqhttp://www.balsamiq.com/
    • Balsamiq demo...
    • Mockingbirdhttps://gomockingbird.com/
    • Keynote Mac only
    • Omnigrafflehttp://www.omnigraffle.com
    • Axurehttp://www.axure.com/
    • Mock up libraries
    • MockupsToGohttps://mockupstogo.mybalsamiq.com/
    • Keynotopiahttp://keynotopia.com/
    • https://vimeo.com/13892268
    • Graffletopiahttp://graffletopia.com/
    • Code prototypes
    • 960.gshttp://960.gs/
    • Twitter Bootstraphttp://twitter.github.com/bootstrap/
    • Zurb Foundationhttp://foundation.zurb.com/
    • BREAK
    • User testing
    • How to do a user test
    • Develop a test plan
    • Choose a place
    • Select participants
    • Conduct session
    • Don’t cheat! No hints. Let them figure it out...
    • Monitor time to perform tasks
    • A/B Testing:Test different layouts of same page on critical mass of different people
    • De-brief participant
    • Wash, rinse, repeat.
    • Demo –Making a test plan for PopDown
    • Exercise –Make a test plan based on user scenario
    • Demo –PopDown testing
    • Exercise –Test your idea using your paper prototypes withthree people
    • Tools for testing
    • Silverbackhttp://silverbackapp.com/
    • Realizerhttp://www.realizerapp.com/
    • AirDisplayhttp://avatron.com/apps/air-display
    • UserTesting.comhttp://www.usertesting.com/
    • Kiss Metricshttp://www.kissmetrics.com/
    • What next?
    • Five booksworth reading
    • Websites
    • A List Aparthttp://www.alistapart.com/
    • boxesandarrowshttp://www.boxesandarrows.com/
    • Site Inspirehttp://siteinspire.com/
    • Pattern Taphttp://patterntap.com
    • Observe!Experiment! Fail!
    • Any questions?
    • anks! Rik Lomas Jessi Baker @riklomas @jessibakerrik@lomalogue.com jessi@cantab.net