2 hours training on Mobile UX with Farah Nuraini, Interaction Designer at Traveloka, Indonesia 45 min theory: Research, Analysis, Design solutions and Testing + 1h15 min of hands-on exercises with the 5 facilitators from Traveloka.

1. Growth Hacking Asia
Growth Hacking Asia
@GrowthHackAsia
Growth Hacking Indonesia
Powered by
Farah Nuraini
Designing for Mobile UX
Workshop

2. Designing for
Mobile UX
Farah Nuraini
farah.nuraini@gmail.com

3. 43% people use a smartphone.

4. 65% people access the internet via smartphone

5. Smartphone has become our primary needs

6. How?
• Offer solution to problems that people have
• Pay attention to UX so people could use it easily
without creating new problem

7. However…

8. Not every problem is
solved by app

9. Does the problem need to be solved?
Is it urgent?
Is it the root cause or just a byproduct?

10. What to do?
We need to validate the problem

12. Design Process
1 2 3 4
Research Analysis &
Synthesis
Develop
Solution
Testing

13. Research
Validate Problem
1 2 3 4

14. Research
Research
• Observe and empathize with people and their
conditions

15. Research
Why Research
• To get inspiration on making new innovation
• To understand better about our potential users

16. Research
Survey
Share a set of questions to certain group of people to get insight
from their answers.
Pros
• Can get lots of data
from many participants
• Breadth information
Cons
• Sometimes unreliable
• Cannot get deeper
information than what
we ask

17. Research
User Interview
Selecting some candidates (around 4 candidates per user
segments) based on certain criteria and have conversations with
them
Pros
• Can elaborate our
questions when participant
says something interesting
• Deeper information
Cons
• Exhausted Resources
(energy, time, etc.)
• Must sync the schedule

18. Research
Ethnographic Research
Researchers go to the places where people whom they study
do their activities. Could be high or low efforts.
Pros
• Can see what our target users
normally do in their real environment
• rich information
Cons
• Take times
• Not quite flexible place
• Need to gain trusts from the people we observe

19. Research
And many more…
stakeholder research, competitor analysis, etc.

20. Analysis & Synthesis
Validate Problem
1 2 3 4

21. Analysis & Synthesis
Analysis & Synthesis
Analysis: the procedure by which we break down an
intellectual or substantial whole into parts or components
Swedish Morphological Society
Synthesis: combine separate elements or components in
order to form a coherent conclusion.

22. Analysis & Synthesis
Analysis + Synthesis
Data Insights

23. Analysis & Synthesis
Analysis & Synthesis
• Persona
• User Journey

24. Analysis & Synthesis
Persona
• Persona is archetype of a certain group of people,
modeled as a specific person based on research.
• Proto-persona is persona which built based on
hypothesis as a base for persona.

25. Analysis & Synthesis
Why persona?
• Build empathy
• Focused target user
• Easier communication to prioritize which problem
need to be solved
• As a base for defending an argument

26. Analysis & Synthesis
Component in Persona
• Picture + Name + Quote
• Demographic
• Background
to empathize know what we would help
know how we would help
• User Goals and Needs
• Behavior
• Limitation
• etc.

27. Source: Content Marketing Institute

28. Analysis & Synthesis
User Journey
User Journey is a series of steps that describes the
journey of a user by representing the different
touchpoint that characterize user’s interaction with the
service

29. Analysis & Synthesis
Why User Journey?
• Identify problem that need to be solved
• Identify opportunities for innovation or improvement
• Show how user do their activities and interact with
system
• Highlight different user segments experience

30. Analysis & Synthesis
User Journey
Elements in User Journey
• Stage — Phases that users always go through to reach their goal
• Motivation — What users try to achieve in certain stage
• Touchpoints — Points of interactions between user and system
where user try to reach goal
• Emotion — What user feels when interacts with system
• Problems — the cause of negative emotion
• Opportunities — Possibility ways to solve the problems

31. ShopifyNation

32. Design Solutions
Develop Solution
1 2 3 4

33. Design Solution
Solve problems while considering understandability,
usability, distinction, aesthetics of the solution
An Introduction to Service Design: How to Have Your Cake and Eat It Too

34. Design Solution
Design
• Sketch: Basic concept on how the app will work
• Wireframe: Visual guide that represents the outline of
interfaces
• Mockup: static design representation of UI

35. Design Solution
Design
• Start with Minimum Viable Product (MVP)
• Start with sketching

36. Design Solution
Why sketching?
• makes you think and work faster
• easier to refine
• low cost to change
• perfect for brainstorming

37. Design Solution
Brainstorming
come up with creative solutions to problems quickly
https://developers.google.com/design-sprint/downloads/
DesignSprintMethods.pdf
Further study:

38. Testing
Validate Solution
1 2 3 4

39. Testing
Why Testing
• To learn more about your users
• To discover critical design issues
• To refine your solution ideas as soon as possible

40. Testing
Level of Fidelity
• low — concept design on paper
• middle — solution in form of wireframe
• high — design with color

41. Testing
User Testing
• Concept testing—sketch
• Solution Testing—wireframe/paper prototype
• look & feel testing — complete UI with colors and
micro interaction

42. Testing
What to prepare?
• Target — what criteria of participants will be your target?
• Goal(s) — what do you want to test?
• Method(s) — Define how you would inquire the answer
from participants (Observation? Question?)
• Scenario — Story which you tell the participants so they
could imagine the real situation.
• Stakeholders — who need to know the results?
• Equipment needed

43. Testing
Scenario
• Do not directly tell users what they have to do with
UI
“You are going to Pluit from Kebayoran by bus.
You wait for the bus at the bus stop close to
your house. How do you know when the next
bus arrive?”
“Open the map from homepage.”

44. Testing
Research Questions
• Ask open-ended questions
• Make sure you ask just about enough questions

45. Testing
Tips in conducting testing
• Prepare your script
• Do pilot testing
• Bring observer with you
• Guide user to do their task when they get
distracted.
Further study: https://library.gv.com/get-better-data-from-user-studies-16-interviewing-
tips-328d305c3e37#.w8k7x2awq

46. Testing
Solution works?

47. Final notes…

48. Reminder
To solve problems we need to:
• research
• analyze & synthesize
• design solution
• test
This process can be done as simple as possible based on
your need and resources.

49. Exercise

50. Exercise
• Find opportunities according to each problems (5
minutes)
• Discuss with your group to pick one opportunities
you want to develop (10 minutes)

51. • Sketch the solution based on one of the
opportunities you find in the user journey you have
created (20 minutes)
Exercise

52. • define one test question and test with someone
from another group (15 minutes)
Exercise

53. Presentation Time!