All work
01Website Redesign

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.

  1. 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.

  2. 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.
  3. 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.

  4. 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
  5. 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.

  6. 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.

  7. 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
  8. 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
  9. 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.