How can you build an awesome app that looks cool and fresh while providing a great user experience? Discover how to beat the UX and UI design blues and produce apps that everyone loves to use. - Why an awesome UX is critical - What you gain by talking to users - What an MVE is and what it does - How to go from a screen to an experience - How to avoid UX traps and go after the rainbow. Free Online training: https://www.outsystems.com/learn/courses/ Follow us on Twitter http://www.twitter.com/OutSystemsDev Like us on Facebook http://www.Facebook.com/OutSystemsDev

1. Go from Bad to Awesome
with Lean UX

2. 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. 3
Why UX?
(User Experience)
After all, we are a software company, not a design agency…

4. 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. 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

6. 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

7. Why is an awesome UX so critical?

8. Why does Software Fail?
“Poor communication among customers, developers, and users”
“Badly defined system requirements”
8
Check Out: IEEE

9. 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?”

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
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

13. Can UX help?
13
You can do it
Don’t Give Up

14. How to go from a screen to an
experience?

15. Start Small to win Big
15

16. MVE: Minimum Viable Experience
16
MVE vs MVP

17. How to MVE?
17

18. Why Lean UX?

19. 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

20. 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

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 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”

24. What you gain by talking to users
24

25. What you gain by talking to users
25

26. 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.

27. Our Process

28. Lean UX: The OutSystems way
28
BusinessAnalysis
UserResearch
Wireframes
VisualDesign
LiveStyleGuide
GoLive

29. 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

30. 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

31. Lean UX: The OutSystems way
31
BusinessAnalysis
UserResearch
Let us Meet the Users

32. 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

33. 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

34. 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.

35. 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.

36. TIMES CHANGE, PEOPLE CHANGE…
NEW NEEDS ARISE!

37. Lean UX: The OutSystems way
37
BusinessAnalysis
UserResearch
Wireframes
Fail fast or fail loudly

38. 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

39. 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.

40. Lean UX: The OutSystems way
40
Wireframes

41. 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!

42. Lean UX: The OutSystems way
42
BusinessAnalysis
UserResearch
Wireframes
VisualDesign
Make it
Awesome

43. 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.

44. VISUAL DESIGN IS KEY
FOR INITIAL ADOPTION
Usability benefits only kick in after the initial impression

45. Lean UX: The Outsystems way
45
LiveStyleGuide
Webinar: Building a Live Style Guide

46. 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

47. IT AIN’T OVER UNTIL
THE FAT USER SINGS
It’s easy to get it wrong
Stay close to the users and react, fast

48. How to avoid UX traps

49. Extras
49
Developer’s UX Checklist: Full Article
Checklist PDF version

50. Extras
50
Download UX for IT

51. Extras
51
Stay sharp, more goodies on the way:
● Forms that work;
● Design Principles;
● Balsamiq Stencils;
● Dribbble Account (Sketch Files available);

52. Food for Thought
52

53. Thank you