UI design / Branding

Soulbis Project

Designing a revitalised identity and website for a web3 consultancy and research organisation.

Role:
Graphics and UI Designer

Date:
Nov-December 2022

Project background

In order to create momentum for Soulbis to grow and develop their brand, I worked with a brand consultant and the two co-founders to develop and lift their current branding. This included a rework of the logo, colour schemes and also creation of an interface for a new website, tying everything together across their new messaging and direction.

Initial stages

In order to create momentum for Soulbis to grow and develop their brand, I worked with a brand consultant and the two co-founders to develop and lift their current branding. This included a rework of the logo, colour schemes and also creation of an interface for a new website, tying everything together across their new messaging and direction.

Reference from existing space of web3 and blockchain related organisations helped to ideate inital layouts.
With ‘wisp’ as the driving theme, some concepts were done in Adobe Illustrator following a colour palette developed by the team.

Development on website moved quickly

With initial components experimenting with a range of formats, layouts, themes and graphic styles – development was agile and rapid, with experiments being discussed and iterated on each week between me and the Soulbis team. A darker theme ended up being preferred, with gradient applications across more abstract and futuristic graphical elements.

Darker themes were largely represented in web3/cryptocurrency brands across the industry too.
Different styles and applications of gradient colours in blends were experimented with as I tried to leverage existing brand assets.

Development on logo and brand assets were a bit more difficult

Respecting the desire of the co-founders to develop the logo around the existing logotype – we tried many different ways of switching up the design and pushing it in different directions. However an error on my part when developing a gradient logo concept was the inability for SVG files to retain gradient meshes, which meant that logos would be very inefficient. As a result, many previous experimentations would have not been ideal for any logo, especially when scaling to different sizes. After communication, flatter colours were chosen and I found a way to incorporate the ‘wisp’ theming without the use of an actual gradient in the logo.

Iterations included connecting the base of the wordmark, different blends of colours and combinations of various line patterns.
More wild experiments saw stacking of letters, capitalisation and mixed gradients – all which helped to compare and inform design decisions.

Vector assets I created merged existing web3 isometric styled graphics with the new unique graphic identity of Soulbis. This was after the first attempt of assets which turned out a bit too abstract and hence were used in other applications across the site. These were created directly within Figma.

Finding the direction

After finalising the logo and assets, the website and modules were updated accordingly, with the gradient execution being integrated into the website design to create more visual interest and create more of a futuristic/’wisp’ feel. The colour use was also tied into signalling the appropriate categories of research, consulting, etc. to create more brand association.

Incorporating more gradients in the website to tied in the ‘wisp’ theming. We were happy with the direction of this.
The last few versions of the dot (called the ‘orb’) consisted of 5 flat colours that resembled a gradient.
The final orb brand asset had thicker lines to be more apparent on smaller resolutions. This was incoporated into the final logotype.

Design system

To improve the consistency of the brand and also to assist the developer, I created the design system which would then become the brand guidelines. These included all the colours, fonts and other elements in the files which could be easily used to standardise the elements.

Website design

Developing from this, we were able to flesh out a better idea of what we wanted the rest of the pages to look like. In line with accessibility requirements, I ensured to keep ample spacing around elements with font sizing no smaller than 12px. Constrast between text was aligned with darker parts of the gradient for highest readability. When developing the branding, I ensured the choice of the typefaces were readable and neat.

Reflection

A large amount of flexibility in driving the brand came with its pros and cons. There were challenges along the way with consistency and trying to establish the professional but fresh look and feel. However, the freedom given enabled me to really try out a bit of everything and not have to worry about legacy elements as we really were developing the brand as we went along. Solid communication and clear brand missions and insights from the co-founders and brand consultant meant that we all understood the purpose of Soulbis and could come together to develop an experience that they wanted for their audience.