Over the last few years at OutSystems, we’ve increased focus to improve user experience of every web app we develop. A hundred web apps later, this is what we’ve learned.

4. © 2013 outsystems
Speed alone did not cut it anymore!
Expectations have risen. We needed to evolve.

5. © 2013 outsystems
 No UX Expert
 No Web Designer
We needed to put development teams doing a
better job, without enlarging the teams.

6. © 2013 outsystems
 No UX Expert
 No Web Designer

7. © 2013 outsystems
 Concepts 1d
 Highly Practical 2d
our examples
 Cheatsheets
 UX Angels
 Usability Checklist
 Assessments
 Vision Document
 User Research
 Usability Tests

8. © 2013 outsystems
 Bad alignment
 Sloppy grouping & spacing
 Inconsistency
 (A)simmetry

9. © 2013 outsystems
In a project, we developed a mockup for an
important screen and sent it to the developer.

10. © 2013 outsystems
At the end of the day, he sent us this screen. We
said: I know it’s awful, but I have no idea why!!

11. © 2013 outsystems
Screen delivered by developer with obvious
misalignments.

12. © 2013 outsystems
 Bad alignment
 Sloppy grouping & spacing
 Inconsistency
 (A)simmetry
Basic Design Training
based on many real examples
Advanced CSS Training
UI Framework for OutSystems
How we addressed it…

13. © 2013 outsystems
Same data displayed differently
Inconsistent text and labels
Actions placement differed
Visuals mismatch

14. Labels and data formats changed from screen to
screen within the application.

15. Obvious misfit between new control and the
existing visual framework.

16. © 2013 outsystems
Same data displayed differently
Inconsistent text and labels
Actions placement differed
Visuals mismatch
Usability Training
based on many real examples
OutSystems UI Framework
Customer-specific Styleguide
How we addressed it…

17. © 2013 outsystems
 No text to help users
 Looong texts
 Technical jargon

18. Large blob of text, just asking not to be read, and
legal jargon.

19. Even feeback messages can be the problem.

20. © 2013 outsystems
 No text to help users
 Looong texts
 Technical jargon
Vision Document
Application Glossary
Information Architecture
Mockups
How we addressed it…

21. © 2013 outsystems
 No requirement prioritization
 All data is important at any time
 All actions are important at any time

22. Without perspective, developers tend to put
everything on the page.

23. Sometimes, even more than 1 table.

24. © 2013 outsystems
 No requirement prioritization
 All data is important at any time
 All actions are important at any time
Vision Document
Focus on most frequent use cases
Mockups
How we addressed it…

25. © 2013 outsystems
 No clue on who the user really is
 No perspective on user task
 No user guidance

26. The most important piece of information for the
user was scaled down because it was the largest.

27. © 2013 outsystems
 No clue on who the user really is
 No perspective on user task
 No user guidance
Vision Document
Rich User Context, User Stories
Development Walkthroughs
Usability Tests
How we addressed it…

28. © 2013 outsystems
did
we
solve
them
??

29. © 2013 outsystems
 Paradigm shift for most developers
 Some people get it better than others
 Need to open space for usability
 Customers can be an obstacle