Nathasit Wajasittisilp - CMO of The Lifestyle 21 Co., Ltd. This work shop has been specifically provided for @Hubba - Coworking space in Thailand during Jelly Week of 2013. Material is about concept of mobile UX design and wireframe which create impact for stakeholders even more than you can think of.

2. Mobile UX concept
& wireframing
Date: Jan 16, 2013
By: Nathasit Wajasittisilp – Co-founder
Source: The Lifestyle 21 Co., Ltd.
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

3. Management Profile
Nathasit Wajasittisilp
Chief Marketing Officer Ph.D. Tharis Thimthong
& Co-founder Chief User Experience (UX)
15 yrs exp – Usability research,
13 yrs exp - Brand management,
Software development and
iOS architecture and Lean UX
interactive media tools.
development.
Pee Thongsinchareon Chanin Manochayakorn
Chief Creative Designer Chief software engineer
4 yrs exp – Mobile UI design and 12 years in software, e-commerce
8 yrs exp in consumer insight and solution, mobile application
marketing research from Global development.
Research firm.
Panprida Yomjinda Krit Plianpae
Business development mgr. Chief iOS engineer
4 yrs exp – Business development 10 yrs exp - E-commerce solutions, 4
In various service business sectors yrs exp – iOS application
development,
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

4. Management profile
2010 – 2013 – CMO – The Lifestyle 21 Co., Ltd. (Digital agency)
2012 – 2013 – Speaker – Business canvas & Lean UX design (KMUTT)
2006 – 1010 – Group brand manager “Siam Winery” (Mont Clair)
2004 – and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas Thailand” (Unif)duplicated without
Confidential 2006 – Strategic business unit mgr. “Uni-President and creativity which cannot be
permission.

5. Management profile
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

6. Management profile
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

7. Our experiences
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

8. iPad presentation tools
Objective:
-To give support insurance sales
team for total Thailand
Solutions:
- Simplified insurance premium
calculation.
- Pre-screening tools for part-time
insurance agent.
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

9. iPad – Sales management
Objective:
- To streamline sales ordering
process
- To give instant sales
performance
insight for sales supervisor /
MGT
Solutions:
- Revolutionized sales order
interface
- Infographic driven report
- Instant internal communication
tool
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

10. iPad application – eBook Arena
Objective:
-To sell book through iPad
application
Solutions:
- Simplified and newly innovative
way of reading eBooks.
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

11. iPad – Sales management
Objective:
- To streamline sales ordering
process
- To give instant sales
performance
insight for sales supervisor /
MGT
Solutions:
- Revolutionized sales order
interface
- Infographic driven report
- Instant internal communication
tool
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

12. iPhone application – Location
based
Objective:
- With alcohol drinking communication was
restricted,
it’s a hard time for communication via mass
media.
Solution:
- Location based push notification enable
brand to
communicate with customers @ the spot
they want
talk to customers.
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

13. iPhone application – TV streaming
Objective:
- To enable DTAC (leading mobile operator in
TH) promoting movie on demand and Live
stream TV.
Solution:
- Real-time streaming TV program from
satellite
- VDO on-demand with payment module
- Customer profile and payment history
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

14. iPhone application – LH Living+
Objective:
- To help Land & Houses (A leading real estate
developer in Thailand) better communicating with
their prospect and home owners.
Solution:
- Location-based communication system for
customization message for particular
customers/prospects.
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

15. Objectives
User-Experience:
• Understanding differences in UI and UX
• UX design concept & model
• Factors affecting UX design
Wireframing:
• What the hell is Wireframe?
• How to do it?
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

16. Difference between UI & UX
User interface design (UID) is the
practice of planning and shaping the
form present between a product idea
and its user, with particular focus on
key interactive features or
characteristics such as textures,
shapes,(visual design) deals with the specific user
UI design knobs and buttons.
interface(s) of a product or service.
Dan Saffer Diagram of User Experience Design,
Source: http://www.quora.com/Dan-Saffer
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

17. Difference between UI & UX
User-experience design (UXD) is a
broad term used to explain all
aspects of a person’s experience
with the system including the
interface, graphics, industrial design,
physicaldeals with the overall subjective
UX design interaction, and the
manual.”associated with the use of a product or
experience
service.
Dan Saffer Diagram of User Experience Design,
Source: http://www.quora.com/Dan-Saffer
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

18. UX design concept
Dan Saffer Diagram of User Experience Design,
Confidentialhttp://www.quora.com/Dan-Saffer
Source: and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

19. UX design concept
The UI can be a component of UX,
but many user experiences don't have UIs.
The design of a UI will be heavily informed by the
UX design.
The UX design will be less informed by the UI.
Dan Saffer Diagram of User Experience Design,
Confidentialhttp://www.quora.com/Dan-Saffer
Source: and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

20. UX design
Development model

21. UX design model – Five Planes
The Five Planes of Garre
The Surface Plane
Software Interface as a Task
On the surface you see a
series of Web pages, made
Hypertext system as a
up of images and text.
The Skeleton Plane
Beneath that surface is the
skeleton of the site: the
Information
placement of
buttons, tabs, photos, and
locks of text.
The Structure Plane
The skeleton is a concrete
expression of the more
abstract structure of the site.
The Scope Plane
The structure defines the
way in which the various
features and functions of the
site fit together
The Strategy Plane
The scope is fundamentally
determined by the strategy
Confidential and for internal user only.
of the site.
The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

22. User experience design process
User Content Iterative design & Prototype
Resear Strategy development specificati
ch on
Info, Compare Multiple Test, handover
Planner, Prioritize, A/B Test, ASEQ, NPS
Gather, Visual, Interactive
Measure Technique HTML,
TEST Program
Spec.
PROTO
CONT TYPE
USER ENT UXD
RESE SKET PROTO
ARCH STRA CH TYPE
TEGY
VISUA
L
WIREF DESIG
RAME N
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

23. Selection model of five plane
The UX development model of
A betterJ. J.
Garrett approach is to have work on
each
plane finish before work on the next
can finish
The ripple effect means that
choosing an “out of bounds” option
on an upper plane will require SOURCE :
rethinking decisions on lower planes
GARRETT J.J.
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

24. Where to start?
Mobile
User
Users App Client
• Demographic • Information • Business
• Psychographic Architecture objectives
• Current, New, • Type of content • Marketing
Ex • Function objectives
• Value V.S. specification • Value
expectation • API specification proposition
• Past experience • Interface design • Strategic
• Client’s • Navigation design decision
knowledge • Information • Budget
• Learning curve design • Timeline
• Usage • HA / Non-HA • Client
design expectations
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

25. Factors in Mobile app
development
Physical Software Peripher
constrai constrai al
nt nt devices
• Screen size / • Operating • Bluetooth
resolution system keyboard
• Button • Version of UI • Paired devices
• Features • Default UI • Connected
(i.e. • Default API (i.e. devices
NFC, Accelerom twitter) • GPS assisted
eter, face • Command (i.e. • Watches
detection Gesture) • Camera
censor) • Copyright /
• Camera Patent
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

26. Where to start?
Competit System
Usage ion & staff
• Environment • Competitors’ • Current
• Cellular / Wifi offering infrastructure
coverage • Communication • Current
• Data plan channel manpower
• Occasion • Share of voice • Type of
• Completion • Share of usage technology
speed • Communication
• Social flow
interaction • IT staff
knowledge
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

27. Where to start?
Eco-
syste
m
Mobile
Users User
App Usage
&Client
infra-
Competition
struct
ure
Corporate politic
start here!
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

28. Options of UX design is
“UX pattern”
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

29. • Mobile-patterns.com
• Theultralinx.com
• Pttrns.com
• mobiletuxedo.com
• mobiledesignpatterngallery.com
• lovelyui.com
• Patternsofdesign.co.uk
• androiduipatterns.com
& much more from Professor Google
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

30. Wireframing
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

31. What is the Wireframe?
A wireframe, also known as a page
schematic or screen blueprint, is a
visual guide that represents the
skeletal framework of a website,
mobile or TV screen.
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

32. Benefits for external parties
Mobile
User
Users App Client
• Trial • Data & field • Manage
• Preference mapping expectation
• Comparison • Information • Minimize
• Concept design fitting surprise
• Navigation testing • Mutual
• Work flow testing understanding
• Gesture testing • Concept test
• Boss approval
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

33. Benefits for internal parties
Designe Project Program
r manager mer
Physical: • Tracking Understanding
• Screen size • Version control of
testing • Manage multiple 1.Human Action
• Visual / reading parties 2.Non-Human
testing • Manage Action
• Default UI understanding 3.Navigation
correction among 4.Transition
• Mutual stakeholder 5.Loading & alert
understanding 6.System flow
• Specific
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

34. Sample of paper & pencil
Things to write
down:
- Purposes
- Element
- Information/ field
- Action button
- Navigation
- Loading/ Alert
- Work flow
- Default actions
- Non-Human
action
- Scale
- Page / Date/
Version
- Reference idea/
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

35. Sample of paper & pencil
Things to write
down:
- Purposes
- Element
- Information/ field
- Action button
- Navigation
- Loading/ Alert
- Work flow
- Default actions
- Non-Human
action
- Scale
- Page / Date/
Version
- Reference idea/
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

36. Wireframing - Paper mock-up
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

37. Wireframing – Data structure
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

38. Wireframing – Data structure
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

39. Wireframing – Power Point mock-
up
Objective:
HOME Name: Last sync: May 31, 2012 Sync now
: All customers From - To 1.
0. 1. 2. 3. 4. 5. 6. 7.
(IN) IV) (IN-RV) (sales report)
2.
(Control panel)
: :
:
:
: :
:
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

40. Wireframing – Power Point mock-
up
HOME Name: Last sync: May 31, 2012 Sync now
: From - To
0. 1. 2. 3. 4. 5. 6. 7.
(IN) IV) (IN-RV) (sales report)
: :
:
•15,350 • IN: 4,500,250 • - - 7,600
•45,350,000 • RV: 3,125,000 • - - 8,240
•Remain: 1,375,250 • - - RS): 3,500
•18-46-0 CHINA: 6,000
•18-46-0_ USA: 43,250
•18-46-0_Russia: 50,000
:
: :
• RV: 3,125,000
• 3,000 • - - 7,600
• 1,850 • - - 8,240
• 1,150 :
• • - - RS): 3,500
• •18-46-0 CHINA: 6,000
• •18-46-0_ USA: 43,250
•18-46-0_Russia: 50,000
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

41. Wireframing – Screen prototype
(Adobe)
Note:
1.
2.
FG14,
FG15
3.
• =
• =
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

42. Source of Wireframe tools
• Justinmind.com
• Mockflow.com
• Pidoco.com
• Hotgloo.com
• Visio
• InDesign
• Photoshop
• Powerpoint
• Pencil & paper
& much more from Professor Google
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

43. Case study of UX design
Maximiz Increase
e attractiven
Utilities ess of UX
Mobile
Banking
Enhanc
e User-
friendlin
ess
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

44. Exercise
1.Design UI of mobile banking
application
2.UX design for Log-in module
3.Fifteen-minutes
4.Group into 5 people a group
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

45. REAL CASE STUDY
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

46. Mobile Banking UX design:
“User authentication model”
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

47. Authentication model
1. Something the user knows 1. Something the user knows
2. Something the user has. 2. Something the user has.
3. Something the user is.
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

48. Two-factor authentication
Something we know Something we have
Username Password Phone number Phone ID
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

49. Authentication method 1
Something we know Something we have
Username Password Phone number Phone ID
Pros: - Work on WiFi and 3G
Con: - Need OTP to verify account owner
- Mid-Low security level
- User Action +2
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

50. Authentication method 2
Something we know Something we have
Username Password Phone number Phone ID
Pros: - Work on WiFi and 3G
Con: - Need OTP to verify account owner
- User Action +2
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

51. Authentication method 3
Something we know Something we have
Username Password Phone number Phone ID
Pros: - User Action -2
- No more OTP.
- High security level (Prevent package sniffer on WiFi AP)
Con: - Work on only cellular data (3G or Edge)
- Need process to register device and set password on ATM or Bank Counter
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

52. The rest of materials contains
highly confidential data of client
which are unable to reveal, please
join my next session @ Hubba
or give me a call for your
corporate workshop for better
MOBILE UX DESIGN in actions.
Follow me at
www.facebook.com/iztyle.me
Confidential and for internal user only. The Lifestyle 21 Co., Ltd. reserved the rights to its exclusivity, original ideas and creativity which cannot be duplicated without
permission.

53. For more information, please contact
Nathasit W. – Co-founder
nathasit@thelifestyle21.com
082-655-4545