HMG

A few friends and old colleagues of mine created an Applicant Tracking System (ATS) called hya. They got something functional - literally coded wireframes - very rapidly and needed to refine it.

They needed a brand. A proper design language to base this redesign around.

First, I went to the drawing board to throw some ideas around and analyse the existing interface.

I gathered inspiration from similar interfaces and picked out warm colours based on the founders' initial branding.

Then I fleshed out a very basic brand and house style with fonts, colours, shadows, iconography and direction.

After presenting this back to the team, little and often, tweaking as we went, they were really happy to proceed in rolling out this brand to the live app.

To get started, I built a simple design system. Atoms and molecules for interface elements, all made in Figma using components, auto-layout and variables to ensure reusability, consistency, and ease of development.

Following this, I began applying the design system fundamentals to the live components, migrating just sections of the application at a time. You can see an example below of how the role detail page looked before and after.

I also designed and built their marketing site in Webflow so everyone could make changes and contribute to the blog.

I could talk about my work on hya all day - there are so many more things that I can cover when we chat!

This might sound odd, but I'm extremely passionate about pensions. I think late Millennials, Gen Z and younger are at severe risk of having a very crappy later life.

After I read about the Retirement Living Standards by the Pensions and Lifetime Savings Association, I felt compelled to make this information available in a way that was clear, simple and actionable.

These passion projects are a great opportunity to push your boundaries and explore new tools and techniques. I wanted to create a bold, bright and honest style to challenge the more formal, subdued work of late.

The only thing I did in Figma was the name and base palette. I knew I needed something to launch off from, and once I had this look and feel I decided to design the rest in code.

The app is built using Remix in TypeScript, styled with TailwindCSS - which adds a rocket booster to my productivity.

I had to boff up on the basic maths behind compound interest and present / future values of annuities. I also needed to grok the UK's laws on pensions and taxes.

An API route in the app takes some basic information and returns an overview of your pension health, including a monthly post-tax, take-home figure.

I used an http-only cookie to store the user's results for a server-renderable UI that remembers your inputs. The forms are built using Conform and validated with Zod for delightful type safety.

And dark mode of course...

Linkpic is a side project for generating dynamic open graph / meta images.

Built on Cloudflare using Pages, Workers & KV, it's a Next.JS app that renders and screenshots the provided HTML & CSS.

It uses handlebars to enable templating for variables, which are dynamic values in the image.

Early versions were built using FaunaDB as the store. This was mainly as a learning experience to try FQL.

After testing, KV was expectedly more performant for the simple use case of fetching the strings needed to render the templates.

The app has a live editor that uses an iframe to preview the template. The code editor is monaco-editor, an open source library that underpins VSCode.

It uses Clerk for authentication for a few beta testers, though none of it is publically available at the moment as I focus on other projects (and work, of course!)

What goes in to building a component at a billion dollar company?

To contribute even a seemingly trivial component to a design system like Deliveroo's, there are many things to consider...

We begin with requirements gathering. In discussion with a team working on a new product, we saw the use of a pill button. Other products have implemented their own pill buttons, but they had not been documented or committed to the component library.

So the staff designer and I get to work: dissecting every instance of a pill-like component across the products. She scours the Figma files and I the code bases, hunting for components.

What variants or props do they have? In which contexts are they being used? Are they accessible?

Full case coming soon...