When Mobile meets UX/UI powered by Growth Hacking Asia

Preview:

Citation preview

Growth Hacking Asia

Growth Hacking Asia

@GrowthHackAsia

Growth Hacking Indonesia

Powered by

Farah Nuraini

Designing for Mobile UX

Workshop

Designing for Mobile UX

Farah Nurainifarah.nuraini@gmail.com

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 Process

1 2 3 4

Research Analysis & Synthesis

Develop Solution

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 information

Cons • Exhausted Resources

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

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

Research

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

Analysis & SynthesisValidate 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.

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 solution

An 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!