Websites

Adaverse.Solutions

A modern, trustworthy website for a UK software company, built around a flat-illustration character inspired by Ada Lovelace.

Category
Websites
Our role
UX/UI design: user research, interaction design, prototyping and testing

Screens

Adaverse Solutions homepage hero with the headline Develop Your Ideas into Codes, a Get In Touch button and a flat illustration of three people and a dog working with laptops
The final hero: "Develop your ideas into codes" with a flat illustration of the team at work
Adaverse values section with five overlapping coloured circles labelled Teamwork, Agility, Creativity, Honesty and Reliability
The values section: Teamwork, Agility, Creativity, Honesty and Reliability
Adaverse team section with four portrait cards for the director, marketing manager, designer and full-stack web developer, each with a LinkedIn icon
The team section, designed to put the company's expert team in the spotlight
Early full-page Adaverse layout with a team illustration hero, a row of value icons, a four-step process timeline and a services list
Exploration: team-illustration hero, values row and an Ideate, Design, Develop, Deploy timeline
Early full-page Adaverse layout with code snippets, value cards, service cards and a circular Meet Our Team diagram
Exploration: a code-themed direction with experience, values, services and an orbiting team section
Early full-page Adaverse layout with illustrated service sections, service cards and a team carousel
Exploration: illustrated service rows and an "Our awesome team" carousel
Early full-page Adaverse layout in blue with doodle illustrations for Fast learning, Expert team and Familiarity with various frameworks
Exploration: a playful, hand-drawn direction for the values
Early full-page Adaverse layout on a black background with a gradient headline, code editor cards and service cards
Exploration: a dark theme with a gradient headline and code cards
Early full-page Adaverse layout with a centred headline, a team illustration and four service cards on a wave background
Exploration: a centred hero with the team illustration and four service cards
Adaverse UI kit showing buttons in default and hover states, the logo, icons, MuseoModerno, DM Sans and Inter type, team card states, input field states and flat illustrations
The UI kit: buttons, logo, icons, typography, team cards, inputs and illustrations

The final website screens, followed by the layout explorations we tested along the way.

Overview

Adaverse is a UK-based software development company that helps its clients with branding, UX/UI design and web marketing. Through digital services it sets out to simplify parts of people's lives, and its mission is to carry on Ada Lovelace's legacy. We redesigned its responsive website in four weeks, from workshops and card sorting to iterations, usability tests and the final UI kit.

Results

From research to a tested website design
4 weeks
Company values defined together with every employee
Workshop-led
A structure shaped by both employees and customers
Card-sort IA

The story

The challenge

Adaverse wanted a modern, responsive site that shows its technical skill and reliability, connects with existing clients and wins new ones. Stakeholders also strongly preferred flat illustrations, which can easily look generic rather than technical.

Our approach

We built a story around the company's name: a flat-illustration character for Ada Lovelace, the first computer programmer, used throughout the site. Workshops with the whole company defined its values, and open card sorting with employees and customers shaped the information architecture.

The outcome

A contemporary, illustrated website with clear values, a structure based on card sorting and a prominent team section, refined through many rounds of usability testing and documented in a colour palette and UI kit.

01Overview

A software company named after the first programmer

Adaverse is a UK-based software development company. It helps clients with branding, UX/UI design and web marketing, and uses digital services to make parts of people's lives simpler.

The company's stated goal is to preserve Ada Lovelace's legacy, and that idea became the thread running through the whole redesign.

02Project objectives

Compete, and give clients a better experience

Adaverse asked us to redesign its responsive website so it could hold its own against competitors and improve the client experience.

The site had to connect with existing clients, attract new ones and leave every visitor with a positive, enjoyable impression.

  • Innovative design that shows the company's technical skill
  • A design that shows the company is reliable
  • A visual language based on flat illustrations
  • Clearly identified company values
  • Preparation of the website content

03Challenge: illustrations

Flat illustrations that still feel technical

Stakeholders wanted a dependable site that represented the company's capabilities accurately, and they also strongly preferred flat illustrations. The hard part was finding flat illustrations that served the site's goals and still looked contemporary and in tune with modern technology.

Our answer was a narrative built on the company name. Adaverse is named after Ada Lovelace, the first computer programmer, so we designed a flat-illustration character for Ada and used her repeatedly across the site. We also placed her in several scenes with concrete, hands-on interactions, so the graphics feel right for a development company and support its marketing goals.

Flat illustrations that still feel technical
Flat illustrations at work in the final hero

04Challenge: company values

Finding shared values in a cross-functional team

At Adaverse, product managers, developers, designers and marketing specialists work together remotely in an agile culture, and a cross-functional team runs many initiatives at once. Pulling a single set of values out of that team was difficult.

We ran a series of workshops with every employee. Together we discussed the company's values, and the services it offers, until the team agreed on them.

Finding shared values in a cross-functional team
The values that came out of the workshops, as they appear on the site

05Challenge: information architecture

Many services, a big team and a lot to say

Adaverse offers a wide range of services and has a large team and a set of values to present, so finding the right information hierarchy was a real challenge.

We ran open card-sorting interviews with company employees and with the company's customers, and built the site's information architecture from the results.

  • Open card sorting with employees
  • Open card sorting with customers
  • An information hierarchy based on how both groups grouped the content

06Iterations and usability testing

Testing our way to the final layout

To reach the project's goals we ran many usability tests and iterations; several of the layout explorations are shown in the gallery above.

One example is the team section. The expert team is one of Adaverse's strengths, so we gave it an eye-catching design that draws attention to the people behind the work.

Testing our way to the final layout
The team section, given extra emphasis after testing

07Colour palette

A blue-led brand palette with a warm accent

The site uses four brand colours: a strong primary blue, a softer secondary blue, a pale third blue and a warm yellow as the fourth colour, which also appears in the illustrations.

  • Primary brand colour #0018FF
  • Secondary brand colour #6EA4FC
  • Third brand colour #CCE2F5
  • Fourth brand colour #F9CF69
A blue-led brand palette with a warm accent
The four brand colours

08UI kit

Components ready for development

We documented the interface in a UI kit: buttons with default and hover states, the logo in primary and secondary versions, menu and close icons, service icons, team cards with hover states, input fields in several states and the flat illustrations.

The typography pairs MuseoModerno for the logo, DM Sans for titles, descriptions and buttons, and Inter for large titles.

Components ready for development
The Adaverse UI kit

How we got there

  1. Understand

    Company needs, objectives and stakeholder preferences, including the wish for flat illustrations.

  2. Workshop

    Sessions with all employees to agree on company values and services.

  3. Structure

    Open card sorting with employees and customers to shape the information architecture.

  4. Design and test

    An Ada-inspired illustration system, layout explorations, usability tests, iterations and a UI kit.

Key features

An Ada Lovelace character

A flat-illustration Ada appears across the site, linking the visuals to the company name and mission.

Hands-on illustrations

Scenes with concrete interactions make the flat style feel right for a development company.

Workshop-defined values

A dedicated values section based on what the whole team agreed on.

A spotlight on the team

Portrait cards with hover states and LinkedIn links put the expert team front and centre.

Card-sorted structure

Services, team and values arranged the way employees and customers group them.

Responsive by design

A modern, responsive website backed by a documented colour palette and UI kit.

Next step

Have a project in mind? Let's design it.

Tell us what you need and we'll reply with questions or a first estimate.

Start a project