Learn more at http://moretaller.com/case-study-anypoint-studio

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