A Reponsive Experience for a Cybersecurity Startup
Client:
YCombinator-backed startup
Dates:
Fall 2023
A former colleague had taken his startup idea through YCombinator and emerged with an elegant no-code data security and governance solution. His small team was now preparing to take the product to market, and they needed a website that reflected the simplicity and elegance of their offering.
In this brief engagement, I worked directly with the Founder/CEO. We analyzed competitors and potential positioning, brainstormed content and design ideas, and developed these concepts from low-fidelity wireframes through high-fidelity designs and finally into a performant, responsive experience.
The founders wanted a clean, modern, and tech-forward web presence that aligned with their product and vision. They had planned a warm outreach campaign through their network and additional lead sources. The site needed to resonate with their initial target audience while being built with tooling and technology that would enable the founders to easily iterate and refine the messaging. Here are the design goals in a nutshell:
I collaborated closely with the CEO to understand the product, the initial target audience, and the competitive landscape. We reviewed their ideas for product messaging and inspirational sites. I was also able to draw on some recent research I had been involved in that pertained to positioning new SaaS products in the current market. Ideally, we wanted to highlight compelling quantifiable benefits alongside a testable trial with low effort integration. The product was an elegant no-code solution, and they were offering a free trial, so those boxes were checked.
To overcome the lack of historical customer data for this brand new product, I researched and compiled metrics that illustrated the costs to businesses of poor data governance and security. We would position these metrics alongside the product's easy, no-code implementation and advanced features to demonstrate its value to potential customers.
We iterated on messaging and structure, rendering variations of their messaging across different content blocks on mobile and desktop in low-fidelity wires. Here are a few examples:
We then compiled low-fidelity permutations of full pages and expanded our feedback to include people who fit potential buyer profiles. This process helped us settle on one or two versions to move forward with. We also created permutations of product messaging that could easily be used in future variations and testing.
I then iterated on higher fidelity designs, rendering the messaging and layout from the wires into an aesthetic that aligned with the founders' vision and inspirational sites.
I rendered two of the high-fidelity designs into HTML/CSS/JS, incorporating subtle animations using GSAP and CSS to enhance user engagement and complement the product's positioning. Although motion design/animation wasn't part of our original objectives, I noticed that most of the inspirational sites provided by the founders featured subtle animations. I implemented text animations that evoked encryption and decryption of keywords. I also used animated lines and borders to highlight boundaries. I hoped this motion might enhance engagement and align with the product's positioning.
I also added light and dark theming to one of the variations. This was a nice-to-have that was mentioned by the founders.
The site was built using tools and technologies that the founders were comfortable with (and had used to build the front-end of their product). The animations were contained in JavaScript functions that were enabled simply by applying style selectors to the content to be animated, so they could be easily added to any new content if desired.
Throughout the development process, I conducted thorough testing across popular devices and browsers to ensure a seamless user experience and excellent performance.
The final site was a responsive, performant experience; and would serve as a good foundation for the startup's outreach efforts and ongoing testing and refinement of their messaging. While I enjoyed using the tools utilized by the founders, such as Tailwind and Svelte, similar results could be achieved any front-end technology, including low-code/no-code solutions like Webflow, Framer, Bubble, etc. The key is to focus on the process: collaboration, research, and iterative design. This can be applied regardless of the specific tools chosen, or the size / duration of the engagement.
