jujucharms user experience

Registered by Curtis Hovey

Complete the outstanding features to integrate charm browsing with the Juju GUI. Users can learn how charms combine to deploy cloud services using Ubuntu. Users can search for charms, discover related charms, and share them with social sites.

jujucharms.com will become Canonical's site to promote Juju charms and demonstrate charm browsing integrated with the Juju GUI. The browsing experience promotes Juju and Juju charms, and is a utility to the Juju GUI.

Blueprint information

Gary Poster
Curtis Hovey
Cloud Engineering Orange Squad
Series goal:
Accepted for saucy
Milestone target:
Started by
Gary Poster
Completed by
Gary Poster

Related branches



* jujucharm.com performance
  - The API/GUI must quickly collect and display svg icons.
  - The API/GUI must quickly reshow sidebar/fullscreen when nothing has changed (Do not make a query to show what was just shown).
  - The squid must cache non-private requests to quickly return data.
  - The GUI must not search/filter before the user completes typing or selecting.
* jujucharms.com feature completion
  - The GUI must autocomplete search text.
  - The GUI must show the social sharing links.
  - The GUI must show categories.
  - The GUI must show related charms
  - The site must show animations.
  - It would be great to start collecting metrics and allowing users to send feedback directly
    to us when this is launched.

Some issues in this blueprint overlap with


(Make use of the browser's natural caching abilities)
As a dev-op,
I expect charm browsing to quickly load charms listings
because my browser knows how to cache external assets like icons

(Do not make duplicate requests)
As a dev-op,
I expect that toggling between sidebar and full screen view to be quick
because only the layout is changing, the data remains the same.

(Do not search until I finish entering criteria)
As a dev-op,
I want to finish entering my search criteria before showing results,
because otherwise, the browser slows and the UI changes as I am using it.

As a dev-op,
I want the search text field to suggest terms that match what I am typing,
so that I don't need to guess or do search that match nothing.

(Social sharing)
As a dev-op,
I want to share the charm I found with a social site,
so that my colleagues know about what I have discovered.

As a dev-op,
I want to browse charms by category,
so that I can find charms I don't know about that meet my needs.

(Related charms)
As a dev-op,
I want to see charms that relate to the charm I am seeing,
so that I know the other charms that collaborate with this one.

As a dev-op,
I want to see animates transitions when the layout changes,
so that I am not disorientated when an action changes the layout.

(Text and layout refinements)
As a dev-op
I want to see consistent text and layout
so that I can apply what I have already learned to quickly use the UI.

As a developer of jujucharms.com
I want to see usage analytics
so that I can remove unused features and fix those that do users find difficult.



Work Items

Work items:
[ce-orange-squad] review update UI with UX to discuss implementation concerns and timeline: DONE
[sinzui] Get clearification from design on displaying the number of +1, Likes, Tweets: DONE
[luca] provide UX animations with timing for Huw: DONE
[ce-orange-squad] Do not make duplicate requests: DONE
[ce-orange-squad] enable new charm browser as default in GUI: DONE
[ce-orange-squad] Make use of the browser's natural caching abilities: DONE
[ce-orange-squad] Categories: DONE
[ce-orange-squad] Related charms: DONE
[juju-gui] enable drag and drop deployment: DONE
[juju-gui] Masthead: DONE
[juju-gui] Analytics: DONE
[ce-orange-squad] Social sharing: DONE
[ce-orange-squad] Do not search until I finish entering criteria: DONE
[ce-orange-squad] Autocomplete: DONE
[ce-orange-squad] Text and layout refinements: DONE
[ce-orange-squad] Animations: TODO
[jorge] write templates for all the sharing services: TODO
[sinzui] Investigate adding a "leave feedback fom" for each charm that goes to the maintainer of the charm: TODO

Dependency tree

* Blueprints in grey have been implemented.

This blueprint contains Public information 
Everyone can see this information.