Designing for Mobile – An Overview of Early Stage UX Processes
Designing for Mobile: Early Stage UX Design Process
-
Upload
raine-qian -
Category
Mobile
-
view
491 -
download
0
description
Transcript of Designing for Mobile: Early Stage UX Design Process
![Page 1: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/1.jpg)
DESIGNING FOR MOBILE EARLY STAGE UX DESIGN PROCESSRaine Qian
![Page 2: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/2.jpg)
HI, I AM RAINE QIAN
Mobile UI and UX designer
Manager of Product Design at Pivotal Labs
@RaineQian
![Page 3: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/3.jpg)
WHAT IS UX?
User experience is how a person feels when interacting with a particular product, system or service.
BEHAVIORS EMOTIONSATTITUDES
![Page 4: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/4.jpg)
UX is a Systerm
![Page 5: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/5.jpg)
USABILITY
Usability is how easy, efficient and enjoyable a human-made object is to use.
![Page 6: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/6.jpg)
5 E of Usability
• Ease of learning : Learnability and Memorability
• Engagement
• Efficiency
• Effectiveness
• Error Tolerance
![Page 7: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/7.jpg)
THE DISCIPLINES OF USER EXPERIENCE DESIGN
![Page 8: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/8.jpg)
PSYCHOLOGY: LOSS AVERSION
The strong tendency in humans to avoid loss, over and above their desire to acquire gains.
![Page 9: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/9.jpg)
OPTION 1 OPTION 2
Save $300/year.
Buy this widget!
Stop losing $300/year.
Buy this widget!
![Page 10: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/10.jpg)
COGNITION: PERIPHERAL ATTENTION
Peripheral vision has faster reaction for detecting motion in objects.
![Page 11: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/11.jpg)
INVASIVE EFFECTIVE
!!
![Page 12: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/12.jpg)
UX DESIGN INCLUDES ALL KINDS OF DESIGN THINKING FOR AN END USER.
![Page 13: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/13.jpg)
MOBILE
![Page 14: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/14.jpg)
MOBILE VS. DESKTOP
![Page 15: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/15.jpg)
DESKTOPMOBILE
• Predictable environments
• Predictable inputs
• Large interface
• For detailed tasks
• Variable environments
• Limited input system
• Smaller interface
• In multitasking scenarios
![Page 16: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/16.jpg)
LEAN FORWARD & LEAN-BACK EXPERIENCES
![Page 17: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/17.jpg)
• Engaging
• Requires increased
interaction
LEAN FORWARD
![Page 18: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/18.jpg)
• Low level of engagement
• Consumption mode
• Longer attention span
LEAN BACK
![Page 19: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/19.jpg)
LEAN BACK APPS LEAN FORWARD APPS
![Page 20: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/20.jpg)
DESIGN PROCESS
Identify the right problem for the right user
UNDERSTAND CREATE
![Page 21: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/21.jpg)
1. Inception
2. Discovery
3. Framing
4. Visual & Interaction Design
5. Implementation
DESIGN PROCESS
Feedback +
Iteration
![Page 22: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/22.jpg)
IN THE EARLY STAGES
Goals
End Users
Use Cases, Scenarios
User Needs, Wants, Motivations
Technical Feasibility
Deep Understanding
![Page 23: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/23.jpg)
GOALS
• What is the Purpose of the App?
• Client’s Goals User’s Goals
• Stay Focused and Prioritize
![Page 24: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/24.jpg)
LEAN VALIDATION WORKSHOP
• Collaborative with key
stakeholders
• Product proposition
• Feature prioritization
![Page 25: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/25.jpg)
END USERS
• End user behavior
• Personas
• Focus on target user group
![Page 26: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/26.jpg)
ETHNOGRAPHIC RESEARCH
• Observe target users in real
world setting
• Get insight into habits,
preferences and behavior
• Conduct your own practical
research
![Page 27: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/27.jpg)
USE CASES, SCENARIOS
• Workflows
• Social context
• Environmental factors
• Errors or edge cases
![Page 28: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/28.jpg)
PROJECT EXAMPLE
Universal Mobile Payment App
![Page 29: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/29.jpg)
STORYBOARDING
A method used to communicate ideas and create a sense of shared context and purpose.
![Page 30: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/30.jpg)
USER EXPERIENCE MAP
A visual representation that illustrates a user’s activity flow, mental status, expectations, and actions for a particular goal.
![Page 31: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/31.jpg)
USER NEEDS, WANTS & MOTIVATIONS
• Know the needs and unvoiced desires
• User interviews
• Dig below the surface
![Page 32: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/32.jpg)
PROJECT EXAMPLE
Designing An App For
A Cruise Ship
![Page 33: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/33.jpg)
ONSITE USER RESEARCH
![Page 34: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/34.jpg)
RESULTS OF CUSTORMER PRIMARY NEEDS
Assumed:
Fun activities on the cruise ship
Actual:
Communicating with fellow travellers
![Page 35: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/35.jpg)
TECHNICAL FEASIBILITY
• Balance between design and engineering
• Agile style and communication
• Willingness to think about the future
![Page 36: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/36.jpg)
ALWAYS REMEMBER WHO YOU ARE DESIGNING FOR AND WHY ARE YOU DESIGNING IT.
![Page 37: Designing for Mobile: Early Stage UX Design Process](https://reader034.fdocuments.in/reader034/viewer/2022052315/5565a95ad8b42a083a8b4e13/html5/thumbnails/37.jpg)
THANK YOU