8 May 2024

|

Time to read:

|

My work

Designing a banner component

Context: Coherent is a web-app for managing coworking spaces. In the user hierarchy there are Hosts - who run the workspace, and Members - who have a subscription to the workspace

We’ve got a feature coming up that will add 'emergency contact’ fields to a Members profile. These fields are quite important, and whilst not required in order for the profile to work, they are fields that provide useful information for Hosts. Directing new Members to those fields can be handled as part of their onboarding flow, but directing existing users, who’ve already filled out their profiles, is a little more tricky. So we’re introducing the concept of "Your profile is not quite complete".

Hosts will be able to decide whether emergency contact details are a requirement of a "complete profile", and if so, a banner will appear in a Members dashboard if they’ve not already provided them. This gave me an opportunity to revisit our banner component, something I’d been meaning to do for a while

Our previous banner component was an over-complicated component, built many years ago when I was a bit too trigger-happy where auto layout and nested components were concerned. I’d built a Swiss army knife of a component where different layers and elements could be toggled on and off according to what was needed at the time. But after seeing how these banners were actually used in production over the years, I realised that most of the time, most of these elements would be toggled off.

Ripe with this knowledge and a desire to keep things simple, I set out to build a new banner component, adding element-by-element, judging slowly what was actually required. The goal here was really to reduce complexity in both the Figma component and the component that would be used in development. This meant simplifying layers, establishing content guidelines and tweaking the colour palette used in each banner

The text content was the most important part so that’s where I started; an auto-layout text layer. I then added a background colour for each of the four types of banner; information, positive, warning, negative.

A collection of banners with lorem ipsum placeholder text

Following this I considered how links and buttons would look. These banners should display important information to users, but should also provide some direction. This could just be a link to somewhere where they can find more information, or a link to a page where they can resolve the problem being presented. At first I tried adding a button component below the content but felt that they just didn’t fit. They had too much presence, made the banner quite a bit bigger than I think it needed to be, and offered little more than an inline link

The next thing to consider before moving on to finishing touches were icons. I wanted to use colour to convey the context of the banner; blue for something informative and red for an error or severe warning for example. I originally felt that an icon would therefore be redundant, but after testing a banner in situ, without an icon, it felt like a core part of a banner was missing. In addition to this, whilst our colour palette does meet contrast guidelines, we don’t yet support colour palettes for different levels of colour blindness, which means that relying on colour to convey the severity of a message is not always the best approach. In this case, the icons serve as a fallback to provide that context

A collection of banners with lorem ipsum placeholder text and icons to represent their state

The next step then was to tweak and add finishing touches, and the first thing I wanted to tackle was the text colour. I’d started by using our Grey900 on top of a 100 background like Red100. This served well for contrast, but I did feel that the text clashed quite a bit, especially in the green and red banners. Swapping the Grey900 for a coloured ~600 value helped with cohesion, but I had to drop the background colours to 050 to ensure that an adequate contrast ratio was met. For simplicity, I applied the same colour to both the text and icon. I think that if I was using bold icons rather than outline icons, I’d likely use a different colour for the text and icon to avoid them muddling together

The final touch was to try and make the banners feel a little less flat, and to add a harder border between them and the page in the background. Shadows felt messy so I ruled those out fairly quickly and instead opted for a coloured border, starting originally with a dark colour in the region of ~700. Whilst this helped to provide that distinction, it felt really severe and again lacked cohesion. I then went to the other end of the scale, trying a 200 value and felt that these made the borders feel much softer, whilst still acting as a sufficient divide between the page and the banner

A collection of banners with lorem ipsum placeholder text and icons to represent their state

I set up a .base component where I could set the basic layout variables like spacing and corner radius, and then created a component group where styles like text colour, background colour and icon instance are set for each of the four banner types.

Lastly, I worked on the documentation for this component, making sure to provide design notes for myself to refer to in the future, and also handoff notes for our developer to use. I’ve recently started adding usage guidelines to my component documentation, especially with components like this where their text content is so important. I made note of things like only using sentence case, keeping content concise by removing superfluous words and ensuring that inline links are detailed - '…add payment details' rather than just '…see more'. In my opinion these notes are really valuable as they help me to remain consistent each time I use a component in design, but they also give me some context years down the line about what design decisions I made at the time and why. There’s nothing worse than looking at an old component in the library and thinking "why is that the way it is?"

Overall I’m really happy with how these banners have turned out and look forward to seeing them in production as we roll them out over the coming months

Context: Coherent is a web-app for managing coworking spaces. In the user hierarchy there are Hosts - who run the workspace, and Members - who have a subscription to the workspace

We’ve got a feature coming up that will add 'emergency contact’ fields to a Members profile. These fields are quite important, and whilst not required in order for the profile to work, they are fields that provide useful information for Hosts. Directing new Members to those fields can be handled as part of their onboarding flow, but directing existing users, who’ve already filled out their profiles, is a little more tricky. So we’re introducing the concept of "Your profile is not quite complete".

Hosts will be able to decide whether emergency contact details are a requirement of a "complete profile", and if so, a banner will appear in a Members dashboard if they’ve not already provided them. This gave me an opportunity to revisit our banner component, something I’d been meaning to do for a while

Our previous banner component was an over-complicated component, built many years ago when I was a bit too trigger-happy where auto layout and nested components were concerned. I’d built a Swiss army knife of a component where different layers and elements could be toggled on and off according to what was needed at the time. But after seeing how these banners were actually used in production over the years, I realised that most of the time, most of these elements would be toggled off.

Ripe with this knowledge and a desire to keep things simple, I set out to build a new banner component, adding element-by-element, judging slowly what was actually required. The goal here was really to reduce complexity in both the Figma component and the component that would be used in development. This meant simplifying layers, establishing content guidelines and tweaking the colour palette used in each banner

The text content was the most important part so that’s where I started; an auto-layout text layer. I then added a background colour for each of the four types of banner; information, positive, warning, negative.

A collection of banners with lorem ipsum placeholder text

Following this I considered how links and buttons would look. These banners should display important information to users, but should also provide some direction. This could just be a link to somewhere where they can find more information, or a link to a page where they can resolve the problem being presented. At first I tried adding a button component below the content but felt that they just didn’t fit. They had too much presence, made the banner quite a bit bigger than I think it needed to be, and offered little more than an inline link

The next thing to consider before moving on to finishing touches were icons. I wanted to use colour to convey the context of the banner; blue for something informative and red for an error or severe warning for example. I originally felt that an icon would therefore be redundant, but after testing a banner in situ, without an icon, it felt like a core part of a banner was missing. In addition to this, whilst our colour palette does meet contrast guidelines, we don’t yet support colour palettes for different levels of colour blindness, which means that relying on colour to convey the severity of a message is not always the best approach. In this case, the icons serve as a fallback to provide that context

A collection of banners with lorem ipsum placeholder text and icons to represent their state

The next step then was to tweak and add finishing touches, and the first thing I wanted to tackle was the text colour. I’d started by using our Grey900 on top of a 100 background like Red100. This served well for contrast, but I did feel that the text clashed quite a bit, especially in the green and red banners. Swapping the Grey900 for a coloured ~600 value helped with cohesion, but I had to drop the background colours to 050 to ensure that an adequate contrast ratio was met. For simplicity, I applied the same colour to both the text and icon. I think that if I was using bold icons rather than outline icons, I’d likely use a different colour for the text and icon to avoid them muddling together

The final touch was to try and make the banners feel a little less flat, and to add a harder border between them and the page in the background. Shadows felt messy so I ruled those out fairly quickly and instead opted for a coloured border, starting originally with a dark colour in the region of ~700. Whilst this helped to provide that distinction, it felt really severe and again lacked cohesion. I then went to the other end of the scale, trying a 200 value and felt that these made the borders feel much softer, whilst still acting as a sufficient divide between the page and the banner

A collection of banners with lorem ipsum placeholder text and icons to represent their state

I set up a .base component where I could set the basic layout variables like spacing and corner radius, and then created a component group where styles like text colour, background colour and icon instance are set for each of the four banner types.

Lastly, I worked on the documentation for this component, making sure to provide design notes for myself to refer to in the future, and also handoff notes for our developer to use. I’ve recently started adding usage guidelines to my component documentation, especially with components like this where their text content is so important. I made note of things like only using sentence case, keeping content concise by removing superfluous words and ensuring that inline links are detailed - '…add payment details' rather than just '…see more'. In my opinion these notes are really valuable as they help me to remain consistent each time I use a component in design, but they also give me some context years down the line about what design decisions I made at the time and why. There’s nothing worse than looking at an old component in the library and thinking "why is that the way it is?"

Overall I’m really happy with how these banners have turned out and look forward to seeing them in production as we roll them out over the coming months

Context: Coherent is a web-app for managing coworking spaces. In the user hierarchy there are Hosts - who run the workspace, and Members - who have a subscription to the workspace

We’ve got a feature coming up that will add 'emergency contact’ fields to a Members profile. These fields are quite important, and whilst not required in order for the profile to work, they are fields that provide useful information for Hosts. Directing new Members to those fields can be handled as part of their onboarding flow, but directing existing users, who’ve already filled out their profiles, is a little more tricky. So we’re introducing the concept of "Your profile is not quite complete".

Hosts will be able to decide whether emergency contact details are a requirement of a "complete profile", and if so, a banner will appear in a Members dashboard if they’ve not already provided them. This gave me an opportunity to revisit our banner component, something I’d been meaning to do for a while

Our previous banner component was an over-complicated component, built many years ago when I was a bit too trigger-happy where auto layout and nested components were concerned. I’d built a Swiss army knife of a component where different layers and elements could be toggled on and off according to what was needed at the time. But after seeing how these banners were actually used in production over the years, I realised that most of the time, most of these elements would be toggled off.

Ripe with this knowledge and a desire to keep things simple, I set out to build a new banner component, adding element-by-element, judging slowly what was actually required. The goal here was really to reduce complexity in both the Figma component and the component that would be used in development. This meant simplifying layers, establishing content guidelines and tweaking the colour palette used in each banner

The text content was the most important part so that’s where I started; an auto-layout text layer. I then added a background colour for each of the four types of banner; information, positive, warning, negative.

A collection of banners with lorem ipsum placeholder text

Following this I considered how links and buttons would look. These banners should display important information to users, but should also provide some direction. This could just be a link to somewhere where they can find more information, or a link to a page where they can resolve the problem being presented. At first I tried adding a button component below the content but felt that they just didn’t fit. They had too much presence, made the banner quite a bit bigger than I think it needed to be, and offered little more than an inline link

The next thing to consider before moving on to finishing touches were icons. I wanted to use colour to convey the context of the banner; blue for something informative and red for an error or severe warning for example. I originally felt that an icon would therefore be redundant, but after testing a banner in situ, without an icon, it felt like a core part of a banner was missing. In addition to this, whilst our colour palette does meet contrast guidelines, we don’t yet support colour palettes for different levels of colour blindness, which means that relying on colour to convey the severity of a message is not always the best approach. In this case, the icons serve as a fallback to provide that context

A collection of banners with lorem ipsum placeholder text and icons to represent their state

The next step then was to tweak and add finishing touches, and the first thing I wanted to tackle was the text colour. I’d started by using our Grey900 on top of a 100 background like Red100. This served well for contrast, but I did feel that the text clashed quite a bit, especially in the green and red banners. Swapping the Grey900 for a coloured ~600 value helped with cohesion, but I had to drop the background colours to 050 to ensure that an adequate contrast ratio was met. For simplicity, I applied the same colour to both the text and icon. I think that if I was using bold icons rather than outline icons, I’d likely use a different colour for the text and icon to avoid them muddling together

The final touch was to try and make the banners feel a little less flat, and to add a harder border between them and the page in the background. Shadows felt messy so I ruled those out fairly quickly and instead opted for a coloured border, starting originally with a dark colour in the region of ~700. Whilst this helped to provide that distinction, it felt really severe and again lacked cohesion. I then went to the other end of the scale, trying a 200 value and felt that these made the borders feel much softer, whilst still acting as a sufficient divide between the page and the banner

A collection of banners with lorem ipsum placeholder text and icons to represent their state

I set up a .base component where I could set the basic layout variables like spacing and corner radius, and then created a component group where styles like text colour, background colour and icon instance are set for each of the four banner types.

Lastly, I worked on the documentation for this component, making sure to provide design notes for myself to refer to in the future, and also handoff notes for our developer to use. I’ve recently started adding usage guidelines to my component documentation, especially with components like this where their text content is so important. I made note of things like only using sentence case, keeping content concise by removing superfluous words and ensuring that inline links are detailed - '…add payment details' rather than just '…see more'. In my opinion these notes are really valuable as they help me to remain consistent each time I use a component in design, but they also give me some context years down the line about what design decisions I made at the time and why. There’s nothing worse than looking at an old component in the library and thinking "why is that the way it is?"

Overall I’m really happy with how these banners have turned out and look forward to seeing them in production as we roll them out over the coming months

More like this.

We redesigned some components, introduced design tokens and officially launched Hotdesk - the design system behind Coherent

28 Mar 2024

|

Time to read:

1 Min

|

My work

My process for designing a new type of checkbox, displaying more information and providing more context for users

19 May 2023

|

Time to read:

2 mins

|

My work

How adding a tiny piece of UI to my labels helped to make them stand out

19 Jan 2023

|

Time to read:

2 mins

|

My work