Optimising our digital design process

We’ve optimised our design process to help us collaborate virtually, and it’s made a huge impact in the way we work.

Hero Image

This hasn't just improved the design teams workflow but has also created much more positive impact elsewhere.

  • Greater visibility for clients 
  • More integrated approach with development throughout 
  • Time savings
  • Better experience outcomes

It’s hard to believe that nearly a year ago, we were all put into lockdown and needing to work remotely. At Yoyo, we have always had the flexibility to work in the studio or from home. But since working remotely full time, we noticed something that could be improved - one of our design tools.

When we were in the studio, we used Sketch as our primary UI design tool. In order to allow the rest of the team to access these files, we had to store them on our server. It was here that we started to realise time was being wasted uploading and downloading files. We needed a way to collaborate better on our projects.

The switch

As we started to look into alternative design tools, Figma was that one that stood out. If you are not aware of what Figma is, it’s a browser-based UI design application that allows you to design and prototype digital products. It is similar to Sketch in terms of functionality and features but as it is a cloud-based tool, it enables teams to work on projects from anywhere at the same time, making it a great collaborative tool.

It even offers a desktop app, which means we don’t have to always work in our browsers.

This was definitely something we knew could help solve our issues with working remotely, not to mention one of our UX strategists, Mike, having experience using & constantly telling us to move to Figma :)

With a familiar interface that was easy for our team to adopt, and tons of great features, we have really noticed changes in the way we work. From the way we design our products, to the structure of assets & internal processes, Figma has made a real difference.

And it is some of these changes that I would like to share with you.

Collab Image

Better collaboration

Working remotely has certainly made it more difficult to collaborate on a project - especially when we are used to having a studio where we can get together easily.

But Figma has made our design work more visible across our teams, allowing us to see who is contributing to each project, browse the latest files, and most importantly - edit together in real time. It has allowed us to have more than one designer on a project and discuss and make edits together - improving communication, speeding up concept time and being able to push our ideas further.

Previously, we would have to work on separate files, whilst not being able to see the other designers work. We would then have to download both files and merge them together - and this added on time.

It has not only allowed our teams to get quickly aligned but we are able to take our clients on the journey too.

With our designs on one large canvas, our work becomes a lot more visible. Our clients are able to leave comments and provide feedback directly within the designs, allowing us all to have conversations and make decisions faster. By editing in real time we can make changes to our designs directly in front of our clients. This makes it really easy for them to understand our thinking, and become involved within the design process.

Structure Image

Creating structure

With us moving over to a cloud-based system, it was clear right from the start that we needed to organise our work in a way that improves collaboration between our teams, follows our internal process and created consistency across every project. After a few explorations and internal tests with the team, we decided that our structure should be split up into 3 ways.

  • Team - Includes all of our Yoyo team
  • Projects - Where all of our clients & projects are stored
  • Files - Organised to include each part of the process section within a project

It was also clear that we needed a way of making it easy for any member of our team to be able to identify and access the right section as quickly as possible. Each project has a file / section that is clearly labelled with a cover (i.e UI System) which has also helped create project consistency.

Another issue we wanted to solve was understanding the status of each section of the project throughout the process. To solve this we utilised Figma’s ‘Instances’, which allowed us to quickly change whether that section was ‘Signed off’ or ‘On Hold’.

Our developers and project teams have found it much easier to access the right files - reducing the need to spend more time asking & looking for things.

Reshaping the way we work with our developers

Before we made the switch to Figma, sharing our designs with developers or anyone outside of the design team was often quite time-consuming. Our designs would usually need to be completed before sharing amongst the team. Figma enables our developers to be involved throughout the entire process, enabling us to have conversations around feasibility and workarounds as we’re designing and not after they’re done.

A design process can be very messy, and it’s important to share only the relevant components and designs that you wish to discuss.

This is where Figma has enabled us to create a dedicated and organised ‘Components’ page within our ‘UI System’. Figmas ‘components’ allows us to make changes as a team on any specific design and update automatically throughout all page designs, saving the rest of the team navigating through every page design - ultimately saving time.

Inspect Image

Figma has made it easy for ‘developer hand-overs’ between the design and development team, allowing access to all exported assets such as images and design styles. The code panel also allows developers to extract code information from a specific element or component - giving our dev team what they need in a way they see it.

With the ability to link and embed our Figma files, our design team are able to add designs to Jira tickets much more quickly (previously a much slower task of uploading jpegs to each ticket). This also comes with the added benefit of seeing the designs in real-time within Jira, and ensuring our developers are always viewing the latest designs files.

After using Figma for the past ‘almost’ year, we have really noticed the benefits and huge changes in the way we work as an agency here at Yoyo as well as the impact it has on client collaboration throughout the project. Figma has so many great features, regular updates and a great community that we cannot wait to explore further.

If you’d like to have a chat with me or one of our designers about Figma, and how it can help your process and outcomes, get in touch at

Related post

Umbraco vs WordPress: Everything you need to know

Read next