Vanilla is a simple extensible CSS framework written in Sass, by the Ubuntu Web Team. I lead the projects design for existing and new components, updating documentation and continuing to evolve the design system.
Mini sprint session.
This was a sprint that we had at the beginning of the year, we took a week to conduct a full audit to review our system. From this several decisions were made that influenced the future of Vanilla, so it was a useful process to document and highlight.
Process diagram.
This shows the thinking that should happen before you start working on a component, or if you want to propose a new component or pattern into our framework.
Open source design.
We document all our design specs on GitHub. Each component should have its own folder, and include two files: Detailed written spec for engineering and a visual spec for designers to reference.
Sketch library.
I created a master a Sketch file of common design components in the framework, so that designer's had a source of truth when using Vanilla in their designs. It updated bi-weekly so design was in sync with our build releases.

Example of components within Sketch library.

Homepage redesign.
We set out to redesign the homepage and make it less of a documentation site and make it more engaging for both engineers and designers, to drive adoption of Vanilla and encourage contributions back into the framework.

CrazyEgg navigation data.

Initial explorations.
From rough sketches to various iterative UI designs to find the right solution.
What we achieved.

Vanilla homepage.

Vanilla documentation landing page.

Settings / Colour overview.

Button component page.

Vanilla adoption.
Evolving the framework from web to app enabled more adoption from our other brands to consume Vanilla as it's building blocks.

Ubuntu homepage.

Snapcraft documentation homepage.

JAAS Storefront.

You may also like

Back to Top