Website · Creative agency

JSTRS

A creative agency's website, built from their own Figma design.

Role Website development from the client's Figma design.

JSTRS is a creative agency that plans content and social media for brands, businesses and personalities. They came with a finished design in Figma: loud type, stickers, photos tucked between words. We built it as a working website that looks the way they drew it on a laptop and on a phone, moves as you scroll, and sends every enquiry to their inbox.

Language: Ukrainian
Design: The agency's own, in Figma
Pages: Home, contact form and thank-you page
Enquiries: Sent to the agency's email inbox

01

Building the design as it was drawn

The Figma file had a desktop and a phone version of every section. We compared the built pages with those frames side by side at both sizes, down to the type, the spacing and where each sticker sits, and fixed the differences until they matched.

The team section: a huge black condensed headline reading 'Who we are' with the team's 3D avatars in sunglasses around it and their names beside them — The team section. The headline reads: "Who we are"

Three Instagram statistics cards side by side showing views and follower growth, under a sentence about business owners nobody notices — Instagram results, shown as the statistics screens they came from

The team section on a phone: the avatars rearranged around the headline, with the introduction and a pink consultation button below — The same section, as the phone design drew it

02

Motion that follows the story

The agency's pitch is a path from the first meeting to results, so the page tells it that way. A dotted line draws itself between the steps as you scroll, and headlines arrive line by line. People who ask their device for less motion get the same page, still.

The headline 'Your path to success looks like this' in white on black, with a dotted pink line starting to draw itself from the introduction to the first two numbered steps — The headline reads: "Your path to success looks like this". The line draws on as you scroll

The process section: the word 'Process' in huge condensed type, then a list of steps, each with a small photo: generate ideas, organise the shoot, edit — The process, step by step: ideas, the shoot, the edit, the analysis

03

Every visit can become an enquiry

The pink button to book a consultation comes back all the way down the page. The contact form asks for four things, reads like a sentence and sends the enquiry straight to the agency's inbox, and a visitor's details stay in the form if the sending fails. Visits and enquiries are counted in the agency's analytics and advertising accounts, so they can see which campaigns bring people in.

The contact page: a form written as a sentence in big condensed type, 'Hi, my name is', email, phone and company, each with an input line beside it — The contact form reads: "Hi, my name is…"

The contact form on a phone: the four questions stacked with their input lines and a pink send button — The contact form on a phone

What we delivered.

A Ukrainian-language agency website that matches its Figma design on laptops and phones, tells the agency's process as you scroll, and turns visits into enquiries that arrive by email and are counted in their analytics.

The JSTRS brand, design, photography and content belong to JSTRS.

Build details

Design check: Compared with the Figma frames at desktop and phone sizes
Motion: Plays as you scroll, and stays still for people who turn motion off
Phone speed: Main content in 1.4 s on a slowed-down phone test

Discuss a website See the Websites page

Next casePouchette