Start-up branding

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. 

Logo mono Logo colour

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…

Check website designs

Online training

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. 

Some of the early concepts

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). 

Some of the basic elements that formed V1of the design system

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.

Visit Website

Sport courses

Sport coursesGLL College

GLL College offer courses and training in the sports and leisure industry for both individuals and businesses. Their website wasn’t fulfilling the needs of their users so it needed new functionalities and interface.

The product space

GLL College – leading UK provider of courses and training in sports and leisure.

The brief

Complete revamp of the brand and design a new website.

The work

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

Introduction

The client’s request was to achieve a complete revamp of their platform in terms of performance, user experience, and look and feel. In order to achieve that, I had to start from the basics which meant analysing the current performance of their platform and finding the user pain points before suggesting ways to improve the UX. The full proposed scope included:

  • Personas
  • Quantitative research (Google Analytics, heatmaps)
  • Qualitative research (surveys and polls)
  • User flows
  • Low- and high-fidelity prototype (multiple iterations)
  • Developer hand-off of final designs

Initial research

I added heat / scroll / click mapping to the key pages, as well as set up screen recordings to track users behaviour when on the site. While these were capturing over the following weeks, I took a look at Google Analytics to gather insights into high-level user demographics, behaviour and preferences.

User personas and flows

The insights from the analytics shaped the initial draft of the various user personas. Based on their needs and desires, and together with the collected data, I mapped out new user flows and information architecture. 

Direct user interviews were organised to gain insights and confirm the hypotheses made in the user personas and flows.

I also set up a voluntary survey on the GLL site to capture some high-level feedback from our current users, and iterated on the questions to really hone in on the assumptions that were created on the basis of the quantitive research. 

Information architecture
Example of a lo-fi wireframe of updated element

UX improvements

A key milestone in the project was converting all the insights into actions. The next was to apply the knowledge and feedback of the user research into a new and improved interface. I created low-fidelity wireframes to clearly illustrate what the need updates, why the changes are necessary and also how they will improve the overall UX and website performance.

UI design

The final stage was to create new UI designs which are still adhering to the brand guidelines but give the website a slicker, fresher look. Once the new look and feel was approved, I applied the updated UI kit to the signed-off wireframes and handed off the project to the developers.

Outcome

This approach allowed the team and the stakeholders to not only create a better version of their platform with a refreshed look and extra functionalities, but also to give voice to their users and discover crucial details about the the faults in the user experience and therefore – the conversion rates!

A key moment was finding out that there was a very high % of people who said they didn’t find what they were looking for on the site, which eventually lead GLL to reconsider their general offering and re-evaluate their business strategy. This only goes to show the power of user research!

Virtual Events

Virtual EventsMeet & Engage

I was approached by a SaaS company to help them develop a new product – a virtual events platform, which repurposes a wide range of their existing tools and features. The development is in progress and the client and the project are confidential.

The product space

SaaS chat and chat bot platform.

 

The brief

Create a new tool – virtual events platform, based on existing functionalities.

The work

Consultancy, planning, qualitative and quantitative user research, UX and UI designs.

Discovery

I kicked off the project by having multiple conversations with the stakeholders. The aim was to determine the business goals and desires, gain more insight into the existing products, establish limitations, define KPIs and educate the different stakeholders on the key aspects of UX (and its importance). I also used the opportunity to find out more about any existing user insights and competitor research the team already had.

Approach

After gaining a good idea of the business needs and the project constraints, I created a proposal outlining the methodology and timeline I planned to implement. As the new platform is supposed to be largely based on tools and features the business already offers, there was a certain frame I could work with. The key here was to find out what the user needs and pain points are and how these features and functionalities can potentially address their needs. 

One of the user personas

Research

The first step was to define the target users. I used the insights provided by the stakeholders in combination with competitor research to create the initial user personas. Even though at this point the personas were mostly hypothetical due to insufficient user data, this served as a springboard for creating user flows and putting together a selection of questions for a user survey.

The user survey aimed to test the assumptions made so far and help better understand the user needs, clearly outline their needs, pain points and priorities. 

In addition to the survey, I reviewed feedback from users who had previously used the platform’s other existing tools.  

User flows

Planning

While the survey was running and collecting responses, I sketched the first draft of the wireframes. The sketches were based on the proposed user flows. After a few revisions, I transformed the drawn wireframes into low-fidelity wireframes (using Adobe XD) which I presented to the stakeholders in order to get their input but also to bring them up to speed with the scope of the proposed new platform. 

Once I had analysed the survey responses and previous user feedback, I tweaked my previous work refined, data-informed user personas and flows. The research confirmed most of the assumptions made in the earlier stages of the project but it also gave me ideas for other opportunities and ways to address essential pain points. This user data played a key role in defining priorities (for both users and the product team), shaped the crucial user stories and helped outline the first draft of the MVP.

Some of the first drawn wireframes
Hi-fi prototype

UI design

Having implemented all the user findings into improved versions of the wireframes, the next step was to bring the mockups to life using the established design system*. I created two separate and slightly different hi-fidelity prototypes. This enabled me to test the multiple proposed features in a way that is less overwhelming for the users and me. 

Further user testing

I tested the prototypes with users in three consecutive rounds and refined the UX and UI after each round to eliminate major issues, minimise unclarity/confusion and re-align priorities. The final result was the first draft of the MVP.

Hi-fi prototype

Next steps

The approach I proposed for the development of this product was iterative, lean UX. The goal of the first stage was to rapidly create an MVP and launch it as quickly as possible so that there can be more input from real users and much bigger/better user data. The new platform needs constant revisions and optimisation in order to grow and adhere to the ever-changing needs of its users. 

Hi-fi prototype

Design system*

Prior to this project, I had worked with this client on a few other UI projects including a design system. I had already created a detailed, centralised library of styles, components and guidelines that reflect the company products’ neutral look & feel. This allowed me to speed up the UI design and prototyping process for this particular projects as reused and repurposed many of the elements from the UI kit.

Design system elements

Sustainable Agriculture

Sustainable Agriculture Hummingbird Tech

A collaborative effort between Hummingbird Tech and two of the biggest sustainability NGOs in the UK – a central place for UK farmers and farm business owners to self report and evaluate their sustainability practices. 

The product space

Sustainability and climate-tech.

The brief

Plan, research, design and deliver a B2C platform. 

The work

Planning, research, UX and UI designs, dev hand-off and QA. 

The problem space

Agriculture is the heart of the climate crisis. Soil is one of the biggest polluters because of the way farming is traditionally done – when the soil is ploughed, carbon dioxide sequestered in the soil is released. However, farming is more than just tilling and every aspect of it has an impact on the environment. With the UK government introducing new regulations shifting subsidies based on landmass to subsidies based on sustainable practices, it is crucial for UK farmers to understand the whole spectrum of sustainability and how their businesses need to change. 

The challenge

This problem posed two major challenges.

Firstly, the sheer breadth of the agricultural industry and all the varieties that sit within it. There are some sides to sustainability and there are so many ways a farming business can operate – everyone seems to do it differently. It is had to find only a few common denominators. 

Secondly, farmers are a tough crowd. They are not always very tech savvy, most of them have been doing things the same way their whole lives and are very reluctant to change. Knowledge in agriculture is normally passed down from one generation to the next so even though they comprehend the need to do things better, they are not always open to technology “invading” their space. User research was always going to be difficult.

Kick-off

The product was started by a consortium of three different entities – Hummingbird as the ag-tech specialist body, and the non-profit organisation LEAF and SFT (Sustainable Food Trust). The team featured 2 project leads (one from each NGO), 1 product owner, 1 data scientist, 2 back-end engineers, 1 front-end developer and a sustainability advisor. 

My role was the lead designer – I ran the full design cycle from start (initial research) to finish (launch).

Discovery

My first goal was to get a better understanding of the problem space by extracting as much information as possible from the work group, especially everyone who came from a farming background or had spent years fighting the problems in the industry. 

I facilitated multiple workshops to ascertain the problems, the propositions each party was bringing to the table and all the different goals each organisations had set out to achieve. There was no power struggle among the stakeholders but there was lot of work to be done on alignment and making sure that business goals don’t silence the voice of the end user – which was my responsibility.

The outcome of two whole sprints solely dedicated to discovery was a hypothesis.

Create a single framework that farmers internationally can use to self report on their own progress towards sustainable farming practices in order to:

  • Increase the adoption of sustainability tracking/reporting amongst farmers in the UK
  • Reduce the time/effort needed to complete a farm sustainability assessment
  • Address the lack of a harmonised framework for reporting on sustainable practices
Mapping out the problem space

Another challenge

Content! The core of the product is a harmonised, all-encompassing framework that covers all aspects of sustainability. This meant a lot of categories with a lot of questions/metrics the users needs to answer or report in order to get conclusive results. 

The NGO stakeholders both came in with their own requirements and prepared content they wanted to be featured in the tool. The preliminary content was… huge. Especially when considering one of the goals outlined in the hypothesis is “saving the users time because farmers don’t have much of it”. 

How do you overcome this? We just shelved this issue. The final version of the content was not a blocker at this very early stage so I proposed we revisit this element later after:

  • we’ve done quantitative research where we ask users for their opinion of the proposed content
  • there are low-fi wireframes all stakeholders can review and play with – this level of interaction always helps because it makes an abstract concept more tangible and conversations become easier/more streamlined.  

💡 Sometimes, especially when dealing with multiple stakeholders with diverse backgrounds and intentions, it’s better to agree to disagree and move on. Often what appears to be a blocker actually does not impact the progress and can be resolved by doing some research on it. Ask the users. Facts (should) trump opinions.  

Research

For the research phase, I prepared a list of questions we sent out to farmers from the LEAF network together with a list of proposed content.

Additionally, we reached out to close collaborators of the NGOs to schedule user interviews where I asked more questions about the wider problems they face, how they currently keep records of and report their practices, any experience with similar tools and they relationships with sustainability. I spoke to 8 different farmers and farm managers. 

💡If you are paying attention, maybe you remember the first challenge I mentioned? Users who are reluctant to tech and even speaking to you in the first place? Sometimes you have to be sneaky. If you are dealing with a tough audience which is not accepting you with open arms, try infiltrating through a proxy. Find someone who is part of the target group or knows them well, build a rapport with them and let them introduce you to more research subjects. It’s an efficient way of bypassing the trust issues. 

Findings

After collating all the data and insights from the survey and the interviews, I analysed all the findings and presented them to the work group for feedback and further discussions. 

In my analysis I had outlined:

  • Suggested updates to the hypothesis 
  • Personas
  • Current user journey
  • Pain points and challenges (minor, medium and major)
  • Competitor tools and opportunities from integrations
  • User stories and scenarios
  • Trade-offs and considerations
User stories

Wireframes

Once the research was over, at least for the time being, I cracked on with mapping out user flows and low-fi wireframes. This is the best way to get everyone on the same page. While working on the wires, I facilitated a couple more workshops with the group where we brainstormed collectively on what the tool could look like and how it could functions. Obviously, no promises were made – an MVP is based on the basic functionalities that can be built in the timeline that will satisfy the user goals. However, it was a good way to keep everyone engaged and it also helped me get a couple of ideas I had not thought of. It’s also a useful exercise to take a closer look at competitors or other existing experiences – helps with usability. 

Workshop
Low-fi wireframes

Branding

There was one important step to cover before I could proceed with the UI and the hi-fi prototypes. We didn’t have a brand.

The product was a collaborative effort so none of the parties in the consortium could use their own branding. The goal was for this tool to have its own identity. After a few branding workshops I conducted with the group, we reached a consensus that the aesthetic needs to stand for simplicity, advancement and support. 

I took this into consideration, went away and came back with a brand book covering the basics of the new brand and explained how I translated the identity into a visual language. A neutral, monochromatic look and feel which represented simplicity and also symbolised the fact that this is a neutral ground for any of the organisation involved. This made the secondary palette easy to stand out – ten vibrant colours, each one representing a sustainability category. The illustrations, which I had to produce myself, meant to be shake things up and make the tone of the experience friendlier and quite unique for the ag- and farm-tech world. 

Colour palette
Typography
Illustration style

UI and hi-fi prototype

I developed the high fidelity prototype as I was developing the UI. The detailed low-fi wireframes enabled me to have a clear list of elements and components I needed to create for a quick and simple design system.  

It was crucial that the prototype is very interactive for the next round of usability testing I was planning to do. As the target users are not all very experienced with such platforms (most of the data recording and reporting they do is still paper-based and stored in folders!), I needed to make sure that their interaction with the prototype is as smooth and self-explanatory as possible. I was able to conduct usability testing with the farmers who participated in the first stages of the research, they were all keen – always a good sign. 

Here is a little preview of the before and after of the design process.

Overview Overview - home

Hand-off and launch

More feedback came out of the usability testing which meant have to make tweaks. The content matrix and the scoring algorithm in the back-end kept changing until the very last moment. All that to be expected when working to a tight timeline in a small, agile team.

I worked very closely with the front-end lead to ensure the final designs were coming to life as intended and key parts of the experience were not compromised. A lot of QA-ing, a lot of last minute fine-tuning but we hit all the deadlines and milestones, and the end result launched successfully.

I’ve recorded a walkthrough of the product, have a look below.

Precision Agronomy

Precision AgronomyHummingbird Tech

As part of a cross-functional product team in Hummingbird, I designed and delivered a new platform which uses high-res drone imagery to analyse the state of crops, and enables farmers to create precise application plans. 

The product space

Agri-tech SaaS, focus on enabling precision agronomy.

The brief

Develop a new SaaS platform and deliver MVP in 3 months.

The work

Planning, research, UX and UI designs, dev hand-off and QA. 

The problem space

Agriculture is one of the biggest industries in the world worth trillions of dollars. However, in terms of technological advancement it is still trailing behind other parts of the food supply chain. Agronomy develops at a healthy pace but the application of better practices is dependent on having software and hardware which can analyse massive areas of land and zoom in on single-plant level. When done manually, all crops are sprayed a flat rate of chemical input (nitrogen) which incurs costs for the producers and has an impact on the quality of the fresh produce. 

Farmers need to be able to have an easy overview of key aspects of each crop head – size, quantity, health – and understand the patterns in the crop development to be able to create custom and detailed application plans. This would allow them to save costs on nitrogen input, it will reduce crop wastage, it will produce fresher, untreated food and it will have a positive impact on the soil.

The challenge

This new product, internally called “Fresh Produce”, was meant to be an improved and optimised spin-off of the original Hummingbird SaaS platform. Working with a legacy product can provide an advantage, e.g. existing insights and research, and the opportunity to address problems in completely different ways. However, reusing functionality and components comes with tech debt and limitations in the back-end. 

Additionally, the timeline to launch a whole new MVP was extremely tight and non-negotiable as the end users (farmers) are always restricted by seasonality – missing the time window means a year’s delay.

Kick-off and insights

The team featured 2 designers, 2 product managers, 2 front-end developers and 2/3 back-end engineers.

We set to achieve the following goals:

  • Determine the functionalities of the current platform which are:
    • most accurate and efficient
    • deliver most impact to the customer
  • Reduce impact of historical tech debt
  • Streamline business offering and USPs
  • Align product with business objectives for the next 12 months

Discovery

The first phase required a lot of combined effort to go through all the research, findings and background knowledge the team had – especially people who had been customer-facing. I worked alongside the other designer to speed up the process of gathering information and facilitating workshops. We split the work of mapping out various possible flows until we arrived at a final, refined proposal. I was leading the next steps of quick prototyping, testing and iterating.

Final user journeys (MVP)

Yet another challenge

Testing in the B2B world is always a major obstacle because the a formulaic approach such as “3 rounds of 5 test subjects cover 85% of major issues” is already ambitious. Users to test with are hard to find in a niche market where a “customer” stands for a massive corporation or a global food producer. Test subjects are hard to find, get hold of and in the agri world people are not particularly open to casual conversation – everyone is very protective. 

This problem was there when we started this product and it persisted throughout the full cycle, even after deploying the MVP. 

How did I tackle it? By getting to know the customers and categorising them. Developing a whole new persona for each one would have been useless because they all fit the target audience. However, each customer had a different background, especially in terms of tech savvy. This way I knew what to expect from every interview. One customer would be the gold star – they were very technologically advanced which helped push the ambitions of the team and scope the long-term roadmap. Another customer was years behind in their tech adoption so thy were a perfect indicator of how simple and friendly the MVP was. 

As long as you know where the feedback is coming from and you can put it into context, you don’t have to be confused and fall into the trap of convoluted and widely diverse user feedback.

💡 As long as you know where the feedback is coming from and you can put it into context, you don’t have to be confused and fall into the trap of convoluted and widely diverse user feedback.

Findings

The team effort resulted in simplified user journeys and a whole new IA which focused on three main functionalities – displaying analysis, booking flights and uploading imagery. The user journey was stripped to its very core and any processes which were not yet automated would be done manually backstage – ensuring the user has a seamless experience with as little friction or waiting time.

MVP information structure

Redesign

In order to avoid overthinking the new concept and getting lost in the desire for perfection, I moved quickly from proposed flows and IA to rapid prototyping. Timings didn’t allow for a fully-fledged round of low-fi wireframe testing with users – this was only sufficient for internal feedback and sign-off. I took on the task to develop a new UI and apply that in the hi-fi prototypes. Killing two birds with one stone – testing usability while the front-end devs already had new UI components to start working on. It’s all about stacking up work load.

I’ve recorded a walkthrough of the MVP prototype – have a look below. 

Execution and delivery

Making sure that everything is well communicated, organised and easy to access in the future, I put together a new design system based on the new aesthetic. 

Button styles

Post-launch

The 3 month deadline was met which was a great collaborative effort with a lot of last-minute crises and tweaks. All the testing I had done with users had provided the team with a list of ideas for features which we had assessed based on feasibility, resource availability and business goal relevance.  I continued to iterate on the prototypes and did regular testing to help the product owner evaluate and prioritise upcoming work. 

Impact

0 %
nitrogen input saved
0 £
per ha added value
0
new customer trials started in Q1