UI design Archives - Lach Kamenov

BrandingHummingbird Tech

Hummingbird Tech had undergone a big shift in their strategy, product focus and key offering which called for a long-overdue rebrand and overhaul of their visual identity.

The product space

Start-up/scale-up focusing on B2B SaaS solutions in ag and climate tech.

The brief

Complete revamp of the brand and design a new website.

The work

Discovery, creative workshops, design concepts, various brand collateral, website designs.

Discovery

Having spent a year working at Hummingbird, I definitely had a head start as I already knew the space where the business was positioned – hence I knew what the competition did and what they looked like. I spearheaded the rebrand exercise because I believed that there was a major disconnect between Hummingbird products – advanced high tech, and the outdated and incoherent look & feel of the brand.

Even though I had an idea where this rebrand was going to go, I started with the basics. Fortunately, I could muster up extra resources internally and together with the other designer at Hummingbird I conducted an exploration phase consisting of:

conversations with stakeholders
internal creative workshops
brainstorm exercises with the other designer where we worked together but also allowed ourselves to ideate separately and come together with a bunch of different concepts

This stage of early concepts took a few weeks. After multiple get-togethers and workshops and straightforward elimination process, the brand concepts were reduced down to two and after a vote from the key stakeholders – a winner was selected.

Assets

Getting to the point where there is a clear creative route is painful but the hard work starts with the creation of the assets.

Logo
Colour palette
Typography
Illustrations
Deck templates
Data visualisation
Report and document templates
Social media post examples
Complete brand book
New website designs

Hummingbird worked with an external agency which was tasked with the generation of various marketing collateral. My plan was maintain this relationship and continue to outsource some outputs to them, but only after giving them specific direction and guidance on execution. Having more control in-house meant that there would be more hours dedicated to managing this stream of work but that would solve the problem of inconsistent branding and messaging that . I was the main liaison with the agency – I managed and quality-checked all the work they were doing for Hummingbird.

Logo

The logo kept some of the basic elemen ts of the original logo for continuity and brand recognition purposes – it is still a hummingbird, it is a visual reference to the polygon shapes you see in the HB platform and it is colourful.

However, a good logo needs to work just as well when it’s black. This is why the new logo uses only a few simple and clean shapes. Its monochromatic version is just as recognisable as the vibrant, colourful one.

Typography

The brand stands for technological innovation and advancement, but at the same time it needs to resonate with an audience which is more traditional and less creative. The typography is a classic – GT America is a widely used style which has been popular for a long time. It’s simplistic, elegant and solid – key messages the look and feel needs cover.

Colour palette

The colour palette is where the perfect balance between conservative and scientific, and innovative and cutting-edge. I knew that this is the opportunity to visually stand out from everyone else in the this industry – be it competitors, partners or customers.

The bold contrast between the soft grey, the more serious dark navy blue and the accents of punchy gradients really gives the brand the edge it lacked before.

Illustrations

What Hummingbird does is not always easy to explain and most attempts at it end up very wordy. It was important to find an illustration style that is light and simple but at the same time can be very specific and descriptive. Outline drawings are the perfect answer to this design challenge – they can be as detailed as you need them to be but are relatively quick and easy to create, which is crucial when you need to generate a library of custom illustrations.

Data visualisation and deck templates

This is where I could unleash the full potential of the all the aforementioned brand elements. Everything came together to illustrate the various options and combinations the new look and feel could achieve. Some examples below:

New website

The crown jewel of the brand overhaul was the new website. A lengthy process of wireframing, UX copywriting, designing, collecting feedback, making tweaks, more feedback and more tweaks and tonnes of copy amends! What better way to see the final designs than actually having a little play…

Online trainingBunkai

Bunkai is a platform that offers its users AI-assisted sports training. The small start-up approached me at a very early stage in their development. I was tasked to help build their unique look & feel and translate that into their first UI.

The product space

Early start-up that has developed an innovative way to improve sports training online.

The brief

Understand the business vision and objectives, develop their brand aesthetic and design new UI.

The work

Consultancy, brand exploration, new look & feel, UI designs and developer hand-off.

Discovery

Bunkai came to me with a foundation they wanted improve and build upon. They had a very basic interface and wireframes they had developed based on the initial research they had collected. The goal was to take this to the next level and have their own, bespoke UI.

The challenge I’ve often faced with early-stage businesses is that they recognise the need for a slick and friendly UI – it makes a huge difference. However, few of them have a fully developed brand that the UI can be based on. This was the case with Bunkai too, so the work had to start there.

I spent time with the team to understand what Bunkai is, its background, what is stands for and where they aspire their product to be one day. I dedicated time to researching their niche and the main competitors. It’s only after understanding their philosophy and goals that I could go away and start putting together ideas. My aim was not to replace the task of a branding agency and consider a myriad of marketing collateral – I focused on the core elements that will directly shape up the look and feel of the UI. I came up with a lot of combinations of colour palettes, typography and in-situ mockups.

I spent time with the team to understand what Bunkai is, its background, what is stands for and where they aspire their product to be one day. It’s only after understanding their philosophy and goals that I could go away and start putting together ideas. My aim was not to replace the task of a branding agency and consider a myriad of marketing collateral – I focused on the core elements that will directly shape up the look and feel of the UI. I came up with a lot of combinations of colour palettes, typography and in-situ mockups.

It took 3-4 workshops to flesh out the best concepts and eventually pick a winner.

Design system

Once I had a clear direction and visual language to work with, I started with the basics – I put together a mini design system. The scope of the project was not big so I couldn’t go full force and develop a fully fledged system right away. I concentrated on core elements that are a must for any UI and components I need would go into the MVP (all based on the existing UI and the wireframes).

New UI

I had wireframes to work with but they had not gone through proper usability testing. I could already spot some some usability issues so I addressed those by introducing some new, simple functionalities to make the experience friendlier (e.g. error/warning/success states, tabs and horizontal scroll).

Now that I had all the UI elements ready, I just transformed the wireframes into a brand new, slick interface which reflected Bunkai’s vision and philosophy.