Our Journey towards User Experience Work & Challenges of Applying UX Processes
- Shu Ha Ri
- Trends in UX
- Working with Legacy Systems
Presented in Singapore on Nov 2016 for
- NUS:ISS Master Class
Presented in Bandung on April 2017 for
- Walden Global Services
- Gits
3. ABOUT THIS TALK
Agile & UX for Engineers
‣ Real Life experience on how Agile & UX are relevant to software
development, How to Integrate Them
‣ Challenges in practicing Agile & UX in Organisations
4. Site maps
Wireframes
Card sorting
Usability testing
Contextual
inquiry
Personas
Scenarios
Prototyping
Heuristic
evaluations
Mental models
Affinity
diagramming
Concept maps
A/B testing
Flow diagrams
Taxonomies
Storyboards
User interviews
AGENDA
What we will
not be able to
cover today
How to be a User
Experience
Designer!
5.
6. Ruth Ho Michael OngLena Quek
Focused on digital strategy,
marketing, product development, and
user experience.
Previous projects include Luxury
E-Commerce, Global Payments Tech,
Telco, and B2B Mobile Applications.
Passionate about customer-centric
design/product development,
marketing analytics, stakeholder
management, and bridging the gap
between business and IT.
Focused on product strategy and
development, agile practices, and user
experience.
Previous projects include Mobile
Payments, Logistics Tracking &
Surveying, Cleaning Inspection,
Merchant Monitoring, E-Commerce,
and Real Estate Portals.
Passionate about helping founders
chart a path towards growth through
startup mentoring and coaching.
Focused on user experience, field
and user research, digital strategy and
marketing.
Previous projects include Online
Publishing, E-Commerce, Customer
Loyalty, Online Bookings, and Human
Capital Management Software.
Passionate about customer
discovery, aligning business goals with
user goals, and problem-solving via
user-centric solutions.
7. MICHAEL ONG | @michaelon9 | michael@thecollabfolks.com
tech ~ agile ~ ux ~ product ~ team coach
‣ before 1999 : programming in 6
languages
‣ web design / development
‣ research & development
‣ network engineer
‣ full-stack development + sales
‣ programming in +15 languages
‣ business process consulting
‣ internet spaceships
‣ portal development
‣ UXSG.org , Agile Singapore, Product Groups
‣ scrum master
‣ mobile & ux lead
‣ product manager
‣ coo a.k.a even more work including
customer success, operations,
logistics & finance
‣ more internet spaceships
‣ cycling + startup
‣ coach for agile, ux & product teams
8. MICHAEL ONG | @michaelon9 | michael@thecollabfolks.com
i’ve worked with …
‣ Société Générale
‣ NEC Solutions
‣ K.C. Dat
‣ Nippon Express
‣ Air Asia
‣ Singapore Zoo
‣ Jurong Birdpark
‣ Changi Airport Group
‣ M1
‣ Referral Candy
‣ That Green Space
‣ Arcstone
‣ KMK Online
‣ Bukalapak
‣ Foolproof
‣ SPH
‣ Jurnal
‣ BTPN / Genius
‣ Mapletree
‣ VISA
‣ Robert BOSCH
‣ SPH, ST701
‣ iProperty Group
‣ bellabox Australia &
Singapore
‣ Bicycl.asia
at The Collab Folks …
‣ Lippo Group
‣ EMC
‣ DBS
‣ AXA
‣ GroupM
9. The Collab Folks Approach
Product
Management
Agile Practices
User
Experience Design
Marketing
Leadership Coaching
Product Team Coaching
Talent / Skills Identification
Connect external
Talent / Skills
EXPLORE
COLLAB
EVALUATE
the learning
organisation
11. Who’s here today?
Let’s Warm Up
‣ Are you a
‣ Product Manager
‣ Designer
‣ User Researcher ?
‣ Developer / Engineer
‣ QA ?
‣ Business Development ?
‣ Marketing ?
10
minutes
‣ Which Industries do you work in ?
12. What Challenges / Questions are you thinking about ?
Let’s Define Today
‣ List down 1 to 3 Learning Goals you Have
‣ What questions do you have?
‣ What challenges do you face ?
15
minutes
15. SHU - HA - RI
Shu - Ha - Ri is a way of thinking
about how you learn a technique
The name comes from Japanese martial
arts (particularly Aikido), and
Alistair Cockburn introduced it as a way of
thinking about learning techniques and
methodologies for software development.
http://martinfowler.com/bliki/ShuHaRi.html
16. SHU - HA - RI
Shu: In the beginning stage ...
Ha: At this point the student begins to
branch out ...
Ri: Now the student isn't learning from
other people, but from his own practice.
19. THE PROJECT THAT HELP MICHAEL UNDERSTAND THE IMPORTANCE OF RESEARCH
‣ cleaning inspection system
‣ designed, developed end-to-end by
Michael
‣ on-site visits to observe user behaviour
‣ support & maintenance to adjust the
product according to feedback
20. THE GAME THAT HELPED UNDERSTAND MULTI-ROLES
‣ EVE Online is a persistent world
massively multiplayer online role-playing
game (MMORPG) developed and
published by CCP Games.
‣ Players of Eve Online can participate in a
number of in-game professions and
activities, including mining, piracy,
manufacturing, trading, exploration, and
combat (both player versus environment
and player versus player).
https://en.wikipedia.org/wiki/Eve_Online
21. HA - AT THIS POINT THE STUDENT BEGINS TO BRANCH OUT
2008 to 2015
23. VENTURING INTO USER EXPERIENCE INDUSTRY
Aſter Agile adoption at
iProperty, CEO asked
how we can be
“mobile first”.
24. STORY #1
‣ iProperty Group (Real Estate Portal)
‣ >10 years old (there for 3.5)
‣ 100+ to 300+ staff
‣ 4 main countries (MY, SG, ID, HK)
‣ connects real estate agents / agencies /
developers
‣ to a few million property buyers & sellers
25. ‣ 6 months
‣ 4 countries
‣ 120+ team members
‣ focused on “user experience” as a topic
‣ to identify where,how and who we would
start with
‣ “in-house” approach with mobile team
with its own budget acting like a vendor
co-located within the company
4 WORKSHOPS
26. ‣ mobile roadmap
‣ design strategy
‣ personas & scenarios
‣ information architecture
‣ task flows
‣ prototyping & testing
‣ development
‣ marketing launch & measuring
THE PROCESS
28. ‣ Train the trainer
‣ I was trained at Republic Polytechnic during first workshop and with
their assistance proceeded to carry out the rest of workshops to 120+
people
‣ Identify your successors and provide mentorship / training asap!
‣ Team leads took over Scrum teams after 1st year when I move to
Product Owner position in new team
‣ New team Lead took over team when I moved on
‣ Individuals in our teams have mostly moved to team lead positions at 4
years after we introduced Agile/Scrum techniques
KEY LEARNINGS
29. ‣ Communicate early and often
‣ Work with Marketing early to identify launch plans / bottlenecks
‣ Work with Customer Service / Sales early to train on product
‣ You can be Agile in a Enterprise, act like a Startup
‣ Understand your budget, control it
‣ Deliver results fast and measure
‣ After Mobile team rolled out apps for iPad, Windows, iPhone, Android across 3
countries in 9 month period, Mobile API is now used by Desktop sites
‣ Keep your team small (we had 5)
‣ Product Owner, UX/UI Designer, Back-end Dev, 2 Mobile Devs
‣ 6 apps in 9 months across 3 countries we operated in
KEY LEARNINGS
30. STORY #2
‣ bellabox (Beauty Discovery Service)
‣ >3 years old (there for 2)
‣ 20 to 35 staff
‣ 2 countries
‣ connects 700+ brands
‣ to a 100k+ audience
‣ 45k paying customers
31. ‣ 15 days
‣ 2 countries
‣ 20+ team members
‣ focused on “user experience” as a topic
‣ to identify where,how and who we would
start with
‣ hybrid approach with design, development
‣ PO co-located at their office 80-90% of time
2 WORKSHOPS
32. ‣ design strategy
‣ product requirements and analysis
‣ product roadmap
‣ information architecture
‣ task flows
‣ prototyping & testing
‣ development
‣ marketing launch & measuring
THE PROCESS
34. ‣ Business as usual while over-hauling a business is incredibly tough
work
‣ We have had key project team members leave due to the hectic nature
of running a business and creating a new platform
‣ Maintain focus on customer needs
‣ Don’t be distracted by growth. You are at critical juncture where lack
of focus can delay project plans significantly
KEY LEARNINGS
35. ‣ Hybrid model kinda works
‣ Lean In-house dev team
‣ Combined with Heavy out-sourced Design & Dev team
‣ Looking back, we would move towards in-house sooner rather than
later after majority of work is completed BUT hiring is tough (for
everyone)
‣ Learn from Enterprise
‣ Be great at documentation, process design
‣ Identify bottlenecks early and work on removing obstacles
KEY LEARNINGS
38. RI - NOW THE STUDENT ISN’T LEARNING FROM OTHER PEOPLE, BUT FROM HIS OWN PRACTICE
2015 to PRESENT
39. STORY #3
‣ KMK Online
‣ Digital Arm of Emtek Group (Operates SCTV, Indosiar & O-Channel)
‣ Owns and Operates
‣ Blackberry Messenger (BBM)
‣ liputan6.com (news portal)
‣ vidio.com (video portal)
‣ bintang.com (entertainment portal)
‣ bola.com (sports portal)
‣ karir.com (job portal)
‣ +++ many others
‣ 250M+ monthly visits
‣ 70M+ monthly unique users
40. ‣ 1 day + 15 days + follow up
practice
‣ Jakarta
‣ All KMK Teams + vidio.com for
Design sprint
‣ focused on “user experience” as
a topic
‣ to identify where, how and who
we would start with
1 WORKSHOP + 3 WEEK DESIGN SPRINT
41. ‣ Business as usual while training is tough work
‣ We used a pair coaching approach for observations and pairing with
teams on-site
‣ Maintain focus on user needs
‣ The Vidio team had many priorities and needed a crystal clear
strategic focus to enable them to prioritise via user research
‣ Train the trainers
‣ After the training, the team worked with other product teams to start
design sprints and eventually hired internal User Researchers
KEY LEARNINGS
42. STORY #4
‣ Singapore Press Holdings : Digital Division
‣ Digital Arm of SPH
‣ Owns and Operates
‣ AsiaOne
‣ STJobs
‣ FastJobs
‣ +++ many others
43. ‣ Over 4 months
‣ Singapore
‣ AsiaOne, STJobs, Fastjobs
for Product & UX
Program
‣ focused on “user
experience” as a topic
‣ to identify where, how and
who we would start with
9 WORKSHOPS
44. ‣ Business as usual while training is tough work
‣ We used 3 coach approach for observations and pairing with teams on-
site for UX office hours
‣ Maintain focus on user needs
‣ Each team were at different product maturity and had to identify
clearly their user needs via research
‣ Fundamental research techniques helped to open their minds towards
answering “What do our users need” instead of “What we can develop
for users”
KEY LEARNINGS
46. IN SUMMARY
• SHU
• SILO in Tech with no understand
about the wider business
operations hurt the successful roll
out of products my teams worked
on
• SPEAKING with Customers /
Stakeholders early
• TAKE TIME OFF and learn
something different
• HA
• BRIDGE people as soon as
possible
• not only UX , Tech, Prod but all
the various teams in a
company
• Speaking with the people who
create the products and
influencing CULTURE CHANGE
takes time
• the right COMMUNITIES are
important for personal and
professional growth
• RI
• DON’T BE AFRAID TO FAIL
• 105 clients later, I’m still
learning something new from
each client and applying this
into each new coaching with
product teams and my latest
business
• FIND LIKE MINDED partners
• I keep in touch with all ex-team
members and see where they
are in life, and check in about
their work
50. Which product(s) do you consider to
have a good user experience ?
What is User Experience?
51. Positive Experience
Image Credit: Michael Ong
Quote from Feedback : https://www.kickstarter.com/projects/1670187625/see-sense-icon-the-intelligent-and-connected-cycle
“1st, I love the new design,
charging slots are brilliant and
much improvement from
previous versions.
2, App works great. First attempt
to update didn't go, so stopped
app and connected 1 at a time to
update, worked easily.
3, Quality!”
52. Melissa Perri :
Do you agree?
“Product Management with no User Experience Design
creates functional products that don’t make users excited.
User Experience Design with no Product Management
produces delightful products that don’t become businesses.”
Source : Melissa Perry on Changing the Conversation about Product Management vs. UX http://melissaperri.com/2016/01/17/pmvsux/#.VrDr4jZ96L7
53. Can you think of product(s) that
have a bad user experience?
What is User Experience?
54. Negative Experience
“I bought two of these... Very
unhappy. Both do not work right.
Have to reset every single time as
it freezes and just doesn't work.
works for ten minutes. Not happy
and wasted money. want my
money back.”
Image Credit: http://thenextweb.com/wp-content/blogs.dir/1/files/2014/02/flyfit2.png
Quote from Feedback : https://www.kickstarter.com/projects/522669502/flyfit-unique-ankle-tracker-for-fitness-cycling-an
55. Product Management and UX Design Responsibilities
Credit : http://melissaperri.com/2016/01/17/pmvsux/#.VrDr4jZ96L7
56. How to work together
User Stories and epics :
Define users, goals and
value
Product Management can
own the acceptance
criteria
Requirements
57. How to work together
Understand user needs
and how they use
technology / services
That means customer
visits and regular
interviews
User Research
58. How to work together
Designers facilitate the
design process with
whiteboard and hand
sketch sessions
Ideation
59. Communication
How to work together
Include both in the
regular cadence of
product meetings to
ensure a regular flow of
communication
60. What : Product Management vs How : User Experience
Product Managers
Responsible for
product’s overall success
UX Designers
Responsible for ensuring
users’ needs are met
Engineers
Developing Prototypes
and Final product
together
62. WE WANT
GREAT EXPERIENCES
More or less features doesn’t matter.
Engineering often sees PROTOTYPING as outside of
engineering
MAKE PROTOTYPING a first class member of your
tech stack to cultivate a culture of LEARNING
63. Jeneanne Rae
Do you agree?
“Integrating Design into your company involves more than
just hiring superstar designers. It takes a long-term
commitment and developing a culture that brings
everyone up to speed”
Source : Jeneanna Rae on 6 Keys for Turning Your Company into a Design Powerhouse http://www.fastcodesign.com/1669433/6-keys-for-turning-your-company-into-a-design-powerhouse?
64. ROI of Design-centric firms
Creating
sustainable
competitive
advantage
through
design is not
a quick or
easy task.
Source : DMI Design Value Index (Source: Design Management Institute) http://designforeurope.eu/news-opinion/value-design-business
68. Legacy Systems
The Problem isn’t Legacy Systems
It’s Legacy People and Legacy Customers / Users
Legacy People RESIST Change
Legacy Customers / Users DON’T CARE
69. HOW TO FAIL
PHASED Approach
typical 3 phase approach
1) design and
implementing the basics
2) completing the features
of old system
3) implement some new
and exciting features
business get
tired of waiting
70. HOW TO FAIL
PIECE BY PIECE
Refactor legacy system
piece by piece, extracting
parts and cleaning them
up
UPHILL battle due to
friction between new and
old and more people
getting added to new
designs
business get
tired of waiting
71. Design Freedom vs Cost of Change
Design Freedom vs Cost Of Change
Credit :Adaptive Path
72. What are the common objections?
Do you face objections in introducing User Experience?
When introducing User Experience topics to
your organisation, what questions do you face?
10
minutes
73. but Change is _HARD_, what if …
Sounds worrying ?
‣ Talking to Customers Isn’t a Part of an Organization’s Culture
‣ Leadership Doesn’t Have a Clear Vision
‣ Leadership and the Design Team Don’t Share the Same Vision
‣ The Design Team Hasn’t Laid a Sound Foundation by Establishing a
Design Process
‣ The Designers on a Team Aren’t on the Same Page
‣ An Organization Doesn’t Allocate Its Resources Properly
‣ An Organization Encourages Feature Creep
‣ There’s No Effort Dedicated to Fit and Finish
Source : http://www.uxmatters.com/mt/archives/2012/04/organizational-challenges-for-ux-professionals.php
74. As a team member, you are in
the position to
Take charge
‣ Listen up!
‣ Be the voice of honesty and
open-mindedness
‣ Get practical and collaborative
‣ Make it good enough, but no
better
Source : http://uxmastery.com/how-to-apply-ux-in-an-organisation-new-to-user-centred-design/ Image Credit: Michael Ong
76. Who are your
stakeholders?
Understand Your Environment
designers
developers
qa
marketing
sales
operations
customers service
finance Image Credit: Michael Ong
77. Where are the
problem areas?
Understand Organisational Key Concerns
Communication ?
IT Responsiveness?
Bad Customer Service?
Image Credit: Michael Ong
78. Agile?
How are you delivering projects?
it is also helpful to
identify what type
of project delivery
method you are
using in your team
perhaps you are in
transition and it is
helpful to know the
contraints and
paths towards each
state (whether it
will succeed or fail)
79. Put it together
Goals , Vision, Strategy
‣ Run workshops to educate
basics of User Experience
‣ Hire dedicated UX team
members or go at it yourself
‣ Measure
‣ Present
‣ Repeat
83. Setup the product roadmap and focus on delivery
S P R I N T
( 2 W E E K S )
1
1 1 T H N O V
2 0 1 3
2
2 5 T H N O V
2 0 1 3
3
9 T H D E C 2 0 1 3
4
2 3 R D D E C 2 0 1 3
X M A S /
N E W Y E A R
5
6 T H J A N 2 0 1 4
6
2 0 T H J A N 2 0 1 4
D R A F T
7
3 R D F E B 2 0 1 4
D R A F T
8
1 7 T H F E B 2 0 1 4
D R A F T
9
3 R D M A R 2 0 1 4
B E TA O P T I N
D R A F T
1 0
1 7 T H M A R
2 0 1 4
D R A F T
1 1
3 1 S T M A R 2 0 1 4
D R A F T
P R O D U C T
D E S I G N
M I K E ,
C H A R M A I N E ,
S H E L D O N
Z AV I E R
M I C H A E L
R E S E A R C H
A N A LY S I S
E P I C P L A N N I N G
R E S E A R C H
A N A LY S I S
S T O RY P R I O R I T I S AT I O N
I N F O R M AT I O N
A R C H I T E C T U R E
TA S K F L O W S
TA S K F L O W S
P R O T O T Y P E S
TA S K F L O W S
W I R E F R A M E S
V I S U A L D E S I G N
W I R E F R A M E S
V I S U A L D E S I G N
W I R E F R A M E S
V I S U A L D E S I G N
F R O N T- E N D
W I R E F R A M E S
V I S U A L D E S I G N
F R O N T- E N D
T E S T I N G
F R O N T- E N D Q A
V 2 . 1 D E S I G N V 2 . 1 D E S I G N
T E C H
A LV I N , A L E X
RYA N , A L I F
M I C H A E L
I N I T I A L S Y S T E M A N A LY S I S A R C H I T E C T U R E
M I G R AT I O N
PAY M E N T 1 . 5
O R D E R 1 . 5
M I G R AT I O N
PAY M E N T 1 . 5
O R D E R 1 . 5
M I G R AT I O N
PAY M E N T 1 . 5
O R D E R 1 . 5
F E E D B A C K 1 . 5
M O B I L E M A I L S 1 . 5
M I G R AT I O N P L A N N I N G
I N V E N T O RY S U B S C R I P T I O N
S T O R E
B R A N D M A N A G E M E N T
O R D E R S
A L L O C AT I O N
M U LT I - C O U N T RY
PAY M E N T 2 . 0
M I G R AT I O N
S H I P P I N G
P R O F I L E S
P R O M O T I O N S
F E E D B A C K 2 . 0
C S 2 . 0
A R T I C L E S
R E WA R D S
N O T I F I C AT I O N S
A N A LY S I S
R E P O R T I N G
T E S T I N G , I T E R AT I N G
T E S T I N G , I T E R AT I N G
PA R C E L T R A C K I N G
D A S H B O A R D S
T E S T I N G , I T E R AT I N G
O P E R AT I O N S
E M I LY, S A R A H ,
J A S M I N E ,
AT I Q A H , K AY L A
A L E X A N D R E ,
M A R I O N ,
E M I LY V.
A L E X , M I C H A E L
A L L O C AT I O N 1 . 5
A U S T R A L I A W O M E N
PAY M E N T 1 . 5
A U S T R A L I A
W O M E N
A L L O C AT I O N 1 . 5
A U S T R A L I A W O M E N
PAY M E N T 1 . 5
A U S T R A L I A
W O M E N
A L L O C AT I O N 1 . 5
A U S T R A L I A W O M E N
PAY M E N T 1 . 5
A U S T R A L I A
W O M E N
PAY M E N T 1 . 5
A U S T R A L I A
W O M E N
F E E D B A C K 1 . 5
D E C B O X
S I N G A P O R E
A L L O C AT I O N 1 . 5
A U S T R A L I A W O M E N
PAY M E N T 1 . 5
A U S T R A L I A
W O M E N
C U S T O M E R S E R V I C E 1 . 5 -
I N T E R C O M . I O S I N G A P O R E
A L L O C AT I O N 1 . 5
A U S T R A L I A W O M E N
PAY M E N T 1 . 5
A U S T R A L I A
W O M E N
F E E D B A C K 1 . 5
J A N B O X
S I N G A P O R E
A U S T R A L I A
A N A LY T I C S 1 . 5
A L L O C AT I O N 1 . 5
A U S T R A L I A W O M E N
PAY M E N T 1 . 5
A U S T R A L I A
W O M E N
A N A LY T I C S 1 . 5
A L L O C AT I O N 1 . 5
A U S T R A L I A W O M E N
PAY M E N T 1 . 5
A U S T R A L I A
W O M E N
F E E D B A C K 1 . 5
F E B B O X
S I N G A P O R E
A U S T R A L I A
C U S T O M E R S E R V I C E 2 . 0
I N T E R C O M . I O
A U S T R A L I A
A N A LY T I C S 1 . 5
A L L O C AT I O N 2 . 0
A U S T R A L I A
W O M E N
PAY M E N T 2 . 0
A U S T R A L I A
S I N G A P O R E
A L L
A N A LY T I C S 2 . 0
A L L O C AT I O N 2 . 0
A U S T R A L I A
W O M E N
PAY M E N T 2 . 0
A U S T R A L I A
S I N G A P O R E
A L L
F E E D B A C K 2 . 0
M A R B O X
S I N G A P O R E
A U S T R A L I A
A N A LY T I C S 2 . 0
A L L O C AT I O N 2 . 0
A U S T R A L I A
W O M E N
PAY M E N T 2 . 0
A U S T R A L I A
S I N G A P O R E
A L L
A N A LY T I C S 2 . 0
M A R K E T I N G
E M I LY, S A R A H ,
S T E P H A N I E ,
B I Y I N G , L A U R E N ,
B E C K S
A L B E R T
G O T O M A R K E T P L A N N I N G
M I G R AT E A C Q U I S I T I O N
T R A C K I N G -
G O O G L E TA G M A N A G E R
M I G R AT E A C Q U I S I T I O N
T R A C K I N G -
G O O G L E TA G M A N A G E R
A L P H A S I T E S N E A K P E A K B E TA O P T I N
- V O L U N T E E R
- I N V I T E S
L I V E I N V I T E S
86. What we covered today
Real Life experience on how Agile & UX are relevant to software
development, How to Integrate Them
Challenges in practicing Agile & UX in Organisations
88. Tools you can use
‣ Primarily use Google Docs
‣ Draw is great for task flow diagrams
‣ I favor BPMN
‣ We also use diagramming tools like Cacoo
‣ For prototyping
‣ Paper, Sketch, Mockflow, Balsamiq, Mockflow, Fireworks, Photoshop works depending on
your team
‣ For sharing visual designs and collaboration
‣ Google Draw, Invision
‣ For usability testing
‣ Silverback or Morae
‣ For Mobile Usability testing, setting up a rig for camera is quite easy.
89. What will you do with the takeaways today?
Follow-up
‣ On a Post-It
‣ Write down your Name, Title,
Company and E-mail / Phone
‣ State one takeaway you believe
you can use in the next 30 days
‣ We will check-in with you 30 days
from now on your progress
90. Retrospective
We ask for feedback all the time!
‣ What did you like about the session?
‣ What did you not enjoy?
‣ How could we improve ?
MICHAEL | @thecollabfolks | hello@thecollabfolks.com
More questions? contact me via e-mail or setup a time to chat.
91. Q&A
MICHAEL | @thecollabfolks | hello@thecollabfolks.com
More questions? contact us via e-mail or setup a time to chat.