Youverse — Website Redesign
A full rethink of a digital identity company's website — narrative structure, visual language and a design system built to grow.
Role
UX/UI Design, Design System
Scope
Website redesign, component library, prototype
Tools
Figma, Framer
Reorganising a technical product into a website that explains itself — with a calm interface and a system the team can keep building on.
01
Context
A website that had grown in layers
The website had grown over time, with new products, audiences and pages added incrementally. Each addition worked on its own, but the site as a whole no longer shared one hierarchy or one visual language.
Meanwhile the product had matured, and the website needed to communicate that maturity to prospective clients and partners.
02
The brief
Explain a technical product, clearly
The challenge was to explain a complex, technical product to several different audiences without flattening it into generic marketing copy — and to build a structure that keeps working as the product grows.
- Clarify the site's narrative and page hierarchy.
- Unify the visual language across every page.
- Build a reusable component library for future pages.
- Prototype the key flows so decisions could be reviewed before development.
03
Exploration
Starting from content, not screens
I started from content rather than screens: what each audience needs to understand, in which order, and where the proof lives. That content map became the skeleton for the whole site.
I led the design end to end — information architecture, wireframes, interface design, the design system and the prototype — working closely with the team to keep the design aligned with the product's direction.
04
Structure
An architecture built on real questions
The site was reorganised around the questions visitors actually arrive with:
- Home
- Product
- Solutions
- Company
- Resources
- Contact
05
Wireframes
Low fidelity first
Low-fidelity wireframes explored page order, content density and the rhythm between text-led and image-led sections before any visual decision was made.
06
Visual development
A quiet interface with one confident accent
The final interface is quiet: a warm neutral canvas, large type, generous spacing and a single blue accent carrying the brand. Details — hairlines, numbering, micro-labels — do the structural work.
07
Design system
Documented, so the team can keep building
Colour, typography, spacing, grid and components were documented as reusable Figma styles and components, so new pages can be assembled without redesigning from scratch.
- Figma
08
Prototyping
Reviewing the feel, not just the screens
A clickable Framer prototype was used to review transitions, scroll behaviour and the intended feel of the site with the team.
- Framer
09
Outcome
A complete website design, ready for development
The project was delivered as a complete website design: a documented design system and a clickable prototype ready to move into development.