01 Dec 2021

Figma and our design process

When our design team made the move from Sketch to Figma in 2019, the tool showed promising features to help with our design process. 2.5 years later, it’s not even a fair contest anymore. Some of us use Figma all day every day, 5 days a week, it’s become so good we could even have a go during the weekends. 🤓 

2.5 years is a long time, and we’ve slowly but surely discovered every new feature, submenu and plugin Figma has to offer, always trying to make the most of it and make our process as smooth and consistent as ever. Now, how can a design tool make our lives so much easier you ask? Let me explain.

Auto layout and wireframing

It all starts with UX. Although we still love our Mural boards for workshops, we now create our wireframes exclusively in Figma.

On projects that are fully component-based, we start by creating all the different paragraph types and page headers, as part of our process of delivering platforms with Drupal.

The auto-layout feature has allowed us to focus on design first. Once components are set up, Figma can take the back seat and our designers can freely play around with layouts, making changes on the spot when exchanging with clients or users. This helps with the ideation process, as well as making sure consistency is kept throughout : even in UX, every component is an instance of a master component, on which changes affect all the different pages.

Variants & design system

As good as Figma is with wireframing, it really shines when creating the final product UI that will be handed over our own in house development team. The first step has always been creating a consistent and accessible design system, and Figma has made it easier than ever.

It is of course an amazing tool for creating libraries, grids, colour and text styles. But some features have allowed us to take our game to the next level when creating all sorts of components: CTAs, inputs, dropdowns, tabs and many more.

The first is one we've already mentioned, Auto-layout. It has become the default way to build any component of a design system, so that we never have to worry again about resizing, padding, margins. But when the Variants feature dropped over a year ago, this took things to the next level. Each state/screen size/colour of a component can leave under the same master component, as variants. This allows for much cleaner and tidier libraries, as well as allowing us to quickly change between variants when putting screen together. Oh, and it's also a game changer for prototyping, but more on that later...

Constraints, auto-layout & components

Once those design system foundations have been put together, our team can start looking at designing bigger components (called organisms in an atomic design system). And once again, by combining the use of auto-layout, variants and constraints, we are able to build responsive, adaptive and consistent components, ready to be mocked up with any content, in any situation.

This allows us to communicate behaviours in function of screen width to Front-End developers, as well as allowing us to quickly and automatically mock up those components in any situation, without having to worry anymore about manually updating the component’s height when adding a lot of text for example (yes, this was how it was done not so long ago 👀).

Overall, we now have design systems with components that adapt to their content, can easily switch between states and overall makes having a consistent and well built UI simpler than ever. Yes, it’s a game changer.

Interactive variants & prototyping

Once the designs are complete, the last part of our UI process is to create prototypes of components with complex behaviours. This helps communication with Front-End developers, sharing information about micro-interactions, transition animations - does the transition appear with a fade-in? Appear instantly? Should motion easing be applied to it? These are elements that will help the user’s interactions with UI elements, lead the eye to the next element, help with decisions. It’s finessing, but eventually makes the difference between a journey that feels smooth and one that can feel confusing at times. This makes prototypes a tool of communication between designers and developers.

By making prototypes as close to the final product as possible, it will also help designers and clients to run testing sessions with users or internally. To either validate a solution or to ideate further on the user’s journey.

The introduction of the interactive variants feature in Figma has made this process much easier, and goes a long way into helping us prototype the most realistic interactions possible. It allows us to set interactions between master components that will affect all instances of the component in the prototype. This means pickers can each automatically have their own hover state for instance, and we also have been pushing the feature with the use of custom delay animations, to replicate the behaviour of a text input cursor. All together, this helps give prototypes a lot of realism, and replicate the feeling of using the final product.

Just over 5 years ago, designers would build screens and components in Photoshop. Then we moved to tools custom made for product design, starting with Sketch, and our workflow drastically improved. We have been using Figma for more than 2 years now, and we can’t wait to see what the future holds, test new tools, features, to bring designs closer to reality, users, clients, developers… 

No tool will be perfect, but we’re having more and more fun using them, that’s for sure.

29 Jan 2021

Web Accessibility Series: Part 1 - Colour Accessibility

Kicking off Part 1 of Catch’s new web accessibility series exploring the different ways we can make the internet accessible for everyone.
 

This month the Experience Design (XD) team at Catch is kicking off the first segment of our Accessibility Series, aimed at positioning accessibility as less of a challenge that needs to be tackled, and instead encouraging designers to embrace accessibility and view it as an integral part of their process. Each part of the series will provide an overview of our main learnings and provide relevant resources and advice to help you stay on top of accessibility. Part 1 covers how to address colour accessibility in our work.

 

Alt text: visual of overlapping circles in different colours and patterns

Overview 

Before we answer that question, we first want to provide a brief overview of the history of Accessibility Guidelines. 

In 1999, the World Wide Web Consortium (W3C) created a set of guidelines called the “Web Content Accessibility Guidelines” as part of the Web Accessibility Initiative (WAI). The mission of the WAI is to lead the Web to its full potential of usability, enabling people with disabilities to participate equally on the Web.

Alt text: image of cartoon cat with words like inaccessible? Wow? Huh? Floating around them

What is colour accessibility?

Colour accessibility is the inclusion of enough contrast between the foreground text colour and the background colour to ensure text and iconography is easily recognisable. 

It also includes guidelines on how to distinguish between elements with colour, for example, in bar charts. Choosing different colours for different elements is not enough though. Anything that is indicated by colour should have a secondary way for it to be distinguished, for example a pattern, like in the example below.

Alt text: image of a bar chart with the appropriate colour contrast and patterns on each element to show how to be accessibility compliant

Why do we follow these guidelines?

We follow these rules to make the internet more accessible for people with a decreased ability to see colour, or a decreased ability to tell colours apart from one another. Colour blindness is more accurately referred to as Colour Vision Deficiency (CVD) and occurs in 8% of males and 0.5% of females worldwide, constituting a significant portion of the population.

(Source: Geri Coady, “Color Accessibility Workflows”)

Three Main Learnings

 

1. Guidelines are great, but also user test when possible

Despite all intentions to ensure guidelines match real user’s needs, this is not always the case. Take the example below. At first glance, you may think that there’s no way the white text over the busy and colourful background is legible. But according to the Accessibility Guidelines, in the below image “all texts meet AAA colour contrast requirements.”

Alt text: image of text over a busy colourful background that doesn’t seem accessible but according to the guidelines passes, showing a discrepancy

This is because “when background images are used, automated tests aren’t reliably able to check for minimum contrast of text against the image - especially if the image is a photograph or drawing where the text is placed over the image, and (2) situations in which depending upon context such as text becoming incidental because it is part of an inactive user interface component or is purely decorative or part of a logo” 

(Source: Challenges with Accessibility Guidelines Conformance and Testing, and Approaches for Mitigating Them). This reveals a limitation of available accessibility testers online and a need for making improvements.

User testing for accessibility is a good solution to solving the issue of guideline discrepancies in what’s said to help users and what is actually helpful.

2. We have a lot to learn. 

Despite the introduction of the Web Content Accessibility Guidelines in 1999, there is still a long way to go in terms of ensuring the internet is fully accessible. For example, 86.3% of home pages in February 2020 lacked sufficient colour contrast. Keeping in mind the percentage of males and females that have Colour Vision Deficiency (CVD), totalling around 300 million people, we know that those in need of accessible websites are not receiving the best user experience possible across the internet.

Alt text: illustration of a blind man, a voice command logo, and a cell phone

3. We should all be champions of accessibility. 

 

Accessible Sites have improved performance

Accessible websites are inherently more usable, providing a better experience for your site visitors. This is crucial given that 88% of users are less likely to return to a website after a bad user experience (Source: UXCam) Lower bounce rates, higher conversions, and less negative feedback likely associated with a more accessible website should in turn rank your site higher in search engines, thus increasing your chance of reaching more people. 

 

It’s a financial liability

Lawsuits have been brought against multiple organisations that did not provide accessible websites. An article titled “Companies are Losing Web Cases: Spend Money on Web Access, not Lawyers,” court cases were filed by blind people against Blick Art Materials, Five Guys, Winn-Dixie, and Hobby Lobby crafts. In all of these cases the plaintiffs won significant compensation from these organisations. The article title says it all. It’s worth investing in your site’s accessibility. 

 

It’s the right thing to do

The last, and most important reason for improving your site’s accessibility, is that everyone deserves access to the internet in a way that supports their needs. This is echoed in a statement by the United Nations which recognises the access to information and communications technologies as a basic human right.

Alt text: illustration of a guy giving a thumbs up and “you’re a okay” spelled with three a’s before it, next to him

Conversations around accessibility should be had frequently when kicking off new projects with both internal teams and clients to ensure everyone is invested in creating the best possible user experience. The W3C has resources to help you make a business case for improving your organisation’s accessibility that you can find here

Our team at Catch has expertise in designing and building accessible websites, having worked at the highest level of WCAG accreditation. We’ve worked with Scope (the pan-disability charity), accredited by The Shaw Trust for AAA accessibility, to design and build a range of products and are currently working with the Royal National Institute of Blind People to reimagine their digital presence with accessibility as a key focus. 


If you need help starting conversations around accessibility or are ready to get to work, please get in touch. And don’t forget to follow us on Instagram for more accessibility related content!

 

 

Start a conversation

0207 494 3554
or
newbiz@catchdigital.com