Landing Page Design
SafeGuard
Landing Page for Cyber Security SaaS Starup
Landing Page for Cyber Security SaaS Starup
SafeGuard is a cloud-based cybersecurity platform that provides clients with comprehensive cyber protection. The main goal of this project was to highlight SafeGuard’s success in protecting against a wide range of cyber threats by showcasing its features, encourage site visitors to sign up for a free trial or demo and communicate SafeGuard’s reliability and scalability.
SafeGuard is a cloud-based cybersecurity platform that provides clients with comprehensive cyber protection. The main goal of this project was to highlight SafeGuard’s success in protecting against a wide range of cyber threats by showcasing its features, encourage site visitors to sign up for a free trial or demo and communicate SafeGuard’s reliability and scalability.
Role
UX/UI Designer
Timeline
7 Sep 2024 - 17 Sep 2024
Skills
End-to-end design
User Research
Design Systems
Prototyping
Step 1
Research
Understanding the users
The first step in my process was to truly understand who SafeGuard is built for.
The first step in my process was to truly understand who SafeGuard is built for.
Target audience was separated in 2 main segments:
Target audience was separated in 2 main segments:
Primary Segment - Small startups and teams operating with limited cybersecurity budgets
These are companies taking their first big steps into the digital world. They’re ambitious, fast-moving, and often stretching every resource they have. Cybersecurity is important to them, but complex systems and high costs usually push it down their priority list. SafeGuard needs to meet them where they are - simple, affordable, and easy to adopt.
Primary Segment - Small startups and teams operating with limited cybersecurity budgets
These are companies taking their first big steps into the digital world. They’re ambitious, fast-moving, and often stretching every resource they have. Cybersecurity is important to them, but complex systems and high costs usually push it down their priority list. SafeGuard needs to meet them where they are - simple, affordable, and easy to adopt.
Secondary Segment - Mid-sized companies looking for scalable and flexible security solutions:
Unlike the first group, these companies already feel the growing pressure of cybersecurity demands. Their teams are bigger, their data flows heavier, and their security needs more dynamic. What they lack is flexibility, a solution that can adapt as they evolve without locking them into rigid, enterprise-level systems.
Secondary Segment - Mid-sized companies looking for scalable and flexible security solutions:
Unlike the first group, these companies already feel the growing pressure of cybersecurity demands. Their teams are bigger, their data flows heavier, and their security needs more dynamic. What they lack is flexibility, a solution that can adapt as they evolve without locking them into rigid, enterprise-level systems.
Learning From the Competition
After defining the target audience, I moved on to researching the competitive landscape.
To understand where SafeGuard stands, and where it can stand out, I explored the websites of several similar cybersecurity companies.
After defining the target audience, I moved on to researching the competitive landscape.
To understand where SafeGuard stands, and where it can stand out, I explored the websites of several similar cybersecurity companies.
My goal was to see what they offered, how they communicated their value, how do they present complex security features, what tone do they use when speaking to budget-limited startups versus mid-sized companies and
how do they structure their product pages, and trust elements.
My goal was to see what they offered, how they communicated their value, how do they present complex security features, what tone do they use when speaking to budget-limited startups versus mid-sized companies and
how do they structure their product pages, and trust elements.
Exploring Ideas
I gathered a variety of visual references and placed them into a moodboard.
I gathered a variety of visual references and placed them into a moodboard.
This included design patterns from cybersecurity tools, modern SaaS landing pages, and clean UI examples that reflect clarity, trust, and simplicity. By comparing different styles, color palettes, and layout approaches, I was able to identify visual cues that aligned with SafeGuard’s personality and the needs of its users.
This included design patterns from cybersecurity tools, modern SaaS landing pages, and clean UI examples that reflect clarity, trust, and simplicity. By comparing different styles, color palettes, and layout approaches, I was able to identify visual cues that aligned with SafeGuard’s personality and the needs of its users.
Step 2
Page Structure
Defining key sections
Based on the insights gathered from competitor research and the company’s business goals, I defined a clear and purposeful page structure. This framework supports both user needs and strategic objectives, ensuring that every section contributes to a cohesive and effective user journey.
Based on the insights gathered from competitor research and the company’s business goals, I defined a clear and purposeful page structure. This framework supports both user needs and strategic objectives, ensuring that every section contributes to a cohesive and effective user journey.
Creating content strategy
I crafted a content strategy that speaks clearly to SafeGuard’s audience, highlights key value points, and maintains a consistent narrative across the page. To streamline the process, I also used AI tools as support for generating initial drafts and refining wording, ensuring that the final content was both precise and user-focused.
I crafted a content strategy that speaks clearly to SafeGuard’s audience, highlights key value points, and maintains a consistent narrative across the page. To streamline the process, I also used AI tools as support for generating initial drafts and refining wording, ensuring that the final content was both precise and user-focused.
Step 3
Low-Fidelity Design
Wireframe Development
The wireframe phase was crucial in this project as I created a complete layout with all copy and visuals implemented directly within the wireframes, eliminating the need for placeholder text.
The wireframe phase was crucial in this project as I created a complete layout with all copy and visuals implemented directly within the wireframes, eliminating the need for placeholder text.
Step 4
Styleguide
Colors & Typography
I choose green as a primary color, symbolizing professionalism and cybersecurity. This shade, combined with gray and black tones, effectively conveys a secure and credible image.
I choose green as a primary color, symbolizing professionalism and cybersecurity. This shade, combined with gray and black tones, effectively conveys a secure and credible image.
And for the text I used Roboto for most of the page, paired with Georgia for headlines parts, which creates a highly professional and polished impression.
And for the text I used Roboto for most of the page, paired with Georgia for headlines parts, which creates a highly professional and polished impression.
Step 5
High-Fidelity Design
Learning through iteration
As the design process continued, I went through two fully different versions of the UI. This project essentially became a self-redesign exercise, showcasing my evolving skills and design thinking. In the initial version, the overall look and feel of the site didn’t align with the desired brand perception. I initially overlooked the importance of displaying the app’s UI, so I conducted additional research, expanded the moodboard, and revised the UI design for the website.
As the design process continued, I went through two fully different versions of the UI. This project essentially became a self-redesign exercise, showcasing my evolving skills and design thinking. In the initial version, the overall look and feel of the site didn’t align with the desired brand perception. I initially overlooked the importance of displaying the app’s UI, so I conducted additional research, expanded the moodboard, and revised the UI design for the website.
In the updated version, I applied a more modern and professional approach, refining the color scheme and focusing on creating polished app dashboards that better communicate SafeGuard’s value. This iterative process taught me valuable lessons in efficient research, inspirational sourcing, and enhanced design quality.
In the updated version, I applied a more modern and professional approach, refining the color scheme and focusing on creating polished app dashboards that better communicate SafeGuard’s value. This iterative process taught me valuable lessons in efficient research, inspirational sourcing, and enhanced design quality.
Step 6
Conclusion
What did I learn from this project?
This project greatly enhanced my skills in several areas, particularly in research and gathering inspiration, as well as in content organization to meet user needs. The experience also significantly improved my UX and UI abilities, as I designed both the landing page and the app’s dashboard. Overall, this project taught me how to approach design more thoughtfully and build solutions with a stronger sense of purpose.
This project greatly enhanced my skills in several areas, particularly in research and gathering inspiration, as well as in content organization to meet user needs. The experience also significantly improved my UX and UI abilities, as I designed both the landing page and the app’s dashboard. Overall, this project taught me how to approach design more thoughtfully and build solutions with a stronger sense of purpose.