Overview

I joined around the time the company was ready to re-brand themselves. I was fortunate enough to be able to work on the rebrand project from it’s conceptualisation - providing a lot of creative freedom.

The work I completed includes; Re-branding (UX, Colours, Typography), Website Design, Asset Creation, Slide Deck Design, Email Template Design.

A snippet of each of the above have been chosen for display – but each has more modules and templates completed for them.

Table of Contents

• Assets & Website
• Slide Decks
• Client Work
• Design System

Assets & Website

Assets

The most recent piece of work outisde of webdesign I completed is with the asset creation, to help the brand come alive.

Website

The following screenshot demonstrates some my favourite modules for the site. The designs are meant to go live at any moment, so you can hopefully see the final developed website at this link.

Using light & dark mode Token Variables in Figma meant each of these designs are also available in a light theme.

Slide Decks

Client Work

The main responsibilities of the role was to take client briefs and transform them into a beautiful design. I worked on a fair few projects, but I have highlighted below some of my favourite designs and concepts.

HealthShield (Concepts)

SmartSearch (Concepts)

Cambridge Spark (Concepts)

Donorfy

You can see the full design live at donorfy.com.

LinkWaste (Concepts)

CHASE People (Concepts)

Design System

Noticing Figma was becoming a powerhouse in the UX world, it was time to move away from XD. I immediately began working on project template for the company to use to help reduce the repetitiveness of beginning each project a new.

The template contains a Primitive → Token variable approach, with dynamic collections to shift between Light/Dark and Desktop/Mobile spacing modes.

Around 20 HubSpot module was then setup – built using custom *Atomic components* – all tied into the variables.

I won’t go into anymore detail here – for respect to Fuelius’ internal processes – but I have included a couple of screenshots below to demonstrate the complexity of this document. The first showing the spread of created components...

And the second showing these components in demo template pages.

The new system I would put in place would help communicate designs with developers in an infinitely better way – removing the need for handover documents and allowing Figma dev mode to do most of the heavy lifting. The idea is to free up time for both designers and developers so that we can all focus on creating spicier designs!

The variables I set up in this template would tie into the core code HubSpot/Umbraco template setup (also being re-vamped to follow this system), meaning developers would have a much easier time getting values to match up with designs. This will hopefully result in way fewer bugs and design inconsistencies.

The system is also be setup to sync with TailwindCSS, meaning my system can extend on top of Tailwind (if required) to save developers even more time.

All of this process came with highly detailed documents explaining the entire process, so current and future hires would be able to pick up the process.