Design and Web team summary – 15 March 2019

by Peter Mahnke on 20 March 2019

This was a fairly busy two weeks for the Web & design team at Canonical. Here are some of the highlights of our completed work.

Web team

Homepage takeovers

This iteration we designed and built four takeovers for our home pages including:

• The German version of compliance webinar
• The German version of AI/ML webinar
• A CI/CD webinar takeover

cn.ubuntu.com

For the Chinese website we built a home page takeover and associated landing page for robotics.

Newsroom UX and Visual design

We have redesigned the press centre section on the blog. The objective was to create a more dedicated and functional press centre to access news and other resources on Canonical and Ubuntu. The target audiences are primarily journalists but also other influencers including analysts, bloggers, etc.

Design website refresh

During our recent Malta team sprint we began to look at redesigning design.ubuntu.com. In this iteration we continued some of that work, designing the homepage and design system sections.

Base team

The base team did a lot of work but only three things to really talk about this iteration.

• Published a FOSDEM blog post
• Started work on a Django module for our blog that uses the WordPress api based on the Flask version that will be used on the Chinese website and www.ubuntu.com.
• Work on an internal 360 review tool

Vanilla teams

We maintain the Vanilla css framework that most of the websites at Ubuntu and Canonical use. Here are a few patterns and websites that were updated.

Primary navigation

We’ve updated the styling of our primary navigation by removing the dividing lines to allow for more space for menu items, whilst updating the hover state of links removing the button background hover as previously seen.

Documentation mobile navigation

Currently, we don’t have a mobile-specific solution for Vanilla docs, it simply just scales and components respond accordingly.

With the help from Claudio, our in-house lead UXer, we managed to create a mobile solution which will help users navigate our brochure and documentation site through one menu.

New testimonial component

Currently we have a few variations of this component so we needed to align and have a consistent style to use across our suite of sites. It needed to be flexible enough that it can be used across a wide range of scenarios and shouldn’t be constrained to a specific number of applications.
Update allows for large and small variants as well as the ability to add an image.

manpages.ubuntu.com

The Ubuntu manpages website was already using Vanilla Framework but we took the time to design and style some updates to improve the polish of the pages. We also included some fixes to minor layout problems on the pages.

Documentation improvements

As part of our roadmap we’re continuing to improve our Documentation site by improving in areas to improve user engagement:

• Hierarchy and grouping
• Component do’s and don’ts
• Accessibility
• Updating real-life examples

JAAS

V1 f k8s deployment flow in JAAS

The team worked on defining a first user experience for the deployment flow of the new Kubernetes charms in JAAS. This first version will guide the users on the different deployment options on Kubernetes clusters (on public cloud, bespoke Kubernetes, MicroK8s).

Container models and machine models

With the implementation of the K8s charms in JAAS we want to provide a clear user experience and guide users to the right environment for their deployments. When starting a new model, users are asked whether they want to proceed with a container model, or a machine one. WIP.

Simplified store view within JAAS app

The team is exploring some solutions in order to simplify the view of the charm detail page within the JAAS application.

MAAS

• Added ability to power up and down machines directly on power icon in the list.
• Added in-table actions for individual machines (commissioning, deploying, assigning owner, changing resource pool / zone, etc).

• Notifications now display at the top of the machine list if in-table actions fail.
• Redesigned MAAS-provided DHCP in a subne’s page. Can not be turned on and off, relay to another VLAN support. The user can see and edit the ranges of IPs that will be used.
• The device discovery dashboard was accumulating long lists of devices over time – these can now be cleared, either individually, or all together. The user can now search and filter this view.
• Proposed a new design for storage-layout for a node, to cover ESXi and Windows layouts
• We’re spiking a move to the React framework to improve scrolling and other performance of the machine listings page.

Snappy

File name dispute

Publishers can now dispute a name when registering a Snap. If a name is already in use a publisher can provide rationale which will be reviewed and resolved by Canonical, based on a number of factors.

Embeddable cards

Publishers can also promote their Snap by embedding a card on their website. Cards can be configured as desired to include a screenshot, summary, snapcraft.io link and channel map. See an example below.

New header in homepage

To bring the Canonical branding forward within snapcraft.io, we added Suru in the header that makes the front-page to look more fresh!

Brand

Disco Dingo Wallpaper

Designed and created the numerous size variations of the Disco Dingo wallpaper for the 19.04 launch.

Whitepapers

Completed the Cloud-init whitepaper design and progressed the OpenStack Security one.

Booth graphics

Completed the booth graphics for the GTC San Jose event.

Canonical.com

Progressed the updated design of canonical.com and investigated a number of navigation updates and widget components to be utilised in the new site.