AppCheck
Industry
Cybersecurity
Team
Cross-functional team (Engineers, Product Manager, Directors)
Project outline
Refresh the visual identity and introduce a design system to ensure consistency, accessibility, scalability, and alignment across the product.
Introduction
I joined AppCheck as the first designer and was tasked with improving the product’s UI and overall user experience. My first priority was to develop a thorough understanding of the complexities of a highly technical security platform, along with understanding how our users interacted with the product and used it in their workflow.
The Challenge
With no established visual identity, design system, or UX principles in place, it resulted in not only disjointed experiences across the product, but a code base that had no central source of truth. The challenge was to introduce a new design direction and improve usability without disrupting the workflows that existing users relied on.
The Solution
The solution was to create a new design system and start experimenting with the visual identity of the brand for future web/marketing work, whilst also working closely with the newly appointed front-end developer to create a consistent code base engineers could easily use.
I developed a strategy by liaising with key stakeholders that would allow a new design style and UX patterns to be introduced incrementally. It was decided to tackle each area of the product individually, ensuring improvements could be made, all while avoiding high-risk changes in complex parts of the system.
The Visual Identity
The first step in the process was to establish a modern and sophisticated visual identity for both the product and the brand. In-depth competitor analysis showed that many companies in the industry tend to have a gimmicky or playful feel. Through internal discussions and an understanding of our existing client base, we decided to pursue a more enterprise-focused look and feel.
While many competitors default to dark mode, we made the deliberate decision to prioritise a light mode interface during the initial redesign, due to the current UI also being in light mode. This allowed us to implement the new design system without impacting other parts of the product.
For the colour system, we selected the Tailwind CSS Slate palette, due to its reliability and accessibility, whilst also providing a sense of stability and security that aligned with the product.
For the marketing website, we experimented with illustrations to add personality while maintaining an enterprise tone. The concepts were first designed in Figma, then refined using AI tools such as Claude, Figma Make, and Lovable to quickly generate variations and provide better context when presenting to stakeholders.
Developing a Design System
The design system was created in Figma following atomic design principles. Starting with setting the foundations, which included design tokens for colours, typography, spacing, corner radius, shadows, and icons, to ensure consistency across the entire product.
These foundations were then applied to all components, such as buttons, badges, and toast notifications, allowing for reusable and scalable design patterns, whilst adhering to WCAG guidelines. Every component and token was named in collaboration with the engineering team to ensure clarity around component states and usage. This close collaboration streamlined the handover process and improved the speed of development.
The Navigation
Part of our strategy involved identifying what we referred to as "Quick Wins". These were areas, components, or usability issues that required relatively low effort in engineering time but could deliver a high impact to the user.
The first Quick Win we tackled was the navigation. By leveraging the new design system, we created a modern sidebar navigation, which was more intuitive and familiar to users compared to the previous, unorganised top-bar navigation. This update allowed us to implement a cleaner, more logical structure with new sections that clearly communicated the product’s functionality and guided users to the features they required more efficiently.
Conclusion
Creating the foundations of the AppCheck Design System allowed me to reshape the identity and experience of the product. With this in place, the company is in a better position to continue to grow and move forward by pushing the product into the modern age. At the start of this project, the company retention rate was on the decline, and due to the improvements and confidence we gave to our users, the retention has increased by 4% in this short period and is on track to keep increasing.
Personal Takeaways
The involvement of key stakeholders is crucial to success. I have learned that introducing them to changes can be beneficial and key to gaining their buy-in. I have found that keeping stakeholders involved throughout the process helps to aid the outcome and also helps iron out any concerns or questions they may have in the early stages, therefore saving time and effort.
© Copyright 2026