Juju GUI 2.0

Luca Paulina
User experience
Published in
3 min readJun 28, 2016

Juju is a cloud orchestration tool which enables users to build web environments to run applications. You can just as easily use it on a simple WordPress blog or on a complex big data platform. Juju is a command line tool but also has a graphical user interface (GUI) where users can choose services from a store, assemble them visually in the GUI, build relations and configure them with the service inspector.

Juju GUI allows users to:

  • Add charms and bundles from the charm store
  • Configure services
  • Deploy applications to a cloud of their choice
  • Manage charm settings
  • Monitor environment health

Over the last year we’ve been working on a redesign of the Juju GUI. This redesign project focused on improving four key areas, which also acted as our guiding design principles.

1. Improve the functionality of the core features of the GUI

  • Organised similar areas of the core navigation to create a better UI model.
  • Reduced the visual noise of the canvas and the inspector to help users navigate complex environments.
  • Introduced a better flow between the store and the canvas to aid adding services without losing context.
Old — Empty state of the canvas
New — Empty state of the canvas
Old — Integrated store
New — Integrated store
Old — Apache charm details
New — Apache charm details

2. Reduce cognitive load and pace the user

  • Reduced the amount of interaction patterns to minimise the amount of visual translation.
  • Added animation to core features to inform users of the navigation model in an effort to build a stronger concept of home.
  • Created a symbiotic relationship between the canvas and the inspector to help navigation of complex environments.
New — Mediawiki deployment
New — Mediawiki deployment

3. Provide an at-a-glance understanding of environment health

  • Prioritised the hierarchy of status so users are always aware of the most pressing issues and can discern which part of the application is effected.
  • Easier navigation to units with a negative status to aid the user in triaging issues.
  • Used the same visual patterns throughout the web app so users can spot problematic issues.
Old — Mediawiki deployment with errors
New — Mediawiki deployment with errors

4. Surface functions and facilitate task-driven navigation

  • Established a new hierarchy based on key tasks to create a more familiar navigation model.
  • Redesigned the inspector from the ground up to increase discoverability of inspector led functions.
  • Simplified the visual language and interaction patterns to help users navigate at-a-glance and with speed to triage errors, configure or scale out.
  • Surfaced relevant actions at the right time to avoid cluttering the UI.
Old vs New Inspector home view
Old vs New Inspector errors view
Old vs New Inspector config view

The project has been amazing, we’re really happy to see that it’s launched and are already planning the next updates.

Originally published at design.canonical.com.

--

--