UX / UI with OutSystems

Dinis Carvalho, OutSystems Engineering

Dinis Carvalho
Product Designer, OutSystems

dinis.carvalho@outsystems.com
diniscarvalho41

2
 1. The story behind Silk UI and OutSystems UI

What I’d like a.

b.
How they evolved with OutSystems platform

Some of the hard decisions that had to be made

to share with 2. UX, UI and Frontend development for the future

The principles and the vision
you
a.

3. Optimizing your development workflow

a. Team composition and practices

b. Frontend architecture

c. Tools and resources

4. Anything you ask and I’m able to answer!

3
A Trip Down Memory
Lane

4
 OutSystems 8

London Theme and

Rich Widgets

2013

5
OutSystems 8
London Theme and RichWidgets

6
OutSystems 8
London Theme and RichWidgets

7
 OutSystems 8

London Theme and

Rich Widgets

2014

2013
OutSystems 9

Silk UI

8
OutSystems 9
Silk UI

9
OutSystems 9
Silk UI

10
 OutSystems 8 OutSystems 10
London Theme and Silk UI Mobile
Rich Widgets Mobile

2014

2013 2016
OutSystems 9

Silk UI

11
OutSystems 10
Silk UI Mobile

12
OutSystems 10
Silk UI Mobile

13
 OutSystems 8 OutSystems 10
London Theme and Silk UI Mobile
Rich Widgets Mobile

2014 2018

2013 2016
OutSystems 9 OutSystems 11

Silk UI OutSystems UI Web

Traditional Web

14
OutSystems 11
OutSystems UI Web

15
OutSystems 11
OutSystems UI Web

16
 OutSystems 8 OutSystems 10 OutSystems 11
London Theme and Silk UI Mobile OutSystems UI
Rich Widgets Mobile Reactive and Mobile

2014 2018

2013 2016 2019

OutSystems 9 OutSystems 11

Silk UI OutSystems UI Web

Traditional Web

17
OutSystems 11
OutSystems UI

18
A Look Into the
Future

19
20
21
Frontend Development Principles

End User No Limits to Speed of Integration From design to

First Create Reusability with Data development

22
Development
Workflow
Team Composition
and Roles
23
Team Composition
UX/ UI Designer

Developer
Team Lead Frontend

Developer Developer

24
Team Composition
UX Designer

Team Lead UI Designer

Developer Developer
Frontend

Developer Developer

25
Roles Growth

● Create the conditions to grow each practice

● Share knowledge and development practices
● Keep team members in the context of the team

26
Roles and Key Activities

User Experience User Interface Frontend Development

Business User Interaction Visual Live Style App

User Testing
Analysis Research Design Design Guide Development

27
Development Workflow

UX/UI Design Development

Designer designs the app Developer translates the

screens using our sketch file design into an application
with all the UI patterns using Service Studio

Service Studio

28
Development
Workflow
Frontend Architecture

29
First Applications

Project App Live Style Guide

Foundation Theme
Theme

OutSystems UI
OutSystems UI

30
Reactive and Mobile Apps

APP A APP A

APP A Reactive APP A Mobile

APP A Theme APP A Theme

APP A Reactive Th APP A Mobile Th

Foundation Theme
Theme

OutSystems UI
OutSystems UI

31
Multiple Projects
B2C Mobile
Internal Apps Mobile Apps B2C Web Apps
Apps

Internal App Mobile App B2C Web B2C Mobile

Theme Theme Theme Theme

B2C Theme
B2C Theme

Foundation Theme
Company Theme

OutSystems UI
OutSystems UI

32
Development
Workflow
Tools and Resources

33
UI Kit
outsystemsui.outsystems.com

34
Live Style Guide
outsystemsui.outsystems.com

35
Cheat Sheet
outsystemsui.outsystems.com

36
Key Takeaways

37
Key Takeaways

User centered Multiple role Leverage Invest in scale

experience collaboration resources and reusability

38
Thank You
Dinis Carvalho
Product Designer, OutSystems

dinis.carvalho@outsystems.com
diniscarvalho41

39