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 754

http://projectprovenance.com 466
http://jessibaker.co.uk 276
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
  • 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/
  • 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