A design system is a fundamental asset for any organisation that relies on a digital product. It allows designers and developers to quickly replicate components while keeping to design guidelines, helping to create consistency.
Surprisingly, a lot of companies still lack a design system. This leads to designers and developers creating inconsistent UI elements with varied styles, sizes and colours, such as buttons and text fields. These minor errors require extra time to correct, having a knock-on effect on budgets and project scope.
Komodo created a design system for Excelpoint, a company specialising in a no-code software solution for businesses. Their platform allows businesses to create unique systems using drag and drop, meaning no programming is required. Excelpoint uses Bootstrap to create its B2B application, and its UI elements were slightly dated.
We will walk you through how we created a design system that works for them.
Research
The first step in this project was applying best practices. In this section, we’ll focus on input fields, as it’s one of the primary UI components users interact with when using Excelpoint’s system.
Government design guidelines
The first source we consulted was the Government Design Principles on the GOV.UK website. The guidelines and components created and tested by the UK Government make sure that the whole UI is inclusive, legible and readable.
The chosen colour palette specifically meets the minimum requirements for accessibility. For example, you use the colour red when expressing an error state, like when a user misses a text field in a form.
Text size is another area the Government Design Guidelines test. Text size should always be at least 14px or more to meet the minimum accessibility requirements. The government uses 16px for their body font.
States and styling
Each of the components used within Excelpoint’s current system has several states. For example, a standard text input field could have five or six styles depending on user interaction. At any point, a text field can have a resting state, a hover state, a pressed or selected state, a complete state, and an error state.
It’s crucial to clearly define these different states to the end user.
After researching best practices for text input fields, the main opportunity we identified was title placement. Excelpoint had titles for their text fields positioned to the left, whereas best practice is placing these directly above the text field. This helps with readability and screen real estate when viewing on smaller devices.
Q&A
Once we gathered our research for the project, we followed up with Excelpoint to ask any questions regarding the existing system. By doing this, we could develop a more robust understanding of why the client took particular routes within their current component set, what we could and couldn’t change, and any restrictions regarding styling changes.
Planning the design system
Due to the scale of the project, we combined our research with the requirements of the project scope. Working virtually, Komodo’s design team used Miro, a collaborative virtual whiteboard platform, to enable us to ideate as a remote team.
Our first step in planning was to agree on styling changes, ensuring they were suitable for Excelpoint and their users. Choosing clean, minimalistic styling meant we could select colours that were not restricted by Excelpoint’s branding but also met all accessibility colour requirements.
At this stage, we decided that the best option would be to reposition all text field titles to the top rather than the side, allowing for an improved user experience across the platform.
To keep track of design changes, we stored all visual changes made to each component in a research document. For each adjustment, we detailed what changed and why. We ensured this document was updated daily, allowing the design team to keep track and allowing Excelpoint to use it as a reference during development.
Mapping out the existing system
One of the critical parts of the project was to map the existing system. As each component could have around five to nine various states, it was vital to ensure all states were taken into account: resting, hover, clicked or pressed, completed, and the error variants of each.
To achieve our goal, we decided to use Figma instead of Miro. Although Miro is an excellent platform for collaborative work, Figma allowed us to have the existing components side by side with the new components, as these were going to be created in Figma anyway.
We created individual sets for each component and their various states. There were four different component sets, which had approximately 80 components each. Each set was labelled with a corresponding letter, and numbers were used to represent the various components within the collection (such as A1, A2, A3). This created a detailed view of the components we were set to redesign.
Redesigning the components
Style guide
Before jumping into the redesign, there needed to be a style guide for the product designers to follow. Having guidelines makes the components uniform, eliminating inconsistencies between two or more designers’ work, including the most common offenders: sizing, spacing, colour and font sizing. Never underestimate the capacity of a style guide to reduce workloads.
Prioritising components
Understanding the priority in which the components needed to be created was essential; in this case, we created demo prototypes. Excelpoint were using these interactive demos to receive feedback from a selection of their current user base, so the first design sprint focused on delivering the features necessary for user testing.
The redesign itself
The first changes we made were the positioning of the text field title. As discussed during the research phase, the placement of the title for a text field can make a significant difference in terms of readability and screen real estate on smaller devices. When users view content, they scan over the screen. If the positioning of elements is inconsistent, it can make it harder to digest, increasing the time spent completing forms.
The titles were moved above the fields to accommodate readability. We made the title font bold to demonstrate hierarchy and stand out from other inputs. Placeholder text in the field guides the user on what to do next; to highlight this, placeholder text is formatted in a light grey colour.
As we added text to our redesigned components, we needed to ensure that this text met a minimum of AA for accessibility according to the Web Content Accessibility Guidelines (WCAG). We knew we had an excellent contrast ratio for any text, as we could use black text against a white background. We also ensured our font size was a minimum of 14px for the text fields; any smaller creates accessibility issues for those with visual disabilities.
The existing system emphasised mandatory fields with a pale yellow shade and a red asterisk, while optional fields looked like regular fields. Most fields were compulsory anyway, so we made all required fields a standard text input field and made optional fields stand out with an ‘optional’ text note positioned to the right of the title. Flipping the current standard on its head meant the user could identify two or three optional fields rather than being told about eleven or twelve mandatory ones.
These components are so interactive that a clear separation between states is necessary. For each state, we ensured the design differed enough for the user to understand every instance. When a text field is resting, the border is a lighter grey. When hovering, it becomes a darker grey. When clicked, the border becomes blue, with a slight blue shadow to focus the user’s attention. If validation detects an error, the border becomes red, and when the user finishes the field and clicks out, the box returns to its original light grey state.
Using Figma for design and collaboration
Figma allows designers to collaborate whilst working remotely, with a whole team working on one project simultaneously. Showing a client how components will work in a real-world environment is vital: Figma’s prototyping feature shows how a user can interact with a text field whilst it’s being pressed, hovered over, and resting.
Excelpoint could give their feedback by adding comments directly onto prototypes, which improved collaboration and reduced feedback-related time constraints.
Inspect is another useful feature. When a designer creates a button, it is often designed to be pixel-perfect to fit a specific grid layout: colours, padding, text size and font are all specifically chosen. When designs are passed to developers, the final output can drift from the original design if developers have no details to replicate from. Inspecting a component in Figma produces the CSS automatically, which cut that time down significantly.
The importance of a shared design language
User interfaces are constantly evolving to fit the needs of a platform’s users. Both designers and developers must know precisely how a component is styled. A design system is a visual design language that allows product teams to communicate their work, so design outputs such as styling requirements for accessibility and branding stay consistent throughout.
On top of that, design systems boost efficiency. Since all existing components are pre-built, repetition is reduced: components can be taken straight from the design system to start working on any project.
Testing and feedback
Once all our designs were complete, we began the testing phase. Without testing, how would we know if our designs improved the overall user experience?
Software to analyse visual attention
First, we needed to check that repositioning the text field title was correct. We used Visual Attention Software (VAS) to generate a report analysing our design prototypes. The VAS estimates the probability of the input fields being noticed by a user. We ran these tests on both our top-aligned label design and the existing left-aligned design to compare the two.
The total percentage of attention paid to top-aligned label fields was 97%, whereas the existing left-aligned labels scored 80%. A 17% increase in attention can make a dramatic difference to conversion rates and overall satisfaction.
Colour and accessibility
Colour contrast is a significant factor when designing a new set of components. We tested every colour combination to ensure text and UI elements stood out clearly against their background, meeting a minimum AA rating for colour contrast (a ratio of 4.5:1 or higher).
We also wanted the colours to be uniform, so the blue, red and green colours would be similar in contrast and brightness. Uniform colours create a visual harmony that reduces distraction from dramatic changes across the interface.
Communication is key
To ensure we were meeting the needs of accessibility and Excelpoint’s user base, we had regular meetings with the client to show new components, prototypes and changes throughout the project. Two-way communication enabled feedback we could use to tailor our approach, and Excelpoint leveraged the interactive prototypes to run feedback sessions with their core users.
Conclusion
A well-designed and purposeful design system isn’t just to make things look pretty; it’s a necessity for digital products. A design system creates consistency, helping to improve the user experience, brand cohesion and scalability.
As your digital product grows, new features, components and styles can be added to the design system cleanly. The benefits include better cost-effectiveness and getting to market in less time.
