Sphx

Cybersecurity made accessible

Sphx is a cybersecurity website created to position the company as a trusted, modern, and global brand. Designed to communicate trust, clarity, and professionalism, the site provides an overview of the platform, its solutions, and value proposition — all while encouraging conversions and contact from potential clients.

Vision of the project

The goal was to design a website that makes cybersecurity feel less intimidating and more approachable.
Sphx needed to communicate technical authority and global presence while maintaining a friendly and clean visual tone.

The challenge was balancing credibility with warmth — speaking to enterprise clients without overwhelming them.

The problem

Cybersecurity websites often fall into one of two extremes: overly technical and cold, or vague and buzzword-heavy.

The reality: Visitors land on the site, get confused by the jargon, and leave without understanding what the company does.
The market: Competitor sites often feel templated, lacking personality or trust signals.
The need: A fresh, branded, and conversion-focused website that explains value clearly and builds trust fast.

The goal: to design an experience that educates, reassures, and converts — all in one scroll.

The research process

To understand user expectations, I conducted a visual audit of 15+ cybersecurity websites, identifying common pain points:

Overuse of dark tech visuals and abstract language
Lack of real value explanations
No clear call-to-action above the fold
Missing pricing or transparent offerings

From this, I created moodboards and competitor breakdowns, mapping patterns of trust, clarity, and engagement.
Wireframes were then created to ensure strong hierarchy and clear copy delivery across all breakpoints.

Competitive Audit & Affinity Mapping

I reviewed 15+ cybersecurity websites to analyze tone, hierarchy, structure, and visual identity. Insights were grouped into themes using affinity mapping.

Common patterns identified:

Overly dark, “techy” interfaces
Vague language (“next-gen AI threat prevention”)
Hidden pricing or weak CTAs
Overwhelming density of content

These insights helped shape a clearer tone of voice, vibrant design, and open structure.

Brainstorming and HMWs

A structured brainstorming session using the “How Might We” method helped turn user pain points into actionable design questions. This encouraged creative thinking and led to solution-focused ideas tailored to real user needs.

User Flow & Wireframes

The website was planned as a scroll-first with a clear conversion flow:

User flow includes:

→ Hero & value proposition
→ Trust signals (logos, stats)
→ Solutions breakdown
→ Testimonials
→ Pricing plans
→ Contact form

Low-fidelity wireframes were created to define structure before moving to final visuals.

Visual Style & Illustrations

All illustrations were created by me as part of the design process, adding playfulness and distinction.
They balance the “serious tech” domain with a softer, more human brand personality.

High fidelity

Hero Section

Bold headline, custom illustration, and strong CTA to build immediate trust and clarity.

Global Presence

Social proof via client logos and global map to convey legitimacy.

Solutions Breakdown

Visual, digestible layout of the three key services — designed to be skimmable and human.

Testimonials + Pricing

Combined social proof with clear, tiered plans to reinforce value and nudge conversion.

Contact Section

Light-hearted tone (“Is it a date then?”) softens the experience and encourages outreach.

Wrap up

This project reminded me that clarity is the real power in design.
Even in a technical industry like cybersecurity, simplicity and personality can dramatically increase user trust and engagement.

If I had more time, I’d run heatmaps or scroll-depth tracking to test CTA performance and fine-tune pricing visibility on mobile.

Good UX, in this case, meant taking complexity and turning it into a single scroll that feels effortless.