Design and Web team summary – 03 September 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 squad

Web is the squad that develop and maintain most of the brochure websites across the Canonical.

Build and release

The site has been built and deployed. It will gain a discourse in the near future but for now, the documentation is housed in the project. has been upgraded to Vanilla 2.3.0

A vast majority of the work was updating the markup to match the new classes and mark up structure required for Vanilla 2.

Design takeover templates

To speed up delivery of takeovers we are planning to create a set of takeovers which can be reused. This should speed up the design and development of the takeovers going forward.


Base is the team that underpins our toolsets and architure of our projects. They maintain the CI and deployment of all websites we maintain. 

Certification development

Development of the certification site has been completed and just in QA before being released and replace the current certification website.


The MAAS squad develop the UI for the maas project.

Convert settings to React

Most of the parts of settings are now in React, the only outstanding ones are DHCP snippets and Scripts, which will be completed in the next iteration. 

Machine summary network card design

The machine summary page shows a summary of the physical characteristics of a machine, we are adding a new card this cycle, that displays the network characteristics. After a number of iterations, we decided on including the fabric (untagged traffic only) that the interface is connected to, link speed and status, DHCP and SR-IOV overview. 


The Vanilla squad design and maintain the design system and Vanilla framework library. They ensure a consistent style throughout web assets. on Vanilla

On the final stretch to migrating to Vanilla 2.3.0, this iteration we’ve completed all account pages, updated the email template and some miscellaneous pages found in the IA.

JS in documentation

We currently don’t document that some components require JavaScript, and that users will need to provide the implementation. First pass is adding a notification within the docs page with a functionality section.

 This iteration we designed a pattern to display the JS required for a Vanilla components,  which has been designed and will be developed in the coming weeks to supersede our current implementation.


The Snapcraft team work closely with the snap store team to develop and maintain the snap store website.

Guided feature tour for publishers

Recent work was focused on building a guided tour that allows us to highlight new and/or important features to our users. Via small steps, a tour explains the concept, functionality and different UI elements of a feature helping to educate and onboard users.

The very first tour implemented can be found within the snap listing page. This aims to help publishers improve quality and overall completion of their public listing in the Snap Store.

About: Blog