Relock is an innovative cybersecurity startup that provides seamless, real-time user verification, safeguarding against data theft and cyber threats without the need for physical keys or additional apps. They approached adcookie to create a modern, scalable website that clearly communicates their complex solutions and highlights their industry-leading technology.
Role: UX/UI Designer & Webflow Developer
(via adcookie)
Tools: Figma, Webflow, Miro
I was the sole UX/UI designer on this project, representing adcookie. My responsibilities included conducting UX research, creating wireframes, designing high-fidelity prototypes, and fully implementing the website in Webflow. I also supported the branding phase by contributing one of the three initial logo concepts, but my primary focus was on UX/UI and implementation.
I co-led an initial online workshop using Miro to better understand Relock’s objectives, target audience, and technical solutions. This session helped establish clear goals, define user needs, and set the overall design direction. It also laid the groundwork for mutual trust and collaboration with the client, which proved essential throughout the project.
Based on insights from the workshop, I created wireframes to quickly iterate and test various layout concepts. These wireframes allowed rapid validation of our UX strategy before moving into detailed design.
Using the established visual direction, I developed high-fidelity mockups in Figma. The design focused on conveying professionalism, innovation, and clarity, ensuring that complex cybersecurity concepts were communicated effectively through intuitive UX and engaging UI.
I handled the complete implementation of the site in Webflow, translating the hi-fi designs into a fully functional, responsive, and scalable website. I ensured consistency across devices and optimized the site for performance and usability.
Key implementation highlights:
1. Finsweet Attributes – Utilized Finsweet's tools to build advanced sliders with full control over responsiveness and interactions.
2. Custom text highlight effect – Developed a custom CSS solution for animated text highlights that aligned with the brand’s visual identity.
3. Webflow CMS – Set up dynamic CMS collections for the blog, documentation, and careers page, enabling the client to easily manage content.
4. Typed.js animation – Integrated Typed.js in the header to create a typewriter-style animation that adds a dynamic and modern touch to the hero section.
The delivered website successfully positioned Relock as a trusted, innovative cybersecurity solution provider. Built in Webflow, the site offers easy content updates and scalability, empowering Relock's team to manage future growth efficiently.
1. Conducting detailed UX workshops early in the process significantly improved project clarity and design alignment.
2. Owning both design and development in Webflow allowed for a smoother, more cohesive transition from concept to final product.