Creating a SaaS product for cost-effective, efficient and stable AWS management.

Company
Unicorne
Categories
Design, Branding
Expertise

Warning: Attempt to read property "ID" on string in /home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/quick-infos.php on line 121
CMS
Warning: Attempt to read property "ID" on string in /home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/quick-infos.php on line 121
Front-end
Warning: Attempt to read property "ID" on string in /home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/quick-infos.php on line 121
Motion
Warning: Attempt to read property "ID" on string in /home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/quick-infos.php on line 121
Brand positioning
Warning: Attempt to read property "ID" on string in /home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/quick-infos.php on line 121
UI
Warning: Attempt to read property "ID" on string in /home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/quick-infos.php on line 121
UX Co-creation workshops
Warning: Attempt to read property "ID" on string in /home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/quick-infos.php on line 121
Web

Project
Overview

Designed for CTOs, cloud architects, DevOps teams and FinTech companies, Stable aims to expand Unicorne’s growth opportunities and strengthen its international presence. The new brand clearly separates the product offering from the services offering, while preserving the synergy between the two.

Strategy and branding

  • Manifesto

    The brand manifesto distills a brand’s essence, positioning and distinctive character.

    A language and reference tool, it supports how the brand is understood and expressed, alongside the brand guidelines for the visual side.

    • Context
    • Client
    • Brand foundation
    • Brand basics
    • Company description
    • Alignment
  • Brand guidelines

    Brand guidelines set out a brand’s visual rules to ensure consistency and impact. A reference tool, they complement the manifesto by translating the brand identity into clear, consistent visual elements.

    • Concept
    • Logo (Logotype, Icon)
    • Colour palette
    • Typography
    • Iconography
    • Applications
    • Rollout
  • Brand rollout

    For a brand identity project like Stable, we delivered a full set of logo files, all the key design elements created during the branding process, and complete brand guidelines designed for digital and built directly in Figma.

Colour palette

Stable’s colour palette creates an airy, mysterious atmosphere through a series of purples and gradients. An accent colour that works just as well in Light as in Dark Mode, this versatile palette brings out the best of digital and makes it easy to create recognizable brand elements. The many shades of grey also tie into the brand’s message of transparency and enable typographic contrasts that support clear, punchy copy.

Full logo

Stable’s logotype is built from a geometric typeface reworked by hand. The letterforms reference the modular, technological side of Stable’s offering. With a strong baseline, the logotype conveys a sense of stability and suggests a larger triangle in its counter-form. Integrating the icon into the logo itself accentuates this wide-based triangular effect. The cut in the lowercase t also offers a nod to Unicorne, the services company behind the SaaS product.

<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />

Graphic elements

The brand territory is made up of many documented visual elements. Each one plays a specific role that contributes to the overall effect.

Iconography

The brand uses custom iconography that highlights the handcrafted, authentic side of the platform’s personalized interactions.

Brand applications

The Stable brand is used across a variety of mostly digital touchpoints. The following applications include both advertising and product examples.

Product support and platform design

<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />

Design System / Light and Dark Mode management

Building an ecosystem like Stable requires coordinating thousands of interdependent components. To ensure visual and functional consistency, a variable system was developed to centralize the management of colours, typography, themes, primitives and size scales, covering both the website (at every resolution) and the full product.

Website design and development

The website, built on WordPress, was designed and developed entirely by the Diapason team. It was designed to offer dynamic elements and serve a more marketing-oriented approach than the SaaS itself. The experience is flexible across mobile, desktop and large screens.

<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />

Login and onboarding

To access the SaaS, users go through the website. It was therefore essential to design graphic elements on the site that are both functional and marketing-driven. The login screen was designed as a true gateway to the SaaS, and an opportunity to showcase its key features while kicking off user onboarding.

<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />

Motion Design

Several animations, simple and complex (such as loading screens), were designed to engage users with the product and enrich the overall experience.

They also helped strengthen the identity of a dynamic, modern brand.

<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />
<br />
<b>Warning</b>:  Trying to access array offset on false in <b>/home/collect5/domains/collectifdiapason.com/source/web/app/themes/shape/template-parts/blocks/two-cols-images.php</b> on line <b>45</b><br />

Collaborators

  • Web Developer

    Patrick
    Champoux

    Web developer with 15 years of experience and a passion for React.js and WordPress. Over the course of his career,...

  • Digital Art Director, Senior UI/UX Designer

    Serena
    Capozzi

    Driven by innovation and research, I love exploring the codes of visual communication and how they apply to everyday life....

  • Designer UX/UI

    Robert
    Gorzedowski

    Je suis naturellement curieux et doté d’un sens aigu de l’observation, ce qui m’aide à repérer les petits détails qui...

  • Art Director

    Francis
    Leduc

    Francis brings significant experience in design and the arts. Working sometimes with designers, sometimes with artists, sometimes with managers, and...

  • Digital designer and photographer

    Jean-Bernard
    Filion

    Senior designer with nearly 25 years of experience, my career has moved between tech, photography and video games. I get...

  • Founder of Diapason, UX and Customer Experience Designer

    Julie
    Simard

    Passionate about the possibilities of collaborative design, Julie had long dreamed of launching the Collective. Her first intention was to...

Ready to create projects that resonate?

We've got the right tempo.

We've got the right tempo.

Drag
Play