The document proposes a visual overhaul of Mule Studio to improve the user interface. It identifies issues with the existing design such as outdated visual styling and inconsistencies. The proposed redesign aims to streamline the workflow with a cleaner interface, clearer hierarchy, updated icons, and improved usability of features like the palette, properties view and XML editing. The redesign will be implemented in phases over several release cycles through 2022. Risks include resource allocation and compatibility with the Eclipse platform.

1. #[visual.overhaul]

2. #[visual.overhaul.1]
Table of Contents
Goals
Existing Studio Issues
Visual Design
Usability
Workflow
XML Editing
Proposed Redesign
Visual Design
Usability
Workflow
XML Editing
Implementation Plan
Risks
Appendix
2
4
5
6
7
9
10
11
12
13
14
15

3. #[visual.overhaul.2]
Goals:
• Refine existing Studio interface
• Diminish Eclipse legacy
• Define iconography and style guidelines
• Streamline the experience of creating
and configuring Mule Applications

4. #[visual.overhaul.3]
Existing Studio Issues

5. #[visual.overhaul.4]
6
7
1
85
2
4
3
1 “Off the hook” 2004 visual
styling
2 Lack of visual hierarchy
3 Visual noise
4 Inconsistent iconography
5 Flow layout
6 Vertical space consumed by tabs
7 Properties view formatting
8 Tall flows
Visual Design

6. #[visual.overhaul.5]
1
6
7
4
3
5
2
1 Palette navigation and viewing
2 10% used windows shown
100% of the time
3 Message transparency gap
between elements
4 Unintuitive Datamapper
choreography
5 Confusing poll vs. streaming
inbound
6 Almost as many tabs as
connectors
7 Can’t collapse canvas elements
Usability

7. #[visual.overhaul.6]
3
4
15
2
1 Frequent tab switching through
development process
2 Drag and drop “clunkiness”
3 Package Explorer
4 Better perspective defaults
5 Global elements aren’t
consistent
Workflow

8. #[visual.overhaul.7]
4
1
5
2
3
1 XML and GUI relationship
2 No visibility into property
options
3 No MEL Autocompletion
4 XML highlighting
5 XML collapsing
XML Experience

9. #[visual.overhaul.8]
Proposed Redesign

10. #[visual.overhaul.9]
6
7
18
5
2
4
3
1 Modern, clean design aesthetic
2 Clear hierarchy and cascade of
detail
3 Restrained palette of icons and
tools
4 Platform consistent iconography
5 Improved flow layout
6 Fewer toolbars
7 Properties view formatting
8 Tighter nested elements
Visual Design

11. #[visual.overhaul.10]
1
6
7
4
3
5
2
1 Tighter palette drawers, large
list view
2 Package Explorer auto-expands
on hover
3 Message issues are surfaced
4 Datamapper is embedded in
each arrow
5 Guidance on poll vs. streaming
inbound (see Appendix, pg.16)
6 Fewer tabs, greater focus on
application content
7 Collapsible scope elements
(see Appendix, pg. 18)
Usability

12. #[visual.overhaul.11]
3
4
1
5 2
1 GUI & XML 2-way editing require
less tab switching
2 Improved drag and drop, clear
drop targets
3 New project explorer
4 Better perspective defaults
5 Global elements aren’t
consistent
Workflow

13. #[visual.overhaul.12]
4
1
5
2
3
1 XML and GUI 2-way editing,
palette available in XML
2 Message properties are visible
for each XML element
3 MEL Autocompletion
4 Improved XML highlighting
5 Improved XML collapsing
(See Appendix, pg. 28)
XML Experience

14. #[visual.overhaul.13]
Proposed Implementation Timeline
October 11 Release (3.6 M2)
• Migrate to Eclipse 4
• Hide unnecessary icons in toolbar
December Release (3.6 GA)
• New perspective and package explorer icons
• New Eclipse view styling and icons
• Improved Flow Layout
February Release (3.7 M1)
• Unified visual styling with Platform
• Notifications for Mule message issues
May Release (3.7 GA)
• New canvas & palette icons
• Smart auto-hide for package explorer tab
July Release (4.0 M1)
• New palette and message properties design
• New flow design and drag and drop
improvement
• Datamapper migrated to arrows
November Release (4.0 GA)
• Real-time XML/GUI 2 way editing

15. #[visual.overhaul.14]
Risks
• Resource allocation
• Priority relative to other features
• Implementation uncertainties in Eclipse
• Missing CSS support for certain elements
• Studio as a plug-in (Icon conflicts)
• Shift towards Web Studio
• Zombies, earthquakes, and political upheaval

16. #[visual.overhaul.appendix]

17. #[visual.overhaul.16]
Inbound flow prompts

18. #[visual.overhaul.17]
Drag and drop canvas targets

19. #[visual.overhaul.18]
Collapsed scope element

20. #[visual.overhaul.19]
Commented-out element

21. #[W20]
Arrows as buttons

22. #[visual.overhaul.21]
Datamapper

23. #[visual.overhaul.22]
Inspector error notification

24. #[visual.overhaul.23]
Inspector progressive disclosure

25. #[visual.overhaul.24]
Project Explorer visible

26. #[visual.overhaul.25]
Change workspace dropdown

27. #[visual.overhaul.26]
XML block highlighting

28. #[visual.overhaul.27]
XML line highlighting

29. #[visual.overhaul.28]
XML collapse