Crafting Experience


Published on

UX Design Process

Published in: Design, Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Crafting Experience

  1. Crafting Experience UX Design Process and Testing @RezaPrabowo
  2. Reza Prabowo Full-time Cyclist, part-time UX Designer @RezaPrabowo
  3. What is UX? I’m pretty sure the dude before me has explained it brilliantly.
  4. But what does a UX Designer do? The Five Competencies of User Experience Design
  5. IAInformation Architecture The interface structure and navigation scheme
  6. IDInteraction Design The page-level layout, task fulfilment, and component flow
  7. UEUsability Engineering The study of discrepancies between expected and actual user behavior
  8. VDVisual Design The consistent visual treatment of elements and components
  9. VD “What people often overlook is that, for every type of user interface element the interaction designer specifies, the visual designer must design a widget or devise a corresponding style. And the visual designer must consistently apply these styles to every instance of each element throughout the application” - Steve Psomas
  10. PTPrototyping The functioning composition of proposed interactive concepts
  11. UX Design Process
  12. Analysis Collecting information about the problem əˈnalɪsɪs
  13. əˈnalɪsɪsAnalysis User Research • Surveys - Get feedback from users • User Interviews - Everyone has a story, dig them deep • User testing - Sitting users in front of your website or app and asking them to perform tasks, and to think out loud while doing so
  14. əˈnalɪsɪsAnalysis Competitive Analysis • Benchmarking similar products / competitor
  15. əˈnalɪsɪsAnalysis Trend Analysis • Spot the latest trend and find out why they do it that way • • •
  16. ˌʌɪdɪˈeɪʃ(ə)nIdeation The formation of ideas or concepts.
  17. ˌʌɪdɪˈeɪʃ(ə)nIdeation Doodle! • Sketch your ideas. Proven to be the fastest UX solutions • Adaptive Path's Sketchboard
  18. ˌʌɪdɪˈeɪʃ(ə)nIdeation Screenflow • Create relationships. Between pages, screens, components
  19. dɪˈzʌɪnDesign The fun part.
  20. dɪˈzʌɪnDesign Low fidelity wireframes • A visual guide that represents the skeletal framework of a website / application • With lo-fi wireframe, we can test and iterate design solutions faster
  21. dɪˈzʌɪnLo-fi wireframes Tools: UXPin, Balsamiq, Axure, OmniGraffle. Design
  22. dɪˈzʌɪnDesign Visual Design • Communicates the brand, interactivity, workflow, and relationships • Consistently apply these styles to every instance of each element
  23. dɪˈzʌɪnVisual design Design
  24. ˈprəʊtətʌɪPrototyping Making it work
  25. ˈprəʊtətʌɪPrototyping • Deliver prototypes of concept models for testing by the usability engineer. • Increasing process efficiency
  26. ˈprəʊtətʌɪ UXPin Prototyping: Tools
  27. ˈprəʊtətʌɪ inVision Prototyping: Tools
  28. ˈprəʊtətʌɪ Prototyping: Tools
  29. ˈprəʊtətʌɪ Axure Prototyping: Tools
  30. dɪˈzʌɪnPrototyping Tools • UXPin - • inVision - • - • Axure -
  31. ˈdɒkjʊm(ə)ntDocument Making documents and specifications of the user experience. Making it easier for developer to understand how it works
  32. ˈɪmplɪm(ə)ntImplement Working with the developer to make sure they deliver the application / website as designed
  33. dɪˈplɔɪDeploy You can relax now. But is it over?
  34. But this is the easiest way to explain what UX is Never mind the fact that they use comic sans
  35. Reza Prabowo Full-time Cyclist, part-time UX Designer