A brand strategy that became a living website

Evoke's CEO felt the brand, but couldn't voice it. Strategy and motion now speak for it.

Client
EvokeMarketing Agency
Year
2025
Role
Brand strategy Web design UX motion
Made with
  • FigjamFigjam
  • FramerFramer
  • RiveRive

Impact

  • Passionate at first sightThe site feels real and attentive before a word is read
  • 93Lighthouse speed score
  • 925 KBAll motion lives in one file
  • 0.5 sFirst content appears

Stephen, Evoke’s CEO, felt the brand’s depth but couldn’t articulate it, although his team had exhibited those values before anyone codified them. I turned that behaviour into a strategy, and the strategy then shaped the website and all of its motion.

Evoke is a Gulf advertising agency, and this was its first website: the company profile new clients meet first.

Defining the brand before producing the website

Brand strategy and visual design in Figma, development in Framer and Rive

I led Evoke’s strategy and then carried it through the identity and the website.

We did a 1:1 branding workshop that mapped Evoke’s values and personality and placed the agency as a Guardian, the archetype that protects and leads. Power leads the archetype and Trust supports it.

Evoke's vision and values: passionate, impactful and reliable
Archetype grid positioning Guardian through primary Power and secondary Trust
Personality sliders favouring energetic, loud, simple, aggressive and luxurious
Chose

Lead with, and exhibit values

Rejected

Trendy animated website

I aligned with Stephen and argued for leading with values and services over just pretty animations. Case studies were lacking at the time.

Turning the logo into a guide

Two shapes in Evoke’s logo stood out to me, so I distilled the circle inside the O and the yellow semicircle into a dot that guides visitors through the whole site.

Evoke wordmark with a circle inside the O and a yellow semicircle above it
Yellow dot variations including a full circle, rings and a half moon

Designing the website as a guardian’s journey

The page walks visitors through Evoke’s values and services the way a guardian would lead them. The layout adapts to desktop, tablet and phone while it keeps that path intact.

Evoke's company profile on desktop, tablet and mobile showing the Ideas into impact hero

Giving the brand a careful yet dynamic motion

The hero below is the live Rive file from the website. Rive is a tool for interactive animation that runs in the browser. Evoke watches the visitor and responds without getting in the way.

The website hero running live from the production Rive file.

Every value and every call to action got its own small animation. This page is the first showcase for those pieces.

Values and culture animations from the same file.

Measuring the result in speed and in feeling

All the motion lives in one Rive file, lighter than a single high resolution image. The Framer site scores 93 on Google Lighthouse, a standard speed test.

File size comparison between Evoke's single Rive file, a high resolution image and a Full HD video
Google Lighthouse report showing performance, content rendering, blocking time and layout stability

Speed is only half of the result. People judge a website within about 50 milliseconds of seeing it (Lindgaard and colleagues, 2006). In a Stanford study nearly half of participants judged a site’s credibility by its visual design (Fogg and colleagues, 2003). Evoke’s site feels real and attentive in that first moment, and that impression earns the trust that the strategy set out to win.