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

When Mobile meets UX/UI powered by Growth Hacking Asia

Embed Size (px)

Citation preview

Page 1: When Mobile meets UX/UI powered by Growth Hacking Asia

Growth Hacking Asia

Growth Hacking Asia

@GrowthHackAsia

Growth Hacking Indonesia

Powered by

Farah Nuraini

Designing for Mobile UX

Workshop

Page 2: When Mobile meets UX/UI powered by Growth Hacking Asia

Designing for Mobile UX

Farah [email protected]

Page 3: When Mobile meets UX/UI powered by Growth Hacking Asia

43% people use a smartphone.

Page 4: When Mobile meets UX/UI powered by Growth Hacking Asia

65% people access the internet via smartphone

Page 5: When Mobile meets UX/UI powered by Growth Hacking Asia

Smartphone has become our primary needs

Page 6: When Mobile meets UX/UI powered by Growth Hacking Asia

How?• Offer solution to problems that people have

• Pay attention to UX so people could use it easily without creating new problem

Page 7: When Mobile meets UX/UI powered by Growth Hacking Asia

However…

Page 8: When Mobile meets UX/UI powered by Growth Hacking Asia

Not every problem is solved by app

Page 9: When Mobile meets UX/UI powered by Growth Hacking Asia

Does the problem need to be solved?

Is it urgent?

Is it the root cause or just a byproduct?

Page 10: When Mobile meets UX/UI powered by Growth Hacking Asia

What to do?We need to validate the problem

Page 11: When Mobile meets UX/UI powered by Growth Hacking Asia
Page 12: When Mobile meets UX/UI powered by Growth Hacking Asia

Design Process

1 2 3 4

Research Analysis & Synthesis

Develop Solution

Testing

Page 13: When Mobile meets UX/UI powered by Growth Hacking Asia

ResearchValidate Problem

1 2 3 4

Page 14: When Mobile meets UX/UI powered by Growth Hacking Asia

Research

Research• Observe and empathize with people and their

conditions

Page 15: When Mobile meets UX/UI powered by Growth Hacking Asia

Research

Why Research• To get inspiration on making new innovation

• To understand better about our potential users

Page 16: When Mobile meets UX/UI powered by Growth Hacking Asia

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

Page 17: When Mobile meets UX/UI powered by Growth Hacking Asia

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 information

Cons • Exhausted Resources

(energy, time, etc.) • Must sync the schedule

Page 18: When Mobile meets UX/UI powered by Growth Hacking Asia

Research

Ethnographic ResearchResearchers 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

Page 19: When Mobile meets UX/UI powered by Growth Hacking Asia

Research

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

Page 20: When Mobile meets UX/UI powered by Growth Hacking Asia

Analysis & SynthesisValidate Problem

1 2 3 4

Page 21: When Mobile meets UX/UI powered by Growth Hacking Asia

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.

Page 22: When Mobile meets UX/UI powered by Growth Hacking Asia

Analysis & Synthesis

Analysis + SynthesisData Insights

Page 23: When Mobile meets UX/UI powered by Growth Hacking Asia

Analysis & Synthesis

Analysis & Synthesis• Persona

• User Journey

Page 24: When Mobile meets UX/UI powered by Growth Hacking Asia

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.

Page 25: When Mobile meets UX/UI powered by Growth Hacking Asia

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

Page 26: When Mobile meets UX/UI powered by Growth Hacking Asia

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.

Page 28: When Mobile meets UX/UI powered by Growth Hacking Asia

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

Page 29: When Mobile meets UX/UI powered by Growth Hacking Asia

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

Page 30: When Mobile meets UX/UI powered by Growth Hacking Asia

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

Page 32: When Mobile meets UX/UI powered by Growth Hacking Asia

Design SolutionsDevelop Solution

1 2 3 4

Page 33: When Mobile meets UX/UI powered by Growth Hacking Asia

Design SolutionSolve problems while considering understandability,

usability, distinction, aesthetics of the solution

An Introduction to Service Design: How to Have Your Cake and Eat It Too

Page 34: When Mobile meets UX/UI powered by Growth Hacking Asia

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

Page 35: When Mobile meets UX/UI powered by Growth Hacking Asia

Design Solution

Design• Start with Minimum Viable Product (MVP)

• Start with sketching

Page 36: When Mobile meets UX/UI powered by Growth Hacking Asia

Design Solution

Why sketching?• makes you think and work faster

• easier to refine

• low cost to change

• perfect for brainstorming

Page 37: When Mobile meets UX/UI powered by Growth Hacking Asia

Design Solution

Brainstormingcome up with creative solutions to problems quickly

https://developers.google.com/design-sprint/downloads/DesignSprintMethods.pdf

Further study:

Page 38: When Mobile meets UX/UI powered by Growth Hacking Asia

TestingValidate Solution

1 2 3 4

Page 39: When Mobile meets UX/UI powered by Growth Hacking Asia

Testing

Why Testing• To learn more about your users

• To discover critical design issues

• To refine your solution ideas as soon as possible

Page 40: When Mobile meets UX/UI powered by Growth Hacking Asia

Testing

Level of Fidelity• low — concept design on paper

• middle — solution in form of wireframe

• high — design with color

Page 41: When Mobile meets UX/UI powered by Growth Hacking Asia

Testing

User Testing• Concept testing—sketch

• Solution Testing—wireframe/paper prototype

• look & feel testing — complete UI with colors and micro interaction

Page 42: When Mobile meets UX/UI powered by Growth Hacking Asia

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

Page 43: When Mobile meets UX/UI powered by Growth Hacking Asia

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

Page 44: When Mobile meets UX/UI powered by Growth Hacking Asia

Testing

Research Questions• Ask open-ended questions

• Make sure you ask just about enough questions

Page 45: When Mobile meets UX/UI powered by Growth Hacking Asia

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

Page 46: When Mobile meets UX/UI powered by Growth Hacking Asia

Testing

Solution works?

Page 47: When Mobile meets UX/UI powered by Growth Hacking Asia

Final notes…

Page 48: When Mobile meets UX/UI powered by Growth Hacking Asia

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.

Page 49: When Mobile meets UX/UI powered by Growth Hacking Asia

Exercise

Page 50: When Mobile meets UX/UI powered by Growth Hacking Asia

Exercise• Find opportunities according to each problems (5

minutes)

• Discuss with your group to pick one opportunities you want to develop (10 minutes)

Page 51: When Mobile meets UX/UI powered by Growth Hacking Asia

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

Exercise

Page 52: When Mobile meets UX/UI powered by Growth Hacking Asia

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

Exercise

Page 53: When Mobile meets UX/UI powered by Growth Hacking Asia

Presentation Time!