Amalfi Jets

Inception

I helped Amalfi Jets redesign their website in Fall 2024. Their old website was fine, but it lacked a cohesive design system. To paraphrase their CEO Kolin Jones, it was mostly fine but lacked that last bit of polish. They wanted a minimalist aesthetic but needed to strike that fine balance between predictable and repetitive layouts. So, I showed them LiftKit, which was engineered precisely for this very situation, and we got to work.

Discovery

First, we needed to nail down some concrete details about the design aesthetic they were going for. First, they mentioned they’d like more consistency with their mobile app’s design system. 

So, I prepared the following sample layouts to verify I’d understood the assignment, an important step when a stakeholder is in an exploratory mode.

‍

Upon seeing these, they had a change of heart. Turns out, they’d prefer a light scheme. 

Now, all of my projects with LiftKit have auto light/dark swap due to the way the color tokens are set up:

But that’s not really what they meant. 

Next, they provided a new set of references. 

First was vistajets.com, which uses a light scheme and lots of serif fonts for a more traditionally corporate look. 

Second, they mentioned they liked the punchy modernity of Equinox Hotels.

So the end goal was a theme that would marry the two.

After going back to the drawing board, I presented a few different options for them to consider. I wanted it to be easy for us to refer to different designs, so I delivered a sort of table with side-by-side comparisons of everything. 

They chose 2C as the closest, but they felt it was too purely white. The contrast was too high. My first solution was to tweak it over a video call, but they didn’t feel so strongly about any of the alternatives that they could make a snap decision right then and there. 

So to help them make the decision, I provided this chart of various white balances, using option 2C as the example layout.

Of course, white balance’s optical appearance is influenced by adjacent content. In other words, a warmer white will look more neutral next to warm photos than it would next to cool photos.

So I also made a variant that had the content faded out, to make it a little easier to compare side-by-side.

And of course, I provided these in a Figma file for easy zooming and browsing.

In the end, they went with true white after all. 

Design

First, I mapped their screens 1:1 to the same layouts, but with LiftKit.

Since their chief complaint was that the designs lacked consistency in spacing and color, I took the layouts exactly as they were and simply applied a proper design system to them.

After that, I went through each one and provided as broad a variety of section styles I could come up with without straying too far from the approved design language. 

This was the outcome. 

Side-by-Side View

Tree View

Development

Development was as simple as rebuilding the pages in Webflow, which was easy thanks to LiftKit, because all the tokens in Figma already have corresponding utility classes in both vanilla CSS and (in this scenario) the LiftKit Webflow library. 

Even if I didn’t have these classes memorized already, they’d be easy to reference by simply looking at the Figma file itself, which has detailed annotations for that sort of thing.

Outcome

Amalfi’s new site was up and running in about a month after beginning the redesigning process, with development taking about 5 business days. Their SEO rankings have been preserved without hiccups due to migrations, etc, thanks to choosing to update existing pages whenever possible in lieu of migrating, and setting up careful 301 redirects with rigorous verification when necessary.

Amalfi’s brand identity is now cohesive, set in stone, and easy to scale for any future designers or developers, who from now on will be equipped with rich documentation and flexible, globally-defined theme variables to make any further edits a breeze.