Learn the basics of lean UX, agile UX and the entire UX process for startups.

1. UX FUNDAMENTALS FOR STARTUPS
Pithan Rojanawong | VP, Head of UX Design & Analytics at Krungthai-AXA Life Insurance PCL

2. HELLO, MY NAME IS PITHAN (TOZ)
➤ Short intros
➤ Name
➤ Role
➤ Experience with UX
➤ Expectation

3. TODAY’S TOPICS
➤ What is UX?
➤ UX ≠ UI
➤ UX and Data
➤ Lean UX for Startups
➤ UX Toolkit
➤ Measuring UX
➤ Free/Affordable Tools for UX

4. SO, WHAT
EXACTLY IS
UX?
Intro to User Experience

5. “People ignore design that
ignore people

6. USER EXPERIENCE (UX)
➤ UX design is a strategic process aims to create a
product that users will find easy to use, and quickly
understand
➤ UX mindset focusing on delivering values, inspire
the right kinds of ideas, and guides decisions
➤ UX reframes the question “What do we want to
make?”, instead ask “what do we want to achieve?”
(and a bunch other questions)

7. THE UX QUESTIONS

10. “…Not functioning with a case has always been the number one
negative to Olloclip's products, so it's nice to have an option. Access
to a functional case may persuade some people who have held off
buying an Olloclip lens to try one out, and I do recommend bundling
any lens purchase with a case if you're someone who doesn't like the
risk of a naked iPhone….“
- MacRumor.com

12. UX ≠ UI
Understand The Differences

13. “A user interface is like a joke.
If you have to explain it, it’s
not that good.

15. UI User Interface
UX User Experience
How people interact with websites/mobile apps/products
How they feel while they’re using them

16. WHAT MOST UX PEOPLE DO
User research・User interviewing・
Gathering statistics・Personas・
Information architecture・Creating
wireframes・Prototyping・Usability・User
interface・Visual design・Interaction
design・Content strategy・Accessibility・
Working closely with developers・
Communication with stakeholders

17. WHAT MOST PEOPLE SEE THEY DO
User research・User interviewing・
Gathering statistics・Personas・
Information architecture・Creating
wireframes・Prototyping・Usability・User
interface・Visual design・Interaction
design・Content strategy・Accessibility・
Working closely with developers・
Communication with stakeholders

18. IMAGE: LUXR.COM

19. UX + UI TOGETHER
IMAGE: http://www.asinthecity.com

20. IMAGE: http://shittyuiuxanalogies.tumblr.com/

21. UX Designer
Product Owner
Developer
UI Designer
Marketing
Manager
Content Specialist
Business AnalystProject Manager

22. UX AND DATA
Marrying UX and Analytics

23. DATA, A (VERY) IMPORTANT PART OF UX
➤ UX is also about data-driven decision making
➤ Especially when we already have a product. E.g. a
website
➤ We can make use of web analytics data to know
where is the opportunities to improve, issues to fix

24. THE OLD WAY
➤ HIPPO (Highest Paid Person’s Opinion)

25. DATA HAS NO VALUE
➤ Data and tools have no value
➤ It’s the people who use them,
that can make the data
valuable
➤ People with analytical skill

27. 619
766
539
400
200
0
600
800
May June July
Other
Referral
Direct

28. “… is Krungthai-AXA 12PL a type of
savings or an insurance product?”
Question posted on 24 Oct 2013
The link to our website that
results in “Page not found”
because the original page no
longer exists

29. HAVE QUESTIONS THAT DATA CAN (HELP) ANSWER
➤ You can’t expect Google Analytics to tell you what to do with
your website
➤ Invest 10% in tools, 90% in people

30. UX + DATA

31. LEAN UX FOR
STARTUPS
UX for Startups

32. LEAN UX
➤ Lean UX is researching and validating your user
experience as quickly and cheaply as possible
➤ If you’re already doing UX: it’s all about getting
outcomes (good UX) rather than getting outputs
(UX documents)
➤ If you haven’t done UX: it’s all about picking the
best learning tools from UX toolkit to match your
situation

33. LEAN UX VS AGILE UX

34. WHY DO LEAN UX?
➤ UX doesn’t have to be expensive and time
consuming
➤ Many UX tools can be done very cheap
➤ There are many free/affordable tools out there

35. LEAN UX STARTING POINTS

36. LEAN UX PROCESS
IMAGE: LUXR.COM

37. UX TOOLKIT
UX Application for Startups

38. TRADITIONAL UX TOOLS
➤ User Research
➤ Personas
➤ User Journeys
➤ Card Sorting
➤ Wireframes
➤ Mockups & Prototypes
➤ A/B Testing or MVT

39. USER RESEARCH
Understand Your Users & Their Needs

40. WHY DO USER RESEARCH?
➤ It’s cheaper and faster to test assumptions and iterate with
interviews, mockups and prototypes than to do those things
after you launch a product

41. USER RESEARCH
➤ Aim to understand “What are the user needs and pain
points?”
➤ Question types determine research methodology
What do people say? What do people do?
Why? How many/often?
Self-report Observation
Few participants Many participants

42. SO MANY TYPES OF RESEARCH
SOURCE: H. MUELLER, GOOGLE AUS

43. USING SOCIAL MEDIA
➤ In many cases, we can
understand user needs from
competitors’ social media

44. USING SEARCH VOLUMES
➤ In other cases, we can make
use of how people search for
things on search engines
➤ Google AdWords provide free
tool to get this data
➤ Google Trends also help

45. INTERVIEWS
➤ Sometimes, the best way is to
talk to users
➤ Keep questions open-ended
➤ Listen, listen, and listen; avoid
interrupting users
➤ Plan who to interview (great if
we have personas!)

48. USER NEEDS
➤ …Then paraphrase quotes from your research into
format “I want to X”
“I want to online pre-
check in”
“I want to be able to
choose my flight time if
my flight is cancelled”
“I want to know what’s
happening to my flight in
unexpected extreme
weather”

49. USER NEEDS
➤ and create affinity diagram by
grouping the related needs
into groups
➤ This affinity diagram will also
help us creating personas
easier

50. PERSONAS
Create Characters from Your Users

51. PERSONAS
➤ A persona is like a character
that can represent a group of
your users with a combination
of similar demographics,
behaviours, needs, goals, etc.
➤ Good personas are realistic,
give actionable insights
➤ Good reference for future
decisions

52. PERSONAS
SOURCE: HTTP://WWW.FAKECROW.COM

53. PERSONAS
SOURCE: MICROSOFT

54. PERSONAS

62. PERSONAS
➤ Check your personas
➤ Could enough people like this
exist? If not, adjust
➤ Is this a specific person you
know? If yes, adjust

63. USER FLOWS
Understand Your User Journeys

64. USER FLOWS

65. SITE MAPS
➤ With user flows, we can create
sitemap
➤ …which can also be used to
test early on if it’s going to
work well for users

66. TREE TESTING
➤ Tree testing is a great way to
test whether our designed
content structure is really easy
for users to access desired
content

67. CARD SORTING
Designing Information Architect with Users

68. CARD SORTING
➤ Card sorting is a good tool for
getting to know how users
would group content or
features of your website or
applications
➤ Increase “findability” of the
web/app
➤ Can be done physically or with
software

69. CARD SORTING MADE EASY
➤ Prepare at least 30 cards
➤ Write down actions users can do on your website/mobile app,
in plain language
➤ Do not write a card that force category
➤ Make them know that it’s not a test, no right or wrong
➤ Observe how participants group cards
➤ When they finish, ask them to name the category in their own
words
➤ Ask them questions, try to understand their logic of grouping

70. ANALYSE CARD SORTING RESULT
➤ Standardise group names
➤ Create standardised grid to see frequency
➤ Result of card sorting is just input for us to create information
architect or sitemap that should be tested again later
➤ Card sorting won’t be useful without knowing the “why”

71. CARD SORTING DIGITALLY
➤ Service like OptimalSort
enables you to conduct card
sorting online
➤ Tools like this automatically
collect all the data and
(almost) ready for you to
analyse
➤ Downside is we don’t get to
talk or observe them like
doing it in person

72. WIREFRAMES
Making Sure Everyone’s on the Same Page

73. WIREFRAMES
➤ Wireframes are great for
communicating with all
stakeholders
➤ Make sure everyone’s see the
same thing, on the same page
➤ Adjust until finalised before
UI designer work on mockups
& prototypes

78. MOCKUPS &
PROTOTYPES
Get Closer to the Real Thing

79. WHEN TO DO MOCKUPS
➤ Sometimes we can do wireframes and mockups in parallel
➤ Mockups also let us see the look & feel of the final design
➤ Good for communicating with stakeholders to finalise all the
small details that wireframes couldn’t

80. WHEN TO DO PROTOTYPES
➤ When we know what’s gonna be on pages/screens and the
agreed look & feel/mood & tone
➤ Hotspot prototypes = interactive prototypes that look and act
similar to the real thing

81. A/B TESTING &
MULTIVARIATE TEST
Qualitatively Improving Your Products

82. A/B TESTING

83. MULTIVARIATE TEST (MVT)

90. GOOD A/B TEST OR MVT
➤ You test on something that is explainable
➤ Know what it will impact (e.g. conversion rates, more clicks,
more sign ups)
➤ Sufficient visitors to make statistical significance

91. BONUS STUFF
➤ UX Checklist http://uxchecklist.github.io/
➤ Website UX Checklist https://keepwomen.com/
static_pages/checklist_tool

92. MEASURING
UX
The Challenging Part

93. HOW TO MEASURE SUCCESS OF UX
➤ Metrics checklist

94. GOOD & GREAT METRICS

95. WEB ANALYTICS FRAMEWORK

96. KRUNGTHAI-AXA LIFE WEB ANALYTICS
• E-Commerce
goal
completion
• Revenue/
online sales
• Traffic sources
• Geography
• Lead form
goal
completion
• Lead-to-sale
conversion
rate
• Traffic sources
• Geography
• Website traffic
• Landing
pages
• SEO
impression
• SEO click-thru-
rate
• Traffic sources
• Media
channels
• Campaigns
• Email
collected
• Game user
registration
• Traffic sources
• Media
channels
• Campaigns
• Site search
usage
• Branch
locator usage
• Nearby
branch (GPS)
usage
• PDF files
download
• Live chat
• Traffic sources
• Geography
• Claims form
files
download
• Specific page
web traffic
• Contact form
completion
• Traffic sources
• Geography
Online
Sales
Sales Lead Awareness
Collect
Lead
Provide
Info.
Facilitate
Customers
Macro Conversions Micro Conversions
Website Goals
E-Commerce / Lead Generation / Customer Portal / Provide Info
GoalsKPIsSegmentation

97. FREE/
AFFORDABLE
TOOLS FOR
UX
…for StartUps

98. WEB ANALYTICS
Web Analytics
➤ Google Analytics - Free
Tools to help you record heatmaps, recording sessions, form
analytics, funnels, etc
➤ Hotjar - Free, $29-$89/month
➤ MouseStats (starts $16/month)
➤ MouseFlow (starts $19/month)

99. CREATING FLOWS, WIREFRAMES, AND PROTOTYPES
Wireframes
➤ Sketch (bohemiancoding.com) $90/license
➤ Omnigraffle ($99/license)
Prototyping
➤ invisionapp.com - Free, starts $20/month
➤ Axure ($289/License)

100. USER TESTS
➤ OptimalWorkshop.com - Free, various options
➤ usertesting.com (various price plans)

101. A/B TEST OR MVT
➤ Optimizely - Free, with enterprise plans
➤ Unbounce (starts $49/month)
➤ Visual Website Optimiser (starts $49/month)

102. PRIORITIES FOR STARTUPS
Recap…
➤ If you’re already doing UX: it’s all about getting
outcomes (good UX) rather than getting outputs
(UX documents)
➤ If you haven’t done UX: it’s all about picking the
best learning tools from UX toolkit to match your
situation

103. THANK YOU!
Pithan Rojanawong (Toz) - pithan.toz@gmail.com
VP, Head of UX Design & Analytics
Krungthai-AXA Life Insurance PCL