Shipped
A visual voice for Property Finder
I created Property Finder's illustration style and motion language: a library of hero illustrations and spot icons, and the animations that make them move on iOS, Android and web.
- Role
- Product Designer, specialising in illustration and motion as part of my role
- Scope
- Illustration style, icon library, motion system, Lottie production and design system guidelines
- Timeline
- About 2 months to the style and a first library, then ongoing
- Platforms
- iOS, Android and web
- Tools
- Figma, Figma Motion, After Effects, Lottie
- 39hero illustrations
- 112spot icons
- 74animated loops in the library
Nobody owned illustration
When I started, the product had no illustrator and no illustration system. Screens borrowed a campaign style of outlined people and busy scenes, and each team picked whatever it found.
That style was built for billboards. At small sizes it lost its meaning, it couldn't be animated without redrawing, and it didn't feel like Property Finder. The ask: make the product more appealing, and the illustrations unique and branded.
Branded and unique
Recognisable as Property Finder at a glance.
Built for product
Reads at 32px, scales to 192px, works light, dark and right to left.
Made to move
Simple layers, so a piece can animate without redrawing.
Easy to extend
Clear rules, so any designer can add a piece that fits.
Where the old style broke, and what replaced it
I started with an audit of every illustration the product used. The clearest break is size: at 48px, next to a list header, the old scenes turn to noise. Then six moments in the product with the old picture and the one that replaced it.
- Nothing foundBefore
After
- Something went wrongBefore
After
- Check your inboxBefore
After
- Before
After
Saved properties and alerts
A magnifier over a flat town became the feature itself: a saved home, a heart and a bell.
- BeforeAfter
Nothing found
Two outlined people with a list became one magnifier.
- BeforeAfter
Check your inbox
A login envelope with a password field became one envelope with two sparks.
- Before
After
Your property hub
A pin on a dotted road became the app itself, with the pin on its screen.
- Before
After
Property valuation
It reused the property hub's picture. Now it has its own: a home with rising bars.
- BeforeAfter
Something went wrong
A man cutting a ribbon before a crowd became one tipped-over cup.
Two months, then ongoing
About two months from scratch to the style and a first library. Then the work kept going: motion for the product, a playbook, and new pieces as teams asked.
Illustration
Motion
Hand-off
Five rules, one palette
Simple enough for any designer to follow, strict enough that every piece looks drawn by the same hand.
No outlines
Volume comes from gradients, never from strokes.
Soft gradient body
Lavender to sky where the light hits, deeper violet in shadow.
One red accent
Exactly one red element per piece: a tag, a check, a coin, a roof.
Friendly geometry
Rounded shapes and objects people know. No crowded scenes.
White carries meaning
Symbols and windows are solid white, so the idea reads first.
Palette
Six gradient tokens, each with one job.
- Lit surface
#ADA0F9 → #C1F3FFFront faces, the main body - Receding surface
#ADA0F9 → #8F63CBSides turning away from the light - Shadow
#8F63CB → #5E4090Deep sides, bases, depth - Light face
#DCD6FC → #C1F3FFBuilding faces, soft backgrounds - Brand accent
#EA3A35 → #FF8F88The one accent: tag, coin, check, roof - Detail
#FFFFFFSymbols, windows, openings
Two families, two jobs
Hero illustrations
Set the tone for a full-screen moment.
96px128px · ideal192px- Onboarding
- Empty states
- Confirmations
- Errors
- New feature highlights
Spot icons
Give quick context next to content.
32px48px · ideal64px- List headers
- Feature pointers
- Inline notifications
- Form helpers
- Cards and tiles
Usage rules
- DoUse spot icons from 40px up, in hero moments and roomy layouts.
- Don’tUse spot icons inside buttons or small components.
- DoUse system icons (24px grid) for everything functional.
- Don’tAdd a second red accent, or outline a shape.
- DoCheck every piece on light and dark surfaces.
- DoMirror pieces with direction or text for Arabic (RTL).
Right-to-left
Every piece is checked on light and dark. Anything with a direction is mirrored for Arabic, motion included.
Beta tag
Beta tag Arabic
Sold property
Sold property ArabicInto the product
I animated the moments people see most in After Effects and shipped them as Lottie to iOS, Android and web. Tap any animation to replay it.
First launch
The brand mark opens onto onboarding. Step through the scenes with Continue, the dots or a swipe.
Moments in the app
City loader
A skyline that builds itself while results load.
Success confirmation
One confirmation in four versions: light, dark and both reading directions.
Hero moments
Ambient loops for tools and feature highlights.
Ratings
A positive rating, light and dark.
Search tabs
Rent, Buy and Off-plan tabs react when tapped.
Micro-interactions
Favourite burst, lock, sparks and the AI icon in its states.
In the app
Screens from design mockups, with sample listings and example prices.
A playbook for motion
The product animations showed me what works. I wrote it down so anyone can animate a new piece the same way.
Fun, bouncy, but not much
One idea per piece, small moves, honest physics. It has to feel good on the tenth view.
The pause is part of the story
After the action, stillness. It keeps busy screens calm.
One after another
Bars grow one by one and keys type in order. Order shows hierarchy.
Anticipate, act, settle
Big moves wind up the other way first, then settle in two or three smaller swings.
Pivot where it would hinge
Bells swing from the top, trees sway from the trunk, tags from the ring.
Never touch the edge
Nothing crosses the frame. If a move needs room, the piece scales down.
Timing
| Move | Duration | Easing |
|---|---|---|
| Pop, press, tap | 0.08 – 0.20s in, 0.12 – 0.20s out | Ease in to press, ease out to release |
| Grow, spring | 0.25 – 0.55s | Ease out with about 6% overshoot, then settle |
| Sway, breath, float | 0.5 – 1.0s per half cycle | Ease in and out |
| Continuous rotation | The full loop | Linear |
| Damped settle | 2 – 3 smaller swings | Ease in and out |
| Gap between pieces | 0.1 – 0.2s | Same easing for every sibling |
Overshoot 1.03 – 1.15×, never more. Float ±1.5 – 2.5px, sway ±3 – 6°, pulse 0.85 – 1.05×, wiggle ±4 – 7°.
Two loop types
Every loop lasts two seconds and ends on its first frame, so it never jumps. Each piece is one of two kinds.
Story loop
One small event, then stillness. Icons, success, error, tap.
Ambient loop
A gentle drift that never stops. Hero pieces and tools.
Recipes
Six moves I use most, each shown on library pieces I later animated with them.
Sparks
Sparks are born, spin and fade. A second one lights as the first dies.
Smooth float
Related parts bob against each other, so the piece feels alive without an event.
Data refresh
Bars dip and spring back one by one, then the trend arrow sweeps in.
Typing
Keys tap in order, the red key last and deeper, then the result pops.
Swing from a pivot
Bells and signs rock from where they hang: two knocks, then a settle.
Continuous rotation
Clock hands and globes turn once per loop, on their axle.
Animating the library
With the playbook written, the library could move too: 39 hero illustrations and 112 spot icons, each built from a few simple layers, with 74 of them animated so far. Here are some of the best. Open any one to see how it moves.
These loops come from the Figma library; not all of them are in the app yet.
Hero illustrations
Spot icons
Scale with an AI-assisted workflow
I used the playbook with Figma Motion and an AI-assisted workflow to animate the library, then checked every loop frame by frame for clipping and seams.
Document and hand off
Usage guidelines, sizes, do's and don'ts, naming and a template, so other designers can add new pieces.
Formats
Lottie files for the animations in the iOS, Android and web products, SVG for every still piece, MP4 renders of the library loops and the splash, and Figma components so designers can drop any piece into a screen.
Where it landed
One recognisable visual language now runs from the splash screen to the smallest list header, with a playbook so every new piece can move the same way.
Designed and animated at Property Finder. The old illustrations in the before and after were made by others and appear only as the starting point.
Next case studyProperty Finder homepageWant to talk about this project? Email is quickest.