Presented by Colleen Hart & Serena Chechile Nichols at DevConf.US 2019

1. Proactive and
reactive design
Dev Conf Presentation - August 2019
Colleen Hart, Serena Chechile Nichols

2. DevTools UX Lead
Serena Chechile Nichols
@serenamarie125
OpenShift UX Lead
Colleen Hart

3. Open Source Software

4. Why Open Source?
● Technology thrives in the open!
● It is a proven way of collaborating to create software
● People are free to share ideas and build on others’ work
● It’s the freedom to:
see code,
learn from it,
ask questions,
offer improvements

5. Designing in the Open
What does it mean to design in the open?
● To be transparent
● To keep all processes and content
open to all
● To allow anyone to comment or
propose changes

6. Open Source UIs
Reactive: doing just enough
Improving: more focus on usability
Proactive: investing in UX
Before 2013
2014 - 2016
2017 - present

7. Open Source UIs - just enough
Show examples
2013

8. Open Source UIs - more focus on usability
Show examples
Fuse
OpenStack CloudForms OpenShift
Satellite IDM
PatternFly 3
2016

9. Open Source UIs - investing in user experience
PatternFly 4
2019

10. Influence
Concern
Influence
Concern
Proactive vs Reactive
Design

11. Proactive Design
Holistic design approach,
Influence is higher
Needs planning up front,
Takes time

12. Proactive designs are... “informed by
actual user needs, not by guesses about
how people might use a product.”
Designers are empowered to...
“promote what an ideal experience
could be.”
-Jared Spool

13. Proactive Design - Process
IMPLEMENT
- Collaborate with Development
- Usability test
PROTOTYPE
- Low Fidelity Mocks
- Paper Prototypes
- Validate with customers
CREATE
- Brainstorming
- Group Design
- Storyboards
- Journey Mapping
DISCOVER
- Competitive Analysis
- Stakeholder Discussions
- Interviews
- Journey Maps
- Clustering Insights
- Personas

14. Topology
Proactive Design
Case Study

15. Proactive Design - Topology - Discover

16. Proactive Design - Topology - Create

17. Proactive Design - Topology - Create

18. Proactive Design - Topology - Prototype

19. Proactive Design - Topology - Create again

20. Proactive Design - Topology - initial release

21. Service Catalog
Proactive Design
Case Study

22. Proactive Design - Service Catalog - Discover
DISCOVER
- Competitive Analysis
- Stakeholder Discussions
- Interviews
- Personas

23. Proactive Design - Service Catalog - Create

24. Proactive Design - Service Catalog - Create

25. Proactive Design - Service Catalog - Prototype

26. Proactive Design - Service Catalog - Create again

27. Reactive Design
Not design driven
UX is an afterthought

28. “Reactive design is just what it sounds
like: reacting to a problem in the
moment.
“Oh can you fix this? Help! Users are
complaining this is too hard! What can
we do?”
-Jared Spool

29. Reactive Design
Is it a good idea to do reactive design?
● Applying a bandaid
○ Visual improvements
○ Syntax changes
○ UX as an afterthought
● Not impacting the end to end user experience
● Still better than nothing!

30. API Explorer
Reactive Design
Case Study

31. Reactive Design - API Explorer Example
Initial POC

32. Reactive Design - API Explorer Example
Reactive Designs

33. Reactive Design - API Explorer Example
Reactive Designs

34. Reactive Design - API Explorer Example
Updated Implementation

35. Additional
Reactive Design
Case Studies

36. Reactive Design - Example
Use Case: Discover usability issue via beta testing
● Research
● Collaborate
● Identify small improvements
● Follow up next release

37. Reactive Design - Example
Use Case: Designer is tagged by the developer
requesting input on implementation
● Collaborate
● Design systems
● Make small improvements
● Suggest a stop gap
● Follow up next release

38. Best Practices /
Lessons Learned

39. When proactive design works well
But can it go wrong?
● Time to market is limited, sometimes you have to cut corners
● Requires more product knowledge up front
● New product
● New feature in a product
● Considerable lead time

40. When reactive design works well
● In open source, collaborative environments
● When teams are agile and changes are incremental
● To improve product cohesiveness - look and feel matters
● When focusing on contextual help, improving syntax

41. “The key to success with design is to
be collaborative and iterative at
every stage.”

42. Questions?

43. Resources
● Proactive and Reactive Design
○ https://medium.com/@jmspool/proactive-ux-design-a-big-leap-requiring-baby-steps-e13191
1a1609
○ https://writing.mariusz.cc/proactive-ux-design/
○ https://www.nngroup.com/articles/ux-lessons/
● OpenSource
○ https://www.quora.com/Why-does-open-source-software-have-such-ugly-interfaces
○ https://opensource.com/life/15/3/user-experience-open-source-future
○ https://www.wired.com/insights/2014/03/enterprise-ux-paradigm-shifts/