Go from Bad to Awesome
with Lean UX
Replace This image
in master
Presentation
Ricardo Luiz
UX & UI Team Lead @ OutSystems
2
https://www.linkedin.com/in/uxluiz
ricardo.luiz@outsystems.com
@UXLuiz
https://pt.pinterest.com/ricardoluiz102/
3
Why UX?
(User Experience)
After all, we are a software company, not a design agency…
4
The cost of fixing an error after developing a solution is
100xmore expensive than if you test it early with users
Check Out: Why software fails by IEEE
The ROI of User Experience with Dr. Susan Weinschenk
5
50%Of development time is spent on rework that could be avoided
Check Out: Why software fails by IEEE
The ROI of User Experience with Dr. Susan Weinschenk
Agenda
● Why is an awesome UX so critical? The ROI of UX
● How to go from a screen to an experience?
β—‹ Start small to win big
β—‹ What an MVE is and what it does
● Why Lean UX?
β—‹ How to
β—‹ The key factors
β—‹ What you gain by talking to users
● Our Process
● How to avoid UX traps and go after the rainbow
6
Why is an awesome UX so critical?
Why does Software Fail?
β€œPoor communication among customers, developers, and users”
β€œBadly defined system requirements”
8
Check Out: IEEE
Why does Software Fail?
9
● Frustration: Big bang deployments β€œUhhmmm, so after all this time, this is it? OK...”
● Not up to stakeholder’s standards and user expectations: β€œI was expecting something
great. Can you make it a little bit more like Slack?”
● It is expensive to rework: β€œCan we change this?”
Can UX help?
10
● β€œWe need to impress”
● β€œThis needs to look great”
● β€œThey already know what they want”
Can UX help?
11
● Requirements
● User Stories
Can UX help?
12
Consider the time, costs and quality impact of:
● Failing to address the end-users needs
● Not meeting client’s goals
● Not having any β€œvisual” specifications
● Not testing and picking the best alternative
● Making future changes
● Fixing issues in production
Can UX help?
13
You can do it
Don’t Give Up
How to go from a screen to an
experience?
Start Small to win Big
15
MVE: Minimum Viable Experience
16
MVE vs MVP
How to MVE?
17
Why Lean UX?
How to: Lean UX
● Short cycles (5 days max) with deliverables
● Small and focused iterations
● Test solutions with Users
● Fail fast or fail big
19
Sources: Google Ventures Design Sprint
Google Design Sprints by Agile Marketing
Example
● Google Ventures Design Sprint
How to: Lean UX
20
Example
● UX @OutSystems
Kick-Off Meeting
Workshop Plan
Clarify Business
Goals
DAY 1
Process Data
App Analytics
Detailed Analysis
Vision Document
DAY 2 DAY 3
Wireframes
development
Share initial Vision
with stakeholders
DAY 4
Usability Testing of
Wireframes
with real users
Wireframes
development
Describe Business
Processes
User Interviews
App Walkthrough
DAY 5
Wireframes review
Process Feedback
Vision Presentation
The Key Factors
21Source: The Elements of User Experience
Example
● The Elements of User Experience
by Jesse James Garrett
Fit with the
OutSystems
Method DAY 1
DAY 2
DAY 3
DAY 4
DAY 5
The Key Factors
22
Sources: The 7 Factors that Influence User Experience
User Experience Design
Example
● The 7 Factors that influence User Experience (Peter Morville)
What you gain by talking to users
23
● You gain insights from those who will use the
system;
● They will probably have pains to report;
● They use shortcuts (some Shadow IT*);
● You gain a better understanding of who you are
building a solution for;
*Shadow IT = systems or apps that people use to accomplish a goal
but that are outside of the β€œofficial system”
What you gain by talking to users
24
What you gain by talking to users
25
The Lean UX Master
26Source: The Elements of User Experience
If you have a hammer, not everything is a nail.
Each project and each team can and will adapt
these methods to their organizations and projects.
Our Process
Lean UX: The OutSystems way
28
BusinessAnalysis
UserResearch
Wireframes
VisualDesign
LiveStyleGuide
GoLive
Lean UX: The OutSystems way
BusinessAnalysis
29
Define clear goals
Understand the business
Interview main stakeholders
Review current application(s)
Get application analytics
Figure out the different user profiles
Identify what to ask the users
Lean UX: The Outsystems way
30
CONTEXT IS KING
Don’t learn the business with the users
Create a context rich environment
Identify goals and constraints
Lean UX: The OutSystems way
31
BusinessAnalysis
UserResearch
Let us Meet the Users
Lean UX: The OutSystems way
32
UserResearch
Planning
Identify the different user profiles
Talk to, at least, 2 users for each profile
Dress appropriately – blend in
Don’t take a committee – 2 people, max 3
Bring someone they already trust
Lean UX: The OutSystems way
33
UserResearch
What To Do
Create rapport
Compliments and Complaints
Where do they spend their time
Known Unknowns vs. Unknown Unknowns
3 things we must fix
3 things we cannot break
Gather, organize, prioritize
NOTHING LIKE WATCHING
CURRENT USAGE AND
UNDERSTAND WHAT DRIVES IT
When we watch the users in their natural environment we get real data on
how they use the system and what for.
That way we discover the natural journey and can identify gaps within the
intended usage of the system(s).
Shadow IT can be discovered at this stage.
NEVER ASK THE USER
WHAT HE/SHE WANTS
The users will report different needs.
The challenge is to get what is the root of those needs.
When you tap into that, you will solve a problem and make users lives easier.
TIMES CHANGE, PEOPLE CHANGE…
NEW NEEDS ARISE!
Lean UX: The OutSystems way
37
BusinessAnalysis
UserResearch
Wireframes
Fail fast or fail loudly
Lean UX: The OutSystems way
38
Wireframes
Don’t let ideas escape
Rich context makes it a ton easier
Information organization is key
Keep sketching
IA comes hand-in-hand with mockups
Challenge designs continuously
Lean UX: The OutSystems way
39
Wireframes
Wireframes are quick to produce and a great tool to gather
feedback, early on, from stakeholders and even users.
Feedback is focused on function, information architecture,
user tasks, user interactions, and so on, rather than being lost
in graphic details or implementation glitches.
Lean UX: The OutSystems way
40
Wireframes
WIREFRAMES ARE A POWERFUL
CHANGE MANAGEMENT TOOL
Everyone can understand what the changes mean
and where the company is headed
You can defeat the unknown… make change easier!
Lean UX: The OutSystems way
42
BusinessAnalysis
UserResearch
Wireframes
VisualDesign
Make it
Awesome
Lean UX: The OutSystems way
43
VisualDesign
The Visual Design is created over the wireframes to support
and extend the developed concept.
It is custom built to implement your branding and make use of
the OutSystems platform’s patterns and widgets.
VISUAL DESIGN IS KEY
FOR INITIAL ADOPTION
Usability benefits only kick in after the initial impression
Lean UX: The Outsystems way
45
LiveStyleGuide
Webinar: Building a Live Style Guide
Lean UX: The Outsystems way
46
GoLive
Keep it Real
Keep testing with real users
Identify user difficulties
Prepare users for what’s coming
Understand ramp up needed for users
Teasers and Presentation Videos
Controlled rollout with a BETA version
IT AIN’T OVER UNTIL
THE FAT USER SINGS
It’s easy to get it wrong
Stay close to the users and react, fast
How to avoid UX traps
Extras
49
Developer’s UX Checklist: Full Article
Checklist PDF version
Extras
50
Download UX for IT
Extras
51
Stay sharp, more goodies on the way:
● Forms that work;
● Design Principles;
● Balsamiq Stencils;
● Dribbble Account (Sketch Files available);
Food for Thought
52
Thank you

User Experience: A Lean UX Process

  • 1.
    Go from Badto Awesome with Lean UX
  • 2.
    Replace This image inmaster Presentation Ricardo Luiz UX & UI Team Lead @ OutSystems 2 https://www.linkedin.com/in/uxluiz ricardo.luiz@outsystems.com @UXLuiz https://pt.pinterest.com/ricardoluiz102/
  • 3.
    3 Why UX? (User Experience) Afterall, we are a software company, not a design agency…
  • 4.
    4 The cost offixing an error after developing a solution is 100xmore expensive than if you test it early with users Check Out: Why software fails by IEEE The ROI of User Experience with Dr. Susan Weinschenk
  • 5.
    5 50%Of development timeis spent on rework that could be avoided Check Out: Why software fails by IEEE The ROI of User Experience with Dr. Susan Weinschenk
  • 6.
    Agenda ● Why isan awesome UX so critical? The ROI of UX ● How to go from a screen to an experience? β—‹ Start small to win big β—‹ What an MVE is and what it does ● Why Lean UX? β—‹ How to β—‹ The key factors β—‹ What you gain by talking to users ● Our Process ● How to avoid UX traps and go after the rainbow 6
  • 7.
    Why is anawesome UX so critical?
  • 8.
    Why does SoftwareFail? β€œPoor communication among customers, developers, and users” β€œBadly defined system requirements” 8 Check Out: IEEE
  • 9.
    Why does SoftwareFail? 9 ● Frustration: Big bang deployments β€œUhhmmm, so after all this time, this is it? OK...” ● Not up to stakeholder’s standards and user expectations: β€œI was expecting something great. Can you make it a little bit more like Slack?” ● It is expensive to rework: β€œCan we change this?”
  • 10.
    Can UX help? 10 β—β€œWe need to impress” ● β€œThis needs to look great” ● β€œThey already know what they want”
  • 11.
    Can UX help? 11 ●Requirements ● User Stories
  • 12.
    Can UX help? 12 Considerthe time, costs and quality impact of: ● Failing to address the end-users needs ● Not meeting client’s goals ● Not having any β€œvisual” specifications ● Not testing and picking the best alternative ● Making future changes ● Fixing issues in production
  • 13.
    Can UX help? 13 Youcan do it Don’t Give Up
  • 14.
    How to gofrom a screen to an experience?
  • 15.
    Start Small towin Big 15
  • 16.
    MVE: Minimum ViableExperience 16 MVE vs MVP
  • 17.
  • 18.
  • 19.
    How to: LeanUX ● Short cycles (5 days max) with deliverables ● Small and focused iterations ● Test solutions with Users ● Fail fast or fail big 19 Sources: Google Ventures Design Sprint Google Design Sprints by Agile Marketing Example ● Google Ventures Design Sprint
  • 20.
    How to: LeanUX 20 Example ● UX @OutSystems Kick-Off Meeting Workshop Plan Clarify Business Goals DAY 1 Process Data App Analytics Detailed Analysis Vision Document DAY 2 DAY 3 Wireframes development Share initial Vision with stakeholders DAY 4 Usability Testing of Wireframes with real users Wireframes development Describe Business Processes User Interviews App Walkthrough DAY 5 Wireframes review Process Feedback Vision Presentation
  • 21.
    The Key Factors 21Source:The Elements of User Experience Example ● The Elements of User Experience by Jesse James Garrett Fit with the OutSystems Method DAY 1 DAY 2 DAY 3 DAY 4 DAY 5
  • 22.
    The Key Factors 22 Sources:The 7 Factors that Influence User Experience User Experience Design Example ● The 7 Factors that influence User Experience (Peter Morville)
  • 23.
    What you gainby talking to users 23 ● You gain insights from those who will use the system; ● They will probably have pains to report; ● They use shortcuts (some Shadow IT*); ● You gain a better understanding of who you are building a solution for; *Shadow IT = systems or apps that people use to accomplish a goal but that are outside of the β€œofficial system”
  • 24.
    What you gainby talking to users 24
  • 25.
    What you gainby talking to users 25
  • 26.
    The Lean UXMaster 26Source: The Elements of User Experience If you have a hammer, not everything is a nail. Each project and each team can and will adapt these methods to their organizations and projects.
  • 27.
  • 28.
    Lean UX: TheOutSystems way 28 BusinessAnalysis UserResearch Wireframes VisualDesign LiveStyleGuide GoLive
  • 29.
    Lean UX: TheOutSystems way BusinessAnalysis 29 Define clear goals Understand the business Interview main stakeholders Review current application(s) Get application analytics Figure out the different user profiles Identify what to ask the users
  • 30.
    Lean UX: TheOutsystems way 30 CONTEXT IS KING Don’t learn the business with the users Create a context rich environment Identify goals and constraints
  • 31.
    Lean UX: TheOutSystems way 31 BusinessAnalysis UserResearch Let us Meet the Users
  • 32.
    Lean UX: TheOutSystems way 32 UserResearch Planning Identify the different user profiles Talk to, at least, 2 users for each profile Dress appropriately – blend in Don’t take a committee – 2 people, max 3 Bring someone they already trust
  • 33.
    Lean UX: TheOutSystems way 33 UserResearch What To Do Create rapport Compliments and Complaints Where do they spend their time Known Unknowns vs. Unknown Unknowns 3 things we must fix 3 things we cannot break Gather, organize, prioritize
  • 34.
    NOTHING LIKE WATCHING CURRENTUSAGE AND UNDERSTAND WHAT DRIVES IT When we watch the users in their natural environment we get real data on how they use the system and what for. That way we discover the natural journey and can identify gaps within the intended usage of the system(s). Shadow IT can be discovered at this stage.
  • 35.
    NEVER ASK THEUSER WHAT HE/SHE WANTS The users will report different needs. The challenge is to get what is the root of those needs. When you tap into that, you will solve a problem and make users lives easier.
  • 36.
    TIMES CHANGE, PEOPLECHANGE… NEW NEEDS ARISE!
  • 37.
    Lean UX: TheOutSystems way 37 BusinessAnalysis UserResearch Wireframes Fail fast or fail loudly
  • 38.
    Lean UX: TheOutSystems way 38 Wireframes Don’t let ideas escape Rich context makes it a ton easier Information organization is key Keep sketching IA comes hand-in-hand with mockups Challenge designs continuously
  • 39.
    Lean UX: TheOutSystems way 39 Wireframes Wireframes are quick to produce and a great tool to gather feedback, early on, from stakeholders and even users. Feedback is focused on function, information architecture, user tasks, user interactions, and so on, rather than being lost in graphic details or implementation glitches.
  • 40.
    Lean UX: TheOutSystems way 40 Wireframes
  • 41.
    WIREFRAMES ARE APOWERFUL CHANGE MANAGEMENT TOOL Everyone can understand what the changes mean and where the company is headed You can defeat the unknown… make change easier!
  • 42.
    Lean UX: TheOutSystems way 42 BusinessAnalysis UserResearch Wireframes VisualDesign Make it Awesome
  • 43.
    Lean UX: TheOutSystems way 43 VisualDesign The Visual Design is created over the wireframes to support and extend the developed concept. It is custom built to implement your branding and make use of the OutSystems platform’s patterns and widgets.
  • 44.
    VISUAL DESIGN ISKEY FOR INITIAL ADOPTION Usability benefits only kick in after the initial impression
  • 45.
    Lean UX: TheOutsystems way 45 LiveStyleGuide Webinar: Building a Live Style Guide
  • 46.
    Lean UX: TheOutsystems way 46 GoLive Keep it Real Keep testing with real users Identify user difficulties Prepare users for what’s coming Understand ramp up needed for users Teasers and Presentation Videos Controlled rollout with a BETA version
  • 47.
    IT AIN’T OVERUNTIL THE FAT USER SINGS It’s easy to get it wrong Stay close to the users and react, fast
  • 48.
    How to avoidUX traps
  • 49.
    Extras 49 Developer’s UX Checklist:Full Article Checklist PDF version
  • 50.
  • 51.
    Extras 51 Stay sharp, moregoodies on the way: ● Forms that work; ● Design Principles; ● Balsamiq Stencils; ● Dribbble Account (Sketch Files available);
  • 52.
  • 53.