Square Charger
Case study
1. Mission & Initial Problem
Square Charger is a special‑purpose aviation manufacturer and rental provider building custom blimps for advertising, research, and aerial experiences. In early 2025 I delivered their first branded website - a desktop‑centric marketing presence that immediately lifted credibility. A wider audit, however, surfaced several growth blockers: outdated copy, scattered CTAs, and, most critically, no mobile experience, even though analytics showed 62 % of traffic arrived via phones.
We tackled the quick wins first - tightened messaging and refreshed the desktop UI - which stabilised bounce rates. The data and stakeholder reviews then made it clear that mobile usability had become the new highest‑impact problem to solve.
How might we design and launch a mobile‑first, fully responsive site that preserves Square Charger’s authoritative look while converting on‑the‑go prospects into qualified leads?
I owned the entire mobile‑first redesign and rolled out a responsive experience (phone through desktop) in 2.5 weeks.
Industry:
Special purpose aviation
Company:
Blip Helicopters
A look at the final mobile version
Desktop version
Role: Solo designer (research, UX/UI, prototyping, build, QA)
Type: Concept site (lead‑gen)
Timeline: 2.5 months
Tools: Figma, Google Forms, Squarespace
A look at the final mobile version
2. Problem Statement
On desktop, Square Charger’s story was somewhat clear. On mobile, however:
Burger‑menu navigation collapsed after one tap; hero copy spilled off‑screen and the primary call‑to‑action (“Get in touch”) was partially hidden.
Key brand message blocks (What we do, Our values, New collection) were stacked without clear hierarchy or visual breathing room.
No concise summary of services or catalogue link appeared above the fold; visitors had to scroll far to find contact options.
Page weight hit 5 MB; images weren’t compressed.
Mobile bounce rate climbed to 78 %, and lead‑form starts were negligible.
While they had a strong online presence, their website was not mobile optimised - meaning they had almost no real presence on a mobile phone
3. Vision & Research
Vision - position Square Charger as the pocket‑ready gateway to premium aerial solutions; trusted, innovative, and accessible from any device.
Research Highlights
Google Forms pulse survey (n = 24 event planners & marketers): 70 % research aerial advertising from phones; 58 % abandon if specs or pricing aren’t readable within 10 seconds.
Competitive teardown (4 airship providers + 3 helicopter charter sites): Leaders employ mobile‑first grids, sticky inquiry buttons, and modular spec blocks.
Quick device tests (5 users, 3 devices): gestures mis‑fired, load times lagged, CTAs hidden - causing frustration and lost trust.
Pain points: readability, discoverability, speed, and a cohesive brand across breakpoints.
4. Opportunity
A responsive relaunch could:
Capture the majority‑mobile audience and raise qualified inquiries.
Surface key spec info (size, endurance, passenger capacity) at a glance.
Modernise the brand while re‑using approved imagery and palette.
Business KPI target: +25 % mobile lead‑form submissions within 60 days post‑launch.
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
Analyse & Define — audited analytics & goals; wrote a concise findings brief.
Sketching (divergent ideation) — rapid phone‑frame sketches; selected the strongest via MoSCoW prioritisation.
Wireframe → Clickable prototype (Figma) — low‑fi, then added tap zones; chose type scale & colour tokens for accessibility and aviation feel.
High‑fi mock‑up — inserted brand imagery; refined hierarchy, spacing, touch‑target sizes.
Squarespace build — leveraged fluid‑responsive blocks + custom CSS for grid and aspect‑ratio boxes.
Cross‑breakpoint QA — desktop ≥1200 px, laptop 1024 px, tablet 768 px, mobile 375 px; tightened spacing, lazy‑loading.
Sketch
Figma Wireframe
Figma Prototype
Figma Mock-up
Squarespace
6. Solution
Mobile‑optimised hero - concise headline, value prop, above‑the‑fold “Request Quote” CTA.
Scrollable blimp‑package cards - image, spec snippet (length, endurance, capacity), price range, rating, sticky “Enquire” icon.
Accordion spec sheet - deep technicals without cluttering the first view.
Performance optimisation - WebP compression, deferred scripts.
Responsive typography scale - 1.2 ratio, ensuring comfortable reading across all viewports.
7. Impact & Metrics
+52 % increase in blimp‑package page views from mobile.
+31 % click‑through to “Request Quote” form.
–35 % mobile bounce rate.
Page load cut from 6.2 s → 2.1 s (Lighthouse).
8. Reflection & Next Steps
Wins: adopting a mobile‑first grid, surfacing specs, and cutting load times improved clarity and trust.
Next:
Integrate progressive web app (PWA) features for offline spec access during field events.
A/B test sticky enquiry bar vs bottom‑sheet form.
Add micro interactions (scroll‑revealed badges, subtle hover lifts).
9. Credits & Constraints
Solo project: strategy, UX, UI, build.
Squarespace limits: decorative curves (e.g., “Our Values” section) required SVG hacks; some alignment discrepancies vs Figma due to block padding.
Minimal custom‑code bandwidth; relied on native blocks + CSS overrides.