Series
Work
• 
Making
Client
SwipeSimple

A sample on the process for ongoing UI creation: Volume x Fast

In a brief

SwipeSimple's landing pages and UI modules are an ongoing engagement, not a one-off build. Every week brings a new request — a hero that has to hold up next to Square, a module that has to fit four industries and their social proof into one screen — and each one gets built as several layouts before one ships. Behind the pages that go live sits a canvas of discarded variants, a Figma library that keeps everything on a single system, and a hybrid image pipeline combining Blender renders, green screen, and AI-generated scenery so the hardware on screen always matches the hardware in the box.

Transforming our requests into sentence challenges

"Let's make this hero section have the kind of visual impact Square gets on its homepage." Or: "Let's list all of our business-type solutions with a special focus on on-site services."

Both are fair requests. Neither tells you what the module looks like. The work is turning that sentence into something that respects the brand guidelines, stays aligned with whatever the marketing direction is that quarter, and still gets to the point. That translation is the whole job, and it happens every week.

A few minutes of canvas, compressed. The dead ends are the majority of it.

Volume is the method

Every week we built dozens of artboards holding every pivot, micro-adjustment and discarded concept.

Concepts and variations.

That is not indecision. Building three versions of a hero, four of a hardware display and a couple of pricing modules is the only reliable way to find out which order of information actually reads. You cannot argue a layout into working; you have to see it next to the alternative. The final page is the tip of it.

A hero built to hold its own against companies like Square. The image is a 3D render shot at a fixed camera angle against green screen, with AI handling scenery and lighting on top.
One hero view carrying a prominent CTA, a feature summary, testimonials and a collage of use cases. Cramming that in is easy; making it readable is the exercise.

One system, one source of truth

None of this holds together without a library. Text, colors and effects run on Figma synced styles, so a change lands everywhere at once and a module built in week nine still looks like it belongs beside one built in week two.

Figma synced styles keeping type, color and effects tied to a single source of truth.
The same logic applied to screen mockups: one branded system reused across every landing page module.

Making the hardware look like the hardware

The imagery is where the pipeline gets specific. The UI on the screens is designed in Figma. The hardware is rendered in Blender, shot at a controlled camera angle over green screen. The scenery and lighting come from AI — Nano Banana, plus additional engines for the final polish.

The point of splitting it this way is control. Ask a model for a card reader on a café counter and you get something that resembles the product without being it: invented ports, a button that does not exist, an app screen that is not the app. Rendering the device and compositing the real UI means the AI only handles what it is good at, which is light and environment. No hallucinations on the parts that matter.

Same render, green screen and AI workflow applied to hardware shots, so results stay consistent across modules.

Mockup variations from the same pipeline: Figma for the screen UI, Blender for the hardware, AI for the scenery and polish. Everything matches the real device and the real app.

Modules that have to carry a lot at once

Most of the difficulty is density. A single module often has to hold testimonials, social proof, app store ratings, the four industries the service is built for, visual cues for each of them and a short description apiece — without turning into a wall.

Other modules go the opposite way. The hardware section works better clean, so it borrows from Microsoft's restraint while staying inside SwipeSimple's identity.

Testimonials, social proof, ratings and four industries in one module. Solved by ranking them, not by shrinking them.
The hardware lineup, presented with a clean UI inspired by Microsoft while keeping the brand's established identity intact.
Light use of media, with feature cards that reveal on hover.

Keeping people in context

Two decisions worth naming. The CTA opens its form inside the same interface instead of sending anyone to a separate page, so nobody loses their place mid-consideration. And the immersive hero uses a top nav variant that lets the video background stay visible, with short hardware links at the bottom and the value proposition and main CTA at the center.

The form opens in place. No page change, no lost context.
An immersive hero: video background left visible by a lighter top nav, hardware shortcuts along the bottom, value proposition and CTA holding the center.

In summary

Ongoing UI work is less about single big ideas than about keeping quality steady while the volume stays high. Synced styles hold the system together, a hybrid Blender and AI pipeline keeps the imagery consistent and honest to the product, and a lot of discarded layouts make sure the one that ships was actually chosen rather than settled for. Square and Microsoft are the references; the brand is still SwipeSimple's.

More on our work and publications

Browse all

If anything here sounds like we can build together, let's talk!

What we do