Zerodai
An enterprise SaaS platform that connects cybersecurity with colleagues through AI-driven insights and seamless integration.
challenges
App Onboarding Process: Zerod.ai’s onboarding process relied heavily on phone-based guidance, which posed barriers to scalability and user adoption.
Design System Tokens: The existing design system lacked guidance toward consistent visual design, focusing more on technical implementation.
Homepage Refresh: The web homepage lacked a cohesive design, trust-building elements, and clear calls-to-action, reducing its impact on potential clients.
solutions
Design System Tokens: Established a layered token system (primitive and semantic) with guidelines for future scalability and ease of implementation.
Homepage: Refreshed the homepage to feature improved content flow, trust-building elements, and visually cohesive updates across desktop and mobile.
Onboarding: Designed a streamlined six-step onboarding flow that helped streamline user goals, immediate Microsoft Teams integration, and personalisation opportunities.
To improve Zerod.ai’s onboarding process, I began by benchmarking similar SaaS platforms to identify industry best practices. Collaborating with the marketing director, I developed a flow that focused on engaging users early through goal-setting and integration with key tools like Microsoft Teams. Low-fidelity mockups of the six-step flow were created to test clarity and usability before producing high-fidelity designs.
For the design system tokens, I assessed the existing design documentation and identified a lack of structure around visual consistency. I introduced a dual-layered system: primitive tokens (hex values) and semantic tokens (e.g., "primary button background"), ensuring flexibility for future updates. The system was documented to guide both developers and designers, leveraging tools like Style Dictionary for implementation.
The homepage refresh required both visual and structural updates. High-quality imagery was selected to better reflect the brand's message, while adjustments to the content layout ensured a smoother narrative flow. Trust messaging and calls-to-action were strategically positioned to enhance user engagement. On mobile, interactive elements were optimised with larger tap targets and improved spacing for readability.
01
This 6-step approach helped to consolidate the overall onboarding process, provide immediate value to the user, and has seen an an increase in engagement.
02
I was tasked with streamlining the usage of colour tokens across the design system.
03
Trust-messaging was added in a prominent position. Readibility and Content-Flow was analysed and improved.
04
I optimised the spacing and increased the space around page elements. CRO on the mobile responsive site rose by 2.3% MoM.
wrap up
Onboarding: The new six-step onboarding process provided immediate value to users, reducing the reliance on manual phone guidance. While full results are pending further iteration, the improvements contributed to early signs of higher user engagement.
Design System Tokens: The structured tokens introduced consistency across the platform and future-proofed the design system, with developers actively incorporating these updates.
Homepage Refresh: The refreshed homepage design improved readability and user flow, while trust messaging and enhanced calls-to-action supported higher conversion rates.
Next Steps:
Gather user feedback on the onboarding process for future refinement.
Continue evolving the design system to include more advanced component tokens and broader accessibility standards.
Perform A/B testing on the homepage to quantify the impact of the changes on conversion rates.
