Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Doing Your HW - A UX approach to your web design

1,514 views

Published on

Published in: Design
  • Be the first to comment

Doing Your HW - A UX approach to your web design

  1. 1. DOING YOUR HOMEWORK A UX APPROACH TO YOUR WEB DESIGN BY FABIAN ALCANTARA Wednesday, September 8, 2010
  2. 2. THE PROBLEM Wednesday, September 8, 2010
  3. 3. Wednesday, September 8, 2010
  4. 4. Wednesday, September 8, 2010
  5. 5. Wednesday, September 8, 2010
  6. 6. Wednesday, September 8, 2010
  7. 7. THE PROBLEM WITH CLIENTS TOO MANY CHIEFS NOT ENOUGH INDIANS DIFFERENT PERSPECTIVES & DIFFERENT AGENDAS IMPACTING THE DESIGN DESIGNING FOR SPECIFICATION IDEAS AND FEATURES ARE BASED ON THEM ON NOT ON THEIR CUSTOMERS / AUDIENCE I WANT THINGS TO EXPLODE AND CATCH PEOPLE’S ATTENTION CONTENT IS THOUGHT GIVING AT THE END LAST MINUTE CHANGES BEFORE GOING LIVE Wednesday, September 8, 2010
  8. 8. WTF!? Wednesday, September 8, 2010
  9. 9. YOU’RE NUTS! Wednesday, September 8, 2010
  10. 10. BREAK IT DOWN Wednesday, September 8, 2010
  11. 11. BREAK IT DOWN MOST CLIENTS SEE THINGS ABSTRACTED, INSIDE OUT VIEW OF THE THE PROJECT FEATURES LISTS TECHNICAL SPECIFICATIONS (I.E., I WANT FLASH) CREATE A BETTER METHODOLOGY INTO YOUR DESIGN Wednesday, September 8, 2010
  12. 12. THE USER EXPERIENCE (UX) Definition User Experience design (UX) is a process in which the needs, wants, and limitations of end users of an interface or document are given extensive attention at each stage of the design process. The end results will enable certain kinds of experiences. Wednesday, September 8, 2010
  13. 13. IN ENGLISH DESIGNING SOMETHING FROM THE PERSPECTIVE OF THE PEOPLE WHO ARE GOING TO USE IT CLIENT PERSPECTIVE USER PERSPECTIVE Wednesday, September 8, 2010
  14. 14. UX PROCESS IS EXTENSIVE IT’S FOR GOOD REASON NO PHOTOSHOP REQUIRES YOU TO DO YOUR HOMEWORK NO CODING Wednesday, September 8, 2010
  15. 15. CREATE A DESIGN STRATEGY CREATE A DESIGN DOCUMENT AND BREAK IT DOWN IN PHASES USER NEEDS STRATEGY DESIGN Wednesday, September 8, 2010
  16. 16. USER NEEDS ASK THE RIGHT QUESTIONS TO YOUR CLIENT WHO IS THE SITE FOR? GOAL OF THE SITE? WHAT DO YOUR USERS WANT? IS THERE ANY PRELIMINARY FEEDBACK ABOUT WHO USES THE SITE? Wednesday, September 8, 2010
  17. 17. USER NEEDS AFTER MEETING WITH THE CLIENT, BRAINSTORM: WHO ARE THE USERS IDENTIFY THE USER NEEDS IDENTIFY CLIENT NEEDS Wednesday, September 8, 2010
  18. 18. USER NEEDS - USER FLOWS HELPS YOU UNDERSTAND WHAT A TYPE OF USER WILL GO THROUGH TO FIND SOMETHING HELPS YOU VALIDATE THE OVERALL FLOW OF THE YOUR INTERFACE / WEB SITE Wednesday, September 8, 2010
  19. 19. USER FLOW EXAMPLE Wednesday, September 8, 2010
  20. 20. USER NEEDS - USER STORIES SHORT STATEMENTS EXAMPLE THAT INCLUDE THE ROLE OF THE USER & ACTIVITY REQ: “DISPLAY ALL THEY ARE DOING NEWS CONTENT ON THE HOMEPAGE” FOCUS ON WHAT HE/SHE IS DOING AND NOT THE STORY: “REGULAR SOLUTION READERS ARE ABLE TO EASILY SEE ALL IT FRAMES THE NEWS CONTENT” PROBLEMS TO LATER SOLVE THEM Wednesday, September 8, 2010
  21. 21. THEME OUT YOUR STORIES COLLECT ALL YOUR STORIES AND GROUP THEM INTO THEMES PRIORITIZE THEM BASED ON PROJECT GOALS AND PRIMARY USERS. Wednesday, September 8, 2010
  22. 22. USER NEEDS - PERSONAS FICTITIOUS OR REAL CHARACTERS THAT ARE CREATED TO REPRESENT THE DIFFERENT TYPES OF USERS THAT WILL BE USING YOUR SITE. Wednesday, September 8, 2010
  23. 23. WHY PERSONAS HELPS YOU DEFINE THE PEOPLE WHO ARE GOING TO USE YOUR WEBSITE SPEAKS VOLUMES AND MAKES YOUR CLIENT LISTEN TO THE NEEDS OF THE USER. SHOWS OFF THE USER CREATES A COMMON LANGUAGE AMONG YOUR CLIENT AND ANYONE INVOLVED ABOUT THE ASPECTS OF THE WEBSITE. Wednesday, September 8, 2010
  24. 24. Wednesday, September 8, 2010
  25. 25. USABILITY TESTS & FEEDBACK IF YOU DON’T HAVE ENOUGH INFORMATION ABOUT USERS, DO THIS BEFORE YOU CREATE PERSONAS GET FURTHER UNDERSTANDING OF USER NEEDS WILL FIND FEATURES YOU MAY OF OVERLOOKED GIVES FEEDBACK TO THE DESIGNERS Wednesday, September 8, 2010
  26. 26. USABILITY TEST EXAMPLE Wednesday, September 8, 2010
  27. 27. STRATEGY A FEW THINGS ABOUT THIS PHASE Wednesday, September 8, 2010
  28. 28. THINGS TO KEEP IN MIND PROVIDE ADDITIONAL CONTEXT TO YOUR DESIGN REASSURES GOALS OF THE WEBSITE ARE BEING MET HELPS IN WORKING WITH THE CLIENT’S BOTTOM LINE AND MARKETING Wednesday, September 8, 2010
  29. 29. STRATEGY - COMPETITIVE ANALYSIS WHAT MAKES YOUR WEBSITE DIFFERENT THAN YOUR COMPETITORS? Wednesday, September 8, 2010
  30. 30. COMPETITIVE ANALYSIS - LAYOUT & USER FLOW Wednesday, September 8, 2010
  31. 31. COMPETITIVE ANALYSIS - LANDSCAPE Wednesday, September 8, 2010
  32. 32. CONTENT INVENTORY THE FUNNIEST PART OF CREATING A WEBSITE Wednesday, September 8, 2010
  33. 33. STRATEGY - CONTENT INVENTORY GIVES SCOPE OF CONTENT ON THE WEBSITE YOU ARE IMPROVING. VITAL STEP IN CLEANING OUR YOU CONTENT HELPS IN BUILDING A LEANER NAVIGATION & INFORMATION ARCHITECTURE HELPS IN WEEDING OUT CONTENT THAT DOES NOT GO WITH THE MARKETING STRATEGY OR MESSAGE. Wednesday, September 8, 2010
  34. 34. CONTENT INVENTORY EXAMPLE Wednesday, September 8, 2010
  35. 35. OTHER STEPS IN STRATEGY ORGANIZE YOUR CONTENT - INFORMATION ARCHITECTURE CARD SORTING CAN HELP Wednesday, September 8, 2010
  36. 36. DESIGN TIME TO ADD IT UP Wednesday, September 8, 2010
  37. 37. PUT YOUR HOMEWORK INTO ACTION CREATE WIREFRAMES USABILITY TESTS AGAIN IF NEEDED Wednesday, September 8, 2010
  38. 38. WIREFRAMES Wednesday, September 8, 2010
  39. 39. THE RESULT Wednesday, September 8, 2010
  40. 40. FINAL WORD ON UX THESE STEPS WILL GROUND YOUR PROJECT INTO THE REAL WORLD AND NOT DESIGN IN A VACUUM. Wednesday, September 8, 2010
  41. 41. YOU’RE NUTS! Wednesday, September 8, 2010
  42. 42. A HAPPY CLIENT Wednesday, September 8, 2010
  43. 43. THANK YOU Wednesday, September 8, 2010

×