Project: Compono

Project: Compono

#UI #B2B #SAAS #HR #DESIGN SYSTEM

Clearly positioning Compono as a SaaS product offering to the small to medium-business market through an improved modern, global and distinctive website.

Role:

UI designer. As the UI designer, I focused on translating the research-driven foundation into an engaging and visually cohesive user interface. My responsibilities included crafting high-fidelity UI mockups, prototyping, and establishing a scalable UI Kit.

Key Deliverables:

High-fidelity UI mockups, prototyping and UI kit.

PART ONE

Project Overview

Date & Duration:

2022/2023 – 3 months for phase 1 of UI

Tools used:

XD, Illustrator and Photoshop

Teammates:

This project was a collaborative effort including a Project Manager, Creative Director, Content Writer, UX Designer, Junior Designer, Animator and Developer.


The Challenge:

Compono empowers businesses to make better people decisions using scientifically informed insights. After the UX team completed their in-depth work on personas, information architecture and wireframes, it was time for me to bring this vision to life.

The challenge? Design the UI  for their new website that:

  • Position Compono as a SaaS offering tailored to the needs of small to medium-sized businesses.

  • Reflect the brand’s global presence and modern, distinctive identity through storytelling and dynamic visuals.

  • Balanced aesthetics with functionality to resonate with decision-makers, 70% of whom are women.

The Goal:

The goal was to create a UI that seamlessly integrated interactive elements and data visualization, emphasizing individuality in recruitment. The final design needed to feel:

  • Modern: reflecting the tech-forward nature of a SaaS product.

  • Global: catering to a diverse, international audience.

  • Distinctive: standing out in a competitive market while staying user-centric.

PART TWO

The Approach:

Balancing Design with Functionality

2: Celebrating People Through Imagery

People are at the heart of Compono’s brand, so my design emphasised authentic, relatable photography. To resonate with the predominantly female decision-makers, we selected images that showcased:

  • Diversity – representing a variety of individuals and environments.

  • Warmth – using natural lighting and warm tones.

  • Realism – avoiding overly staged or artificial scenes.

1: A Modern Identity for a SaaS Product

The new UI was designed to reinforce Compono’s positioning as a leading SaaS provider. This was achieved through:

  • Clean, modular layouts showcased the software’s flexibility and ease of use.

  • Layered product illustrations and photography, presenting a simplified and sleek interface.

  • Dynamic shapes and vibrant colour palettes added energy while maintaining professionalism.

3: Visualising the Product with Impact

When showcasing Compono’s product, I adopted a unique style combining layered photography and minimalist product illustrations. This approach:

  • Highlighted key product features without overwhelming the viewer.

  • Created a modern, clean aesthetic that aligned with the brand’s values.

PART THREE

The Outcome:

Bringing the Brand Vision to Life

2: UI informing updated Brand Guidelines

The new UI informed their updated brand guidelines, which meant we were creating a cohesive visual language across all touchpoints. These included imagery selection, typography, colour palettes, and illustration styles..

1: Dynamic Page Layouts

The redesigned UI positioned Compono as a modern SaaS solution for small to medium businesses, combining. Each page layout was designed to inspire and guide users effortlessly. Key features included:

  • Animations and interactive elements to highlight the unique qualities of Compono’s recruitment solutions.

  • Data visualizations that made insights digestible and engaging.

See UI

3: A User-Centric Experience

The final design was a reflection of Compono’s values: dynamic, inspiring, and deeply user-centric. The UI successfully balanced storytelling and functionality, creating a product that resonated with its target audience while setting Compono apart as a leader in recruitment technology.

PART FOUR

Reflections

This project was a refreshing experience, as the highly collaborative team and hands-on client brought new perspectives that enhanced creativity.

It was particularly interesting to focus solely on the UI design phase, as I’m usually involved in the entire process. Stepping back from the broader scope gave me a fresh perspective, which unexpectedly sparked greater creativity during the ideation phase.

Collaborating closely with the UX Designer was especially rewarding, as we combined our expertise to align the design seamlessly with the foundational research.

Say hello!

I am always keen to collaborate, to make new connections or just a good old chinwag.

Previous
Previous

NEXTDC

Next
Next

Atlas