Blip Helicopters

Case study

Blip Helicopters builds high‑performance, sustainable aircraft with a nostalgic soul. The brand wanted a website that felt classic and kind yet still pushed conversions.

How might we craft a minimalist, monochrome experience that showcases helicopters, establishes trust, and drives qualified leads?

I led the redesign: a multi‑page marketing site with a clear contact funnel, partner‑logo proof bar, product showcase modules, and supporting trust sections - all wrapped in Blip’s signature purply-grey.

Industry:

Transportation

Company:

Blip Helicopters

Role: Solo designer (discovery, UX/UI design, prototyping, build, QA)
Type: Concept project (web)
Timeline: 2 Months
Tools: Figma, Google Forms, Loom, Squarespace, GA4

Get in Touch

2. Problem Statement

The typical product‑research journey for high‑consideration purchases (like helicopters) starts with inspiration, continues with credibility checks, and ends in direct contact. Blip’s site skipped steps: it lacked a focused narrative, had scattered CTAs, and buried the credibility cues.

Users were bouncing to search engines and industry blogs to validate the brand, then never returning. Internally, marketing had no simple way to steer prospects to a clear next step. They were leaking potential leads.

The original page looked unfocused and unprofessional, leading first-time viewers to leave the site out of confusion and frustration

The changes made to the site focused on handling all of the issues and creating a more pleasant user journey.

3. Vision & Research

Vision - Blip as a trusted discovery hub, not just an online brochure.

Key Research Activities

Competitor scan (7 brands): Heavily cinematic heroes but weak contact funnels - only 2 had obvious lead forms.
Quick audience survey (n = 18, ages 22–32): 61 % would leave if they couldn’t find specs or a contact path fast. Sustainability mattered, but clarity trumped aesthetics.
Heuristic audit: Inconsistent CTA language, no hierarchy on the hero, and limited social proof.

Primary pain points

No single conversion path (three different “contact” styles).
Specs & benefits buried (hard to scan).
Lack of social proof/partner cues.
Brand voice felt generic, not nostalgic‑kind.
Accessibility: low‑contrast greys, small body copy.

4. Opportunity

A focused landing flow could capture leads, keep visitors on‑site, and embody Blip’s sustainable‑luxury vibe.

We prioritised high‑value, quick‑to‑build elements:

Primary CTA funnel: Persistent “Contact Blip” button + anchored form.
Showcase modules: “Explore All Helicopters” card slider & “Popular Helicopters” carousel.
Hero narrative: Value prop → proof (partner logos) → invitation to engage.
Trust builders: Partner bar, value‑prop icons, FAQ, testimonials.
WCAG‑compliant monochrome system.

5. Design process:

Sketching And Asset building

With the exception of the sketching - which was done by hand on a notebook - the assets (which includes the sitemap, colours, typefaces & fonts) were completed on Figma.

Exploration & Iteration

1. Inspiration & Competitive Sweep
Before touching pixels I reviewed five luxury‑aviation and sustainable‑mobility sites to understand visual cues, interaction patterns, and how they balanced performance specs with lifestyle storytelling. I clipped layouts, CTA placements, and typography that felt aligned with Blip’s “classic yet kind” personality and pinned them to a quick mood board.

2. Paper Sketching
Armed with those references, I sketched a half‑dozen thumbnail layouts in a notebook. This low‑stakes medium let me try different hero‑and‑CTA relationships and partner‑logo arrangements in minutes. One concept – a full‑bleed hero with overlay copy and a two‑button CTA – immediately felt right, so I iterated a cleaner version beside it. (see sketch above)

3. Low‑Fidelity Wireframe (Figma)
I translated the chosen sketch into a grayscale wireframe in Figma, mapping out section order: Hero → Partners → Product cards → Editorial feature → Popular picks → Value props → FAQ → Testimonials → Footer. Three quick internal reviews surfaced spacing tweaks and a stronger grid for the product cards.

4. Interactive Prototype
After two more passes the wireframe matured into an interactive mid‑fi prototype. Click‑through testing in Figma helped verify scroll rhythm and CTA visibility. I tightened card ratios, swapped icon sets, and adjusted breakpoint behaviour.

5. High‑Fidelity Mock‑up v.1
Next I layered in real copy, photography, and Blip’s monochrome palette to create mock‑up v.1. Seeing authentic imagery exposed contrast issues, but I kept the background white here.

6. Polish to Mock‑up v.2
I scrutinised typography hierarchy, refined hover states, and re‑balanced whitespace, particularly around the FAQ accordion and partner‑logo strip, and added a grey gradient background. This culminated in mock‑up v.2, our design‑sign‑off artefact. This would still be further polished and tweaked before I moved on to Squarespace.

7. Build & Browser QA (Squarespace)
I recreated the design in Squarespace, leaning on custom CSS for grid nuances. Daily in‑browser reviews led to micro‑adjustments: line‑height tweaks for large headings, better lazy‑load settings for hero imagery, and a simplified mobile nav. The background was returned to white after it was considered better, in terms of looks, to the grey. After a final cross‑device QA the site went live.