← ALL WORK

Phaedra Solutions

Phaedra’s website had the information users needed, but it was difficult to navigate and easy to drop off from.

I redesigned the experience across web and mobile, restructuring content, simplifying the journey and introducing a design system while balancing SEO requirements while reducing the cognitive load.

ROLESenior UI/UX Designer
TIMELINE5 Months
TEAM1 PM, 1 Engineer, 1 Marketing Manager, 1 Designer
SCOPEMobile & Web UX & UI, Prototyping, Testing
THE PROBLEM

The website had valuable information, but many users were dropping off above the fold before reaching it. Content was scattered, the site lacked a clear visual and content system, and key conversion points were easy to miss.

How to restructure a content heavy website so users can quickly understand the offering, find what matters to them and take action — while still meeting SEO and business needs?

RESEARCH

Findings through Research

Users didn't need less information. They needed better information hierarchy.

Through heatmaps, testing and conversations with Marketing and Business teams, I identified where users were losing interest and what information mattered to the business.

This helped me rethink the website around a few principles:

Make content scannableUsers should be able to understand a section without reading every word.

Reveal information progressivelySEO content could exist without competing for attention with the main message.

Keep conversion visibleUsers shouldn't have to reach the bottom of a long page to take action.

DESIGN DECISIONS

Five decisions that shaped the redesign

Each one started as a problem in the old experience.

01INFORMATION ARCHITECTURE

A clearer first impression

The hero carries one proposition and one action. Everything the old page crammed above the fold moved into the sections built to explain it.

Decision 01 — a clearer first impression
02JOURNEY

Let users scan before they commit

Services became categories a visitor self-selects from, so relevance is found in one pass instead of read for.

Decision 02 — scannable service categories
03COGNITIVE LOAD

SEO content without overwhelming the user

SEO needed the volume, so I restructured instead of cutting — hierarchy, spacing and modular sections carry the depth.

Decision 03 — structured SEO content
04CONVERSION

Build trust before asking for action

Outcomes and case studies come before the form, so the ask lands after the credibility rather than in place of it.

Decision 04 — proof before the ask
05SYSTEM

Built reusable patterns instead of one-off pages

Recurring needs — service blocks, proof modules, CTAs, forms — became components with defined behaviour.

Decision 05 — reusable page patterns
DESIGN SYSTEM

One system behind every page

Type scale, colour, spacing and a component library documented for handoff — so Marketing and engineering could keep shipping pages without me in the room.

FoundationsOne mint accent, one typeface, one spacing rhythm — so a new page looks like Phaedra before anyone styles it.
BRAND ACCENT
Mint 500#00E0C6
Used only for action and emphasis — never for large areas of text.
TYPEFACE · ARCHIVOAa
Headline, mediumBody, regular — set for long reading.
Two weights only. Wide letterforms hold up at small sizes.
LAYOUT · 12 COLUMNS
80px column32px gutter8px rhythm
Every block snaps to the same grid, so sections stack without custom spacing.
ComponentsThe parts every page is assembled from — each with its states defined, so Marketing can build without a designer.
SERVICE CARD
SaaS Application Development↗
One card, eight services. Icon, label, link — nothing optional.
ACCORDION
AI Software×
IoT Services+
Metaverse+
Carries the SEO depth without spending a visitor's attention.
BUTTON STATES
RESTHOVEROFFPRIButtonButtonButtonSECButtonButtonButton
Primary mint, secondary white. Two per screen, no exceptions.
NAV MENU
Back End→
Front End→
Mobile→
Cloud→
Services grouped the way clients describe them, not the way teams are organised.
Type scale and colourFixed sizes and a nine-step ramp per colour — the choices a page author never has to make.
STYLEWEIGHTSIZELINE
H1 HeadlineMedium96120
H2 HeadlineMedium6488
S1 SubtitleRegular3248
S3 SubtitleSemibold1624
B1 BodyRegular3042
B3 BodyMedium1624
MetricBold80auto
MINTaction, emphasis
100500900
AMBERwarnings
100500900
REDerrors, form validation
100500900
GREYsurfaces and text
100500900
FINAL PRODUCT

The same journey, web and mobile

One hierarchy that holds at every width: the desktop layout expands the mobile reading order rather than replacing it.

Phaedra Solutions — full responsive showcase: desktop services page, success stories, and mobile screens
Phaedra Solutions — mobile home page
HOME
Phaedra Solutions — mobile service page
SERVICE PAGE
Phaedra Solutions — mobile portfolio page
PORTFOLIO

The result was a site that tells the same story at every breakpoint: clear enough to scan in thirty seconds, deep enough for the SEO content the business relies on.

40%faster design to development handoffs
Stronger conversionCTAs and enquiry opportunities were integrated throughout the journey instead of relying on one buried form
SEO-ready content structureThe redesign allowed Marketing to support richer page content without sacrificing readability.
KEY TAKEAWAY

This Project changed how I think about content heavy digital Products

The solution wasn't to simply remove information. It was to understand what users needed first, what they needed next, and how the business could communicate everything else without getting in the way.

It pushed me to think about a website not as a collection of pages, but as a journey from understanding → trust → action.