Raphaël Gauthier, CfgMgmtCamp 2019. One of Rudder’s main focuses is its comprehensive graphical user interface, which allows users to view and manage its configurations without writing a line of code. The user experience and interface considerations for a tool as technical and complex, and with such potential to break things as a configuration management tool are certainly a challenge, and in some ways in unchartered territory. Rudder’s frontend developer will present an analysis of the situation, the issues encountered and the approach adopted for the improvement of UX and UI planned for 2019.

1. UX challenges of a UI-centric
config management tool
What will be the future
RUDDER interface?
Raphaël GAUTHIER
Front-end dev / UX Designer
@RUDDER

2. UX challenges of a UI-centric
config management tool
What will be the future
RUDDER interface?
Raphaël GAUTHIER
Front-end dev / UX Designer
@RUDDER ?

3. Story of Mike
3
● Mike is a sysadmin
● Mike is a cool guy, so cool
that he uses RUDDER to
audit and configure his
servers.
● He uses it almost every day,
and makes everything
through the interface.
● But sometimes, it makes
him frustrated…

4. Story of Mike
4
● Mike is a sysadmin
● Mike is a cool guy, so cool
that he uses RUDDER to
audit and configure his
servers.
● He uses it almost every day,
and makes everything
through the interface.
● But sometimes, it makes
him frustrated…

5. Story of Mike
5
● Mike is a sysadmin
● Mike is a cool guy, so cool
that he uses RUDDER to
audit and configure his
servers.
● He uses it almost every day,
and makes everything
through the interface.
● But sometimes, it makes
him frustrated…

6. Story of Mike
6
● Mike is a sysadmin
● Mike is a cool guy, so cool
that he uses RUDDER to
audit and configure his
servers.
● He uses it almost every day,
and makes everything
through the interface.
● But sometimes, it makes
him frustrated…

7. 1.
Lack of harmony
▪ User journey to create:
- A group containing nodes (5 steps):
1. Click on a “Create” button
(top left corner)
2. Fill a first form in a popup window
3. Save & close that popup
4. Fill another form
5. Save another time.
7
Groups
1
2
3
4
5

8. ▪ User journey to create:
- A group containing nodes (5 steps)
- A directive with parameters (4 steps):
1. Click on a technique
2. Click on a “Create” button
3. Fill a long form
4. Save changes
8
1.
Lack of harmony
Is this a bug ?
Directives
1
2
3
4

9. ▪ User journey to create:
- A group containing nodes (5 steps)
- A directive with parameters (4 steps):
- A rule with nodes and directives (5 steps):
1. Click on a “Create” button
(top right corner)
2. Fill a fist form in a popup window
3. Save & close that popup
4. Fill another form
5. Save another time.
9
1.
Lack of harmony
Rules
1
2
3
4
5

10. ▪ User journey to create :
- A group containing nodes (5 steps)
- A directive with parameters (4 steps)
- A rule with nodes and directives (5 steps)
▪ Identical scenarios BUT different user journeys
➤ This makes it difficult to learn RUDDER
10
1.
Lack of harmony Groups Directives
Rules
“Create” button

11. Use of
templates
▪ 2 columns layout
- Groups
- Rules
- Directives
- Nodes
▪ Table layout
- API accounts
- Parameters
▪ “One-page” layout
- Settings
- ….
11
That’s better!

12. 2. Notification systemS
12
I never know what
will happen after
clicking on a Save
button…
▪ Popups
▪ Messages
▪ Notifications (Tech. editor)
Flaws:
⊖ Popups bother the user
⊖ Messages are difficult to see
- They have no color, no icon (Error?
Warning? Success?)
- They do not fit on all pages

13. Only use
notifications
13
Use of notifications (such as the Reporting plugin):
▪ Success : Green notification, which automatically disappears
after a few seconds
▪ Warning & Error : Only disappear when the user clicks on
them
Advantages :
⊕ Fits on any page
⊕ Requires user action only if necessary
No more popups!

14. Today
-
All object properties can be accessed
and edited in the same form
3.
Page complexity
14
Advantage Disadvantage
Everything is accessible in
the same place.
Everything is accessible in
the same place...

15. 3.
Page complexity
15
Today
-
All object properties can be accessed
and edited in the same form
Advantage Disadvantage
Everything is accessible in
the same place.
Everything is accessible in
the same place...
Where is this
parameter....?

16. 3.
Page complexity
16
Today
-
All object properties can be accessed
and edited in the same form
Advantage Disadvantage
Everything is accessible in
the same place.
Everything is accessible in
the same place...

17. New
edit mode
17
Default mode
Current interface Solution?
⊖ No category
⊖ Takes more space
⊖ Heavily loaded display
⊖ In read-only mode, all inputs are
disabled (decreases readability)
⊕ Categorized information
⊕ Take up less space
⊕ Sleek display
⊕ In read-only mode, there is no
change

18. New
edit mode
⊕ Less intimidating
⊕ Highlighting important information and
mandatory fields
⊕ User can save and quit the process at
any time
⊕ Displaying a "progress bar" has a
motivating effect on the user - More than
a scroll bar....
Edit mode
● Using multi-steps form for creation process:
● Left column hidden
18

19. “
How to implement
these solutions?
19
?
? ??
? ?
?? ??
?

20. How to implement
these solutions?
20
▪ Notifications already implemented ✔
▪ New interface for better performances and
maintainability
- Moving from Angular to Elm
- Create dynamic interface using the API
- Remove old css & javascript libraries
▪ Modify our development process
➤ Design thinking :
Doc api v2 Doc api v9

21. Design Thinking
1. Empathize
2. Define
3. Ideate
4. Synthetize
5. Prototype
6. Test
21
“The Design Thinking process is based on the intuitive workflow process of a designer.
The team is led through iterative loops which take the participants through six stages.”
Why Is Design Thinking what
we need ?
- It reduces the risk
associated with
launching new ideas.
- It will helps us to learn
faster.
- It generates solutions
that are innovative, not
just incremental.

22. 22
In summary
- New notification
system ✔
- New templates
- New edit mode
- New development
process

23. 23
Any
questions ?
- These were only
ideas
- We are waiting for
your feedbacks
- It’s time to open user
stories :)
Can I leave
now ?

24. 24