designing mobile ux
TRANSCRIPT
Growth Hacking Asia
Growth Hacking Asia
@GrowthHackAsia
Growth Hacking Indonesia
Powered by
Farah Nuraini
Designing for Mobile UX
Workshop
43% people use a smartphone.
65% people access the internet via smartphone
Smartphone has become our primary needs
How?• Offer solution to problems that people have
• Pay attention to UX so people could use it easily without creating new problem
However…
Not every problem is solved by app
Does the problem need to be solved?
Is it urgent?
Is it the root cause or just a byproduct?
What to do?We need to validate the problem
Design Process1 2 3 4
Research Analysis &
SynthesisDevelopSolution
Testing
ResearchValidate Problem
1 2 3 4
Research
Research• Observe and empathize with people and their
conditions
Research
Why Research• To get inspiration on making new innovation
• To understand better about our potential users
Research
SurveyShare 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
Research
User InterviewSelecting 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 informationCons• Exhausted Resources
(energy, time, etc.)• Must sync the schedule
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 informationCons• Take times• Not quite flexible place• Need to gain trusts from the people we
observe
Research
And many more…stakeholder research, competitor analysis, etc.
Analysis & Synthesis
Validate Problem
1 2 3 4
Analysis & Synthesis
Analysis & SynthesisAnalysis: 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.
Analysis & Synthesis
Analysis + SynthesisData Insights
Analysis & Synthesis
Analysis & Synthesis• Persona
• User Journey
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.
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
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.
Source: Content Marketing Institute
Analysis & Synthesis
User JourneyUser 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
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
Analysis & Synthesis
User JourneyElements 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
Design SolutionsDevelop Solution
1 2 3 4
Design SolutionSolve problems while considering
understandability, usability, distinction, aesthetics of the solutionAn Introduction to Service Design: How to Have Your Cake and Eat It Too
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
Design Solution
Design• Start with Minimum Viable Product (MVP)
• Start with sketching
Design Solution
Why sketching?• makes you think and work faster• easier to refine• low cost to change• perfect for brainstorming
Design Solution
Brainstormingcome up with creative solutions to problems quickly
https://developers.google.com/design-sprint/downloads/DesignSprintMethods.pdf
Further study:
TestingValidate Solution
1 2 3 4
Testing
Why Testing• To learn more about your users
• To discover critical design issues
• To refine your solution ideas as soon as possible
Testing
Level of Fidelity• low — concept design on paper
• middle — solution in form of wireframe
• high — design with color
Testing
User Testing• Concept testing—sketch
• Solution Testing—wireframe/paper prototype
• look & feel testing — complete UI with colors and micro interaction
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
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.”
Testing
Research Questions• Ask open-ended questions
• Make sure you ask just about enough questions
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
Testing
Solution works?
Final notes…
ReminderTo 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.
Exercise
Exercise• Find opportunities according to each
problems (5 minutes)
• Discuss with your group to pick one opportunities you want to develop (10 minutes)
• Sketch the solution based on one of the opportunities you find in the user journey you have created (20 minutes)
Exercise
• define one test question and test with someone from another group (15 minutes)
Exercise
Presentation Time!