Velocity Web kit
A tool for consistency and collaboration.
Process, UX/UI, Web design
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.
Creating a tool that facilitates our digital projects and processes, once the user journeys and sitemap were signed off.
I decided to build an agency-specific Web kit in Figma that highlights our processes and sets the starting point for every new website.
Velocity Partners, London
(Concept, process, design)
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.
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.
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.
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.
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.
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.
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.
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.
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.