Designing for Mobile – An Overview of Early Stage UX Processes with Raine Qian Presented on September 18 2014, 2:45 - 3:30pm at FITC's Web Unleashed Toronto 2014 More info at www.fitc.ca Mobile has a huge influence in our everyday lives and behaviour; technology has evolved and we’re always “connected”, which creates so much opportunity for designers. It is essential that we (as designers) understand the mechanisms that drive human perception, cognition and behaviour, so that we can ultimately craft solutions that achieve our desired outcomes. OBJECTIVE Understanding how UX processes impact design outcomes in mobile applications TARGET AUDIENCE UI/UX Developers and Designers ASSUMED AUDIENCE KNOWLEDGE Basic UI/UX Principles FIVE THINGS THAT THE AUDIENCE WILL LEARN An overview of how Pivotal Labs approaches the Discovery process. Key considerations when designing for Mobile. An overview of early stage UX research. Understanding user personas, behaviour and use cases. How to identify the right problem(s) to solve.

1. DESIGNING FOR MOBILE
EARLY STAGE
UX DESIGN PROCESS
Raine Qian

2. HI, I AM RAINE QIAN
Mobile UI and UX designer
Manager of Product Design at Pivotal Labs
@RaineQian

3. WHAT IS UX?
User experience is how a person feels when interacting with
a particular product, system or service.
BEHAVIORS ATTITUDES EMOTIONS

4. UX is a Systerm

5. USABILITY
Usability is how easy, efficient and enjoyable a
human-made object is to use.

6. 5 E of Usability
• Ease of learning : Learnability and Memorability
• Engagement
• Efficiency
• Effectiveness
• Error Tolerance

7. THE DISCIPLINES OF
USER EXPERIENCE DESIGN

8. PSYCHOLOGY: LOSS AVERSION
The strong tendency in humans to avoid loss, over and above
their desire to acquire gains.

9. OPTION 1 OPTION 2
Save $300/year.
Buy this widget!
Stop losing $300/year.
Buy this widget!

10. COGNITION: PERIPHERAL ATTENTION
Peripheral vision has faster reaction for
detecting motion in objects.

11. INVASIVE EFFECTIVE
!
!

12. UX DESIGN INCLUDES
ALL KINDS OF
DESIGN THINKING
FOR AN END USER.

13. MOBILE

14. MOBILE VS. DESKTOP

15. MOBILE DESKTOP
• Predictable environments
• Predictable inputs
• Large interface
• For detailed tasks
• Variable environments
• Limited input system
• Smaller interface
• In multitasking scenarios

16. LEAN FORWARD & LEAN-BACK EXPERIENCES

17. LEAN FORWARD
• Engaging
• Requires increased
interaction

18. LEAN BACK
• Low level of engagement
• Consumption mode
• Longer attention span

19. LEAN BACK APPS LEAN FORWARD APPS

20. DESIGN PROCESS
Identify the right problem for the right user
UNDERSTAND CREATE

21. 1. Inception
2. Discovery
3. Framing
4. Visual & Interaction Design
5. Implementation
DESIGN PROCESS
Feedback
+
Iteration

22. IN THE EARLY STAGES
Goals
End Users
Use Cases, Scenarios
User Needs, Wants, Motivations
Technical Feasibility
Deep
Understanding

23. GOALS
• What is the Purpose of the App?
• Client’s Goals User’s Goals
• Stay Focused and Prioritize

24. LEAN VALIDATION
WORKSHOP
• Collaborative with key
stakeholders
• Product proposition
• Feature prioritization

25. END USERS
• End user behavior
• Personas
• Focus on target user group

26. ETHNOGRAPHIC RESEARCH
• Observe target users in real
world setting
• Get insight into habits,
preferences and behavior
• Conduct your own practical
research

27. USE CASES, SCENARIOS
• Workflows
• Social context
• Environmental factors
• Errors or edge cases

28. PROJECT EXAMPLE
Universal Mobile Payment App

29. STORYBOARDING
A method used to
communicate ideas and
create a sense of shared
context and purpose.

30. USER EXPERIENCE MAP
A visual representation that illustrates a user’s activity flow,
mental status, expectations, and actions for a particular goal.

31. USER NEEDS, WANTS
& MOTIVATIONS
• Know the needs and
unvoiced desires
• User interviews
• Dig below the surface

32. PROJECT EXAMPLE
Designing An App For
A Cruise Ship

33. ONSITE USER RESEARCH

34. RESULTS OF CUSTORMER PRIMARY NEEDS
Assumed:
Fun activities on the
cruise ship
Actual:
Communicating with
fellow travellers

35. TECHNICAL FEASIBILITY
• Balance between design and
engineering
• Agile style and
communication
• Willingness to think about
the future

36. ALWAYS REMEMBER WHO YOU ARE DESIGNING FOR
AND WHY ARE YOU DESIGNING IT.

37. THANK YOU