DOING YOUR HOMEWORK
            A UX APPROACH TO YOUR
                  WEB DESIGN
                                     BY...
THE PROBLEM




Wednesday, September 8, 2010
Wednesday, September 8, 2010
Wednesday, September 8, 2010
Wednesday, September 8, 2010
Wednesday, September 8, 2010
THE PROBLEM WITH CLIENTS

              TOO MANY CHIEFS NOT ENOUGH INDIANS

              DIFFERENT PERSPECTIVES & DIFFERE...
WTF!?

Wednesday, September 8, 2010
YOU’RE NUTS!

Wednesday, September 8, 2010
BREAK IT DOWN


Wednesday, September 8, 2010
BREAK IT DOWN

              MOST CLIENTS SEE THINGS ABSTRACTED, INSIDE OUT VIEW OF
              THE THE PROJECT

       ...
THE USER EXPERIENCE (UX)


              Definition
                  User Experience design (UX) is a process
            ...
IN ENGLISH

              DESIGNING SOMETHING FROM THE PERSPECTIVE OF THE
              PEOPLE WHO ARE GOING TO USE IT



...
UX PROCESS IS EXTENSIVE




              IT’S FOR GOOD REASON      NO PHOTOSHOP
              REQUIRES YOU TO DO YOUR
   ...
CREATE A DESIGN STRATEGY



              CREATE A DESIGN
              DOCUMENT AND BREAK IT
              DOWN IN PHASES...
USER NEEDS


              ASK THE RIGHT QUESTIONS TO YOUR CLIENT

                  WHO IS THE SITE FOR?

               ...
USER NEEDS



              AFTER MEETING WITH THE
              CLIENT, BRAINSTORM:

                  WHO ARE THE USERS
...
USER NEEDS - USER FLOWS


              HELPS YOU UNDERSTAND WHAT A TYPE OF USER WILL GO
              THROUGH TO FIND SOM...
USER FLOW EXAMPLE


Wednesday, September 8, 2010
USER NEEDS - USER STORIES

              SHORT STATEMENTS         EXAMPLE
              THAT INCLUDE THE ROLE
            ...
THEME OUT YOUR STORIES



              COLLECT ALL YOUR
              STORIES AND GROUP
              THEM INTO THEMES

 ...
USER NEEDS - PERSONAS



              FICTITIOUS OR REAL
              CHARACTERS THAT ARE
              CREATED TO REPRE...
WHY PERSONAS



              HELPS YOU DEFINE THE PEOPLE WHO ARE GOING TO USE YOUR
              WEBSITE

              S...
Wednesday, September 8, 2010
USABILITY TESTS & FEEDBACK



              IF YOU DON’T HAVE ENOUGH INFORMATION ABOUT USERS, DO
              THIS BEFORE...
USABILITY TEST EXAMPLE




Wednesday, September 8, 2010
STRATEGY
                               A FEW THINGS ABOUT THIS PHASE



Wednesday, September 8, 2010
THINGS TO KEEP IN MIND

              PROVIDE ADDITIONAL CONTEXT TO YOUR DESIGN

              REASSURES GOALS OF THE WEBS...
STRATEGY -
                           COMPETITIVE ANALYSIS



              WHAT MAKES YOUR
              WEBSITE DIFFEREN...
COMPETITIVE ANALYSIS - LAYOUT & USER FLOW


Wednesday, September 8, 2010
COMPETITIVE ANALYSIS - LANDSCAPE


Wednesday, September 8, 2010
CONTENT INVENTORY
                          THE FUNNIEST PART OF CREATING A WEBSITE



Wednesday, September 8, 2010
STRATEGY -
                               CONTENT INVENTORY

              GIVES SCOPE OF CONTENT ON THE WEBSITE YOU ARE
 ...
CONTENT INVENTORY EXAMPLE


Wednesday, September 8, 2010
OTHER STEPS IN STRATEGY


              ORGANIZE YOUR CONTENT - INFORMATION ARCHITECTURE

                  CARD SORTING C...
DESIGN
                               TIME TO ADD IT UP



Wednesday, September 8, 2010
PUT YOUR HOMEWORK
                               INTO ACTION



              CREATE WIREFRAMES

              USABILITY T...
WIREFRAMES


Wednesday, September 8, 2010
THE RESULT


Wednesday, September 8, 2010
FINAL WORD ON UX
               THESE STEPS WILL GROUND YOUR PROJECT INTO THE REAL
                       WORLD AND NOT DE...
YOU’RE NUTS!

Wednesday, September 8, 2010
A HAPPY CLIENT

Wednesday, September 8, 2010
THANK YOU



Wednesday, September 8, 2010
Upcoming SlideShare
Loading in …5
×

Doing Your HW - A UX approach to your web design

1,350 views
1,178 views

Published on

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,350
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×