Codas Consulting: A Figma-to-Framer Landing Page That Turns Ambition into Achievement
Codas Consulting is a UK performance consultancy that helps organisations turn strategy into measurable day-to-day results. Its offer is a hard one to explain in a sentence: strategy, live performance data and people, joined into one system. We designed and built the company's landing page so a visitor can understand that quickly and take one clear next step. You can see it live at codasconsulting.co.uk.
The Codas hero on desktop (left) and on a phone (right).
The brief: one page, one job
Consulting sites often try to say everything. This page has one job: help a busy operations or leadership visitor recognise their own problem, see that Codas has a clear approach, meet the people, and start a conversation. That decision shaped the length, the copy and the order of every section.
The page, section by section
1. A promise, one button and proof
The hero leads with the promise: "Helping organisations turn ambition into achievement", followed by a one-line explanation, a single Book a conversation button and a slow strip of client logos. The logos are shown in one tone so they sit quietly over the imagery instead of competing with the headline. The particle starling gives the page a distinctive, memorable first impression without needing stock photography.
Hero: promise, call to action and client logos.
2. "Does this sound familiar?"
Before explaining the solution, the page names six situations the visitor is probably living with: targets missed, too much firefighting, teams pulling in different directions, plenty of data but little visibility, managers chasing instead of leading, and good people not having the impact they could. Each one has its own animated icon. On desktop they sit in one row; on a phone they reflow into two rows of three.
Six problems, six animated icons.
3. The reframe
One short section carries the whole argument: the challenge isn't capability, it's alignment. Most organisations have talented people, data and a strategy. Few bring them together. It is deliberately quiet, with a lot of white space, so the idea lands before the page moves on to the solution.
The reframe: capability is not the problem, alignment is.
4. The Codas approach, as a diagram that moves
The approach is explained with an animated diagram: strategy, information and people flow into alignment, which leads to achievement. We made separate desktop and mobile versions of this animation, because a left-to-right flow is easy to read on a wide screen but would be tiny on a phone. On mobile it becomes a vertical stack of the same five steps.
Desktop: the flow runs left to right.
5. From strategy to the shop floor
Next, a dashboard shown on a shop-floor screen makes "live, visual performance" concrete, followed by the five-stage approach: Diagnose, Design, Build, Bring it to life, Sustain. Each stage has an icon and a one-line description, and the sequence is animated as a connected line.
Making the idea tangible.
The five-stage approach.
6. Three specialists, one system
This is the differentiator: most consultancies advise, IT firms build technology and coaches develop people, while Codas connects all three. Three cards (consultant and systems engineer, coder, operational coach) show the roles, each with a short "strategy, design, deliver" style line.
Three roles around one performance system.
7. People, then the ask
The page ends with the founder and the business support lead on either side of the final call to action: a 30-minute conversation about where the organisation is trying to get to and what is getting in the way. Putting real faces next to the button is a trust cue for a service business that sells on relationships.
Team cards and the final call to action.
From Figma to Framer
The design started in Figma, where we worked out the story, the type and the layout, and then moved into Framer for the build. Framer let us keep the polish of the design (large type, generous spacing, layered imagery) while making the page responsive and fast to publish and edit.
The motion was prepared as separate, lightweight assets so the page stays quick:
- Nine Lottie animations: six icon animations for the "sound familiar" cards, one for the five-stage approach, and separate desktop and mobile versions of the approach diagram.
- A hero scroll animation prepared as a video and a GIF fallback.
- Ten client logos as SVGs, so they stay sharp at any size and scroll as a continuous strip.
- Team headshots exported on both light and dark backgrounds, so the same portraits work on either section colour.
Keeping the animation as vector data instead of video means it stays crisp on high-resolution screens and does not add heavy files to the page.
On a phone
Most first visits to a page like this happen on a phone, so we checked each section at mobile width. The headline wraps over the hero image, the problem cards become two rows of three, and the approach diagram stacks vertically with its own mobile animation.
Mobile: hero, problem cards and the stacked approach diagram.
Decisions that kept it simple
- One action, repeated. The only button on the page, Book a conversation, appears in the hero, after the approach and at the end, so the next step is always in reach.
- Short, plain copy. Every section makes one point in a few lines, and the visuals carry the explanation.
- Motion with a purpose. Animation is used to explain (the problems, the flow, the stages), not to decorate.
- Built to be edited. Because it is built in Framer, the Codas team can change copy and images without a developer.
Where it stands
The page is live. We are not publishing conversion or traffic numbers for it here. The right way to judge a page like this is by the quality of the conversations it starts, and that is a measure for Codas rather than for a case study.
Want a page like this?
If you have a complex service that is hard to explain, or a design in Figma that needs to become a fast, editable website, we can help. Book a call and we will look at what your page needs to do.
