UX Design Process

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

13. Analysis
Collecting information about the problem
əˈnalɪsɪs

14. əˈ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

15. əˈnalɪsɪsAnalysis
Competitive Analysis
• Benchmarking similar products / competitor

16. əˈnalɪsɪsAnalysis
Trend Analysis
• Spot the latest trend and find out why they
do it that way
• patterntap.com
• uxporn.uxpin.com
• pttrns.com

17. ˌʌɪdɪˈeɪʃ(ə)nIdeation
The formation of ideas or concepts.

18. ˌʌɪdɪˈeɪʃ(ə)nIdeation
Doodle!
• Sketch your ideas. Proven to be the fastest UX solutions
• Adaptive Path's Sketchboard

19. ˌʌɪdɪˈeɪʃ(ə)nIdeation
Screenflow
• Create relationships.
Between pages,
screens, components

20. dɪˈzʌɪnDesign
The fun part.

21. 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

22. dɪˈzʌɪnLo-fi wireframes
Tools: UXPin, Balsamiq, Axure, OmniGraffle.
Design

23. dɪˈzʌɪnDesign
Visual Design
• Communicates the brand, interactivity, workflow, and
relationships
• Consistently apply these styles to every instance of each
element

24. dɪˈzʌɪnVisual design
Design

25. ˈprəʊtətʌɪPrototyping
Making it work

26. ˈprəʊtətʌɪPrototyping
• Deliver prototypes of concept models for testing by the
usability engineer.
• Increasing process efficiency

27. ˈprəʊtətʌɪ
UXPin
Prototyping: Tools

28. ˈprəʊtətʌɪ
inVision
Prototyping: Tools

29. ˈprəʊtətʌɪ
Proto.io
Prototyping: Tools

30. ˈprəʊtətʌɪ
Axure
Prototyping: Tools

31. dɪˈzʌɪnPrototyping
Tools
• UXPin - uxpin.com
• inVision - invisionapp.com
• Proto.io - proto.io
• Axure - axure.com

32. ˈdɒkjʊm(ə)ntDocument
Making documents and specifications of the user experience.
Making it easier for developer to understand how it works

33. ˈɪmplɪm(ə)ntImplement
Working with the developer to make sure they
deliver the application / website as designed

34. dɪˈplɔɪDeploy
You can relax now. But is it over?

35. But this is the easiest way to explain what UX is
Never mind the fact that they use
comic sans

36. Reza Prabowo
Full-time Cyclist, part-time UX Designer
behance.net/RezaPrabowo