Velocity Web kit

A tool for consistency and collaboration.

Process, UX/UI, Web design
baseplate_mockup
Context

I’ve been part of defining our digital processes in the agency, and after attending an eight-week Digital Project Management course, I decided that we needed a useful tool to help us improve our work.

Challenge

Creating a tool that facilitates our digital projects and processes, once the user journeys and sitemap were signed off.

Approach

I decided to build an agency-specific Web kit in Figma that highlights our processes and sets the starting point for every new website.

Client
Velocity Partners
Agency
Velocity Partners, London
Role
Lead designer
(Concept, process, design)
Date
June 2020

Why not just download an already designed kit?

Well, downloading an existing kit would already help massively.

But it wouldn’t be tailored to our specific agency’s needs and provide guidance. And that’s what we wanted.

A universal tool for everyone involved.


After a bunch of retrospective meetings, chats and discussion, we established the most implicated parties and their individual needs:

Project & account managers – have a clear view of what’s going on, at all times

Design & copy – work together to make sure the design reflects the content at its best

Client – review and approve

Artwork – prepare final assets and provide them for implementation

Developer – building the final product


We defined three major issues we wanted to solve with our kit: Accuracy, collaboration, and efficiency.

baseplate_rationale

Accuracy & consistency.

With so many parties involved, it’s essential to work on the right things, in the right way —  so that everyone can benefit.

Knowing what’s needed, and what’s doable.


The Figma file follows the logical atomic structure, which involves styles, UI elements, and big modules.


All items inside the kit guarantee a straightforward web build without affecting budget and timings.

baseplate_atomic-design

Constraints for a more cohesive design.


To make sure that the design imitates the final CMS as much as possible, we built all elements with auto layout and constraints — for instance, to define padding and margin rules.


This avoids any surprises and complications during the build.

baseplate_auto-layout-padding

Everything is related.


It’s easy to forget the little details. For instance, does the primary button work on different colour backgrounds? And the hover state?


The kit already provides these rule sets, so that all dependencies and combinations are covered.

baseplate_rules

Collaboration.

The goal is to make life easier for everyone involved — that’s why we all have to aim for the same thing and know what needs to be done.

Who does what, and when.


We created a traffic light system that shows the exact state each element or page is in.


There are two types of labels:

  • internal labels — they help the communication between departments
  • client-facing labels — they indicate what is ready for review and what has been approved

Let’s speak the same language.


We labelled every single style, state, and UI element in the same way as in the CMS. This assures that we’re all talking about the same thing and avoid misunderstandings.

baseplate_label

Learning from each other.


There is a big ‘Tips’ section and little annotations through the kit. They include Figma tips, UX/UI best practices, and process guidelines. These are evolving as we’re learning and assure that we’re all up to date.

baseplate_tips

Efficiency. 

One of the major advantages — we spend less time setting up everything and concentrate more on the creative part of things.

Never start a project from scratch.


Setting up UI libraries from scratch is extremely time-consuming. Having this part covered and making sure we’re featuring everything necessary, saves a lot of time — time we can spend on more creative tasks.

baseplate_structure

Focus on structure and functionality.


The UI elements follow a neutral style for two reasons:

  • The creative can focus purely on structure and content when creating the wireframes.
  • The neutral style doesn’t influence or limit creativity when it comes to applying the visual design.
baseplate_neutral

Updating wireframes to the final design.


Everything inside the kit is based on organised instances — this makes it very quick and easy to apply the visual design to the wireframes.

baseplate_design-change

Retrospective.

This tool will always be evolving and improving based on our experiences and the projects we’re working on. Until now, it has proven itself as very useful.


Here’s a snippet of some websites that have used the kit.

baseplate_overview

See also

Mambu – a flexible brand for a fintech company.Mambu – a flexible brand for a fintech company.

Mambu – a flexible brand for a fintech company.

Art Direction Visual Identity
Netcall – a new brand and website for a CX company.Netcall – a new brand and website for a CX company.

Netcall – a new brand and website for a CX company.

Art Direction UX/UI Visual Identity Web Design
Velocity Web kit – a tool for consistency and collaboration.Velocity Web kit – a tool for consistency and collaboration.

Velocity Web kit – a tool for consistency and collaboration.

Process UX/UI Web Design
Away – an app for planning travel itineraries.Away – an app for planning travel itineraries.

Away – an app for planning travel itineraries.

App Design UX/UI
Wolfskin Tech Lab – a microsite for the new Jack Wolfskin collection.Wolfskin Tech Lab – a microsite for the new Jack Wolfskin collection.

Wolfskin Tech Lab – a microsite for the new Jack Wolfskin collection.

Art Direction e-Commerce UX/UI Web Design
Sprint Business – a campaign to explain 5GSprint Business – a campaign to explain 5G

Sprint Business – a campaign to explain 5G

Art Direction Digital Campaign UX/UI Web Design
Back To Top