UX - Who? What's and How in Evolio


Published on

Here is a presentation given to the sales team of Evolio speaking about what is UX, my methodology and next steps for all of us.

Published in: Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • \n
  • Here are criterias I believe are necessary in when I’m looking trought a web site.Easy to Use: takes less time to do a particular task, easier to learn, more satisfying to use.Information architecture is the categorization of information into a coherent structure that most people can understand quickly.\nVisual: we seeks to attract, inspire, create desires and motivate the people to respond to our product.\nFunctionnality: we design simple, easy-to-use screens, forms, flows, and other interface elements for crucial interaction point.\n\n
  • I've been an designer for more than a decade. I remember the first time I designed a web site all the way back in my very first class in 1997. I was hooked instantly, and ever since I've been working on the Web. I’m never tire to talk about user experience and usability best practices.\n\nThis is what made me a ux designer.\n
  • This sweet spot is the optimal place I need to be for something to happen. I need to know where to money come from, and where to money go. What’s the vision? I know how to code html/css. How a CMS work. And of course, what are the customer needs? If I can stay in this sweet spot, I think I can do a good job.\n
  • How UX fill fit in our process?\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • A concrete picture of our users emerges\n
  • \n
  • We’ve come up with a vision ... now, let start by communicate and validate our vision.\n
  • \n
  • \n
  • A tool I use to test the vision (or some aspect of it) wherever I go. I’m creating a lightweight, smoke & mirror prototype of the web site. I’m will pull it out on my board (near my office), ask people how and why they’d use it. I’ll include top benefits, glimpse of data, etc.\n
  • Wireframes is an effective way to make rapid prototypes of pages.Low-fidelity: Resembling a rough sketch or a quick mock-up.High-fidelity wireframes are often used for documentingIn other words, it focuses on what a screen does, not what it looks like.\n
  • Using HTML as the basis for our wireframing and prototyping can be a quick with a lot of benefits, including easier user testing, improved communication, and faster, more effective use of design time.- Creating visible value from the start- Improved communication\n- Disqualifying poor ideas- Simplified implementation \n
  • Notable lets me take any webpage screenshot, sketch or wireframe and exchange notes on specific detail. I can quickly reply, vote or suggest a better idea. Notable lets me and the production team to give feedback at every step of the design process.\n
  • \n
  • Verify is the fastest way to collect and analyze user feedback on screens or mockups.\nSee where people click, what they remember, or how they feel.How do I decide which features to include or omit? This allows me to quickly test concepts with users to get immediate feedback. I can test out my ideas before implementing them.\n
  • QA = ISO 9001!\n
  • \n
  • \n
  • \n
  • \n
  • Uncover unknown or unexpected issues\nFix problems early in the process when they are easy to fix\nHighlight unnecessary features\nProvide objectivity help and solve opinions battle\nIncrease conversion rate\nReduce project risk\nImprove customer satisfaction and retention\n
  • \n
  • A/B testing is one of the most powerful tools you can use to increase conversions. It's the most effective ways to understand how our interface impact your visitors' behavior.\n\nWe test several different versions of a web page on live traffic and then measuring the effect each version has on your conversion rates. We measures the number of visitors who saw each version and then clicked it.\n
  • \n
  • \n
  • \n
  • UX - Who? What's and How in Evolio

    1. 1. BENOÎT MEUNIER UX Specialist @ Evolio
    2. 2. UX• Ease of Use (Usability)• Intuitivness (Information Design)• Structure (Information Architecture)• Visual Aesthetic (Visual Design)• Functionality (Interaction Design)
    3. 3. WHAT? Architecture Touch Sociology Art History InteractionPsychology Design Design Typography History Anthopology Writing Presentation Skills Narrative Methodology Information Visual Design Design/Arch. Marketing Business Fundamentals Iconography Illustration CRM Photography Voice Film Music Sound Animation
    4. 4. FINDING THE SWEET SPOT Te es c hn tiv ica c bje rel O qu ss ire ME! e sin m Bu en ts Customer Needs
    5. 5. THE PROCESS
    6. 6. PRODUCT DEVELOPEMENT To develop a product you : + +you have you create and you design an idea functionnality the product
    7. 7. PRODUCT DEVELOPEMENT Show Time Look Color Power source Type Gears Indicator
    8. 8. PRODUCT DEVELOPEMENTA clock with accurate funtionnality and great aesthetic look ... great product !
    9. 9. QUESTION A good functionality and a great design equal to good User Experience ? Good Greatfunction + Design = Good UX
    10. 10. ANSWER: NO!Good function + Great Design = Good UX User experience start from a user, we haven’t considered him yet!
    11. 11. CONTEXTThe find out about a user, we need to know the context .Context is the environment and the circumstance which surrounds the product and the user . Context Product
    12. 12. UX PROCESSUser Interact Product Love Use Understand
    13. 13. CONTEXT Context User Airport PassengersSports Stadium People watching the game Art Gallery HobbyistWhat a user need, decide the user experience
    14. 14. CURRENT PRODUCT Product Aesthetic clock Context Air port User Traveler Minute detail Need hh:mm / Clear Analog User experience BAD
    15. 15. CURRENT PRODUCT Product Aesthetic clock Context Sport stadium User Crowd watching the game Precise seconds details Need hh:mm:ss User experience BAD
    16. 16. CURRENT PRODUCT Product Aesthetic clock Context Art Gallery User Artist Hobbyist Need Just Time User experience GOOD
    17. 17. CONCLUSIONContext and user define the user experience Context Product
    19. 19. How the customer explained it How the project leader understood it How the analyst designed it What the beta testers receivedHow the customer explained it How the consultant described it How the project was documented What operations installedHow the customer was billed How it was supported What marketing advertised What the customer really needed
    20. 20. A NEW PROCESS DefineTest Design & Communicate DevelopThe more cycles the better Fail early, fail often
    21. 21. Don’t think of your product like this ...
    22. 22. “ Build half a product, not a half-assed product ” - Jason Fried
    23. 23. DEFINE NEEDS• Show Time•A thousand songs in your pocket• Provide voting info to US seniors• Teach students to trade stocks• Play a fun and online game
    25. 25. DEFINE USERS WITH USER RESEARCH Users goals Task AnalysisContextual Inquiry Personas
    26. 26. DEFINE USERS PEOPLE ... CATHERINE!• Which user goals should this app support? What functionnality should this app provide?• What is Catherine primay goal in this scenario? What if the user need to ...?• How important is it for Catherine to...? Someone may want to ...?• How can we make it easier for Catherine to log this event? The system needs these data elements to complete this function
    28. 28. VISION• A clock Show Time• A MP3 player & software A thousand songs in your pocket• A find-your-voting-office tool Provide voting info to US seniors• Tutorials and articles Teach students to trade stocks• A stock market contest Play a fun and online game
    30. 30. DESIGN TOOLS• Paper prototyping• Wireframes and page shematics• HTML Wireframes• Interactive prototypes
    31. 31. Paper prototypes QuickNo software needed Very inclusive
    32. 32. Wireframes Define contentDocumenting screens
    33. 33. HTML Prototypes Can show interactivityGood for testing - Support feedback Good for simple creation Experience in the browser
    34. 34. Notable
    35. 35. Newsletter
    36. 36. Survey
    37. 37. DEVELOP• Form, visual, aesthetic: GO!• Back & Forth with production team• QA, QA, QA
    38. 38. QA• Double-check my assumptions•I help nail low-hanging fruit to improve usability•A project = 1000 bugs minimum
    39. 39. TESTS• Heatmap• Scrollmap• Lab Usability Testing• Survey• A/B Testing
    40. 40. Heatmap ...
    41. 41. The brightest areas have the mostscroll reach and the darker areas have the least reach Scrollmaps
    42. 42. Lab Usability Test Lab usability tests measure a user’s ability to complete tasks. Great at getting close to a customer and really observing themGet customer feedback early in the process to identify big problems early one and save time and money and energy and sanity Identify what is working and what is not
    43. 43. Surveys What is the purpose of your visit to our website today? Were you able to complete your task today?If you were not able to complete your task today, why not?
    44. 44. A/B - MULTIVARIANTE A/B - Multivariante Success!
    45. 45. RINSE & REPEAT
    46. 46. MY NEXT GOALS• New PDL Test+Redesign+ Test+Redesign+ Test+Redesign+ Test• 20 Dealers Test+Tweaking+ Test+Tweaking+ Test+Tweaking+ Test• Guide of best practices Back to basics• White papers for clients Test/Design + Results = Documentation
    47. 47. THANKS!• Email bmeunier@evolioca• Blog blog.benoitmeunier.info• Twitter @bmeunier (@benoitmeunier in french)• Linkedin ca.linkedin.com/in/benoitmeunier