UX/UI Case Study · Web Redesign · 2025

Smart
Baby

A full website redesign for a licensed private kindergarten in Volgograd, Russia — transforming an outdated, cluttered site into a warm, premium, conversion-focused digital presence.

UX Research UI Design Frontend Dev Figma HTML / CSS / JS
Smart Baby redesign
0 → 1
Complete brand & design system built from scratch — kindergarten with no prior digital identity
Client
Smart Baby
Kindergarten, Volgograd
My Role
Lead UX/UI Designer
Frontend Developer
Deliverables
4 pages · Design system
Animations
Stack / Timeline
Figma · HTML / CSS / JS
~3 weeks end-to-end
01 — Overview

A garden
that needed
to bloom

Private Kindergarten Education Volgograd, Russia B2C

Smart Baby (Умный Малыш) is a licensed private kindergarten in Volgograd offering child development programs — mental arithmetic, school preparation, weekend groups, and more.

Their existing site at 34sadik.ru had grown into a chaotic patchwork of mismatched styles and zero design language. Parents landing on it were losing trust before reading a single word. The gap between their real-world quality and digital presence was doing commercial damage.

The goal: build a site that parents trust at first glance — warm, professional, and optimised for conversion.

Challenge
Legacy site with no design system, cluttered layout, zero brand identity, broken mobile experience
Approach
Full research-to-delivery: audit → personas → CJM → Figma → build → handoff
Outcome
4-page premium site, cohesive design system, scroll animations, consistent visual identity
02 — The Problem

The site was losing parents
before they read a word

Parents choose a kindergarten under emotional pressure. Their unconscious judgment forms in milliseconds — before any text is processed. The visual language must signal: this place cares.

No visual identity
Clashing styles, no system
Broken mobile
Not responsive at all
Legal risk
No compliance docs
No conversion path
Parents couldn't act
01
No visual identity

Every section looked like it was built by a different person in a different year. Mismatched fonts, clashing colours, inconsistent spacing — zero design language. It didn't feel like a brand; it felt like a folder of forgotten experiments.

First impression failed before text was read
Before
6+ font families on one page
Auto-scrolling banner, unreadable overlays
Pink/yellow/teal — no visual logic
No consistent buttons or cards
After
Playfair + DM Sans, sage/clay palette
Static editorial hero, clear hierarchy
Consistent language across all 4 pages
02
Broken mobile experience

Russian parents browse for kindergartens primarily on mobile — often while commuting or caring for another child. The old site had no responsive layout. Text overflowed containers, images broke, and buttons were physically impossible to tap.

Majority of traffic had zero usable experience
Before
Fixed-width, overflows on mobile
No touch-optimised tap targets
Images clipped on small screens
After
Mobile-first, desktop as enhancement
44px+ minimum touch targets
Fluid typography via clamp()
03
Legal compliance gaps

Russian educational institutions must comply with Federal Law №152-FZ on personal data and licensing disclosure requirements. The old site had no privacy policy, no data processing statement — a live legal liability.

Active legal risk under Russian federal law
Before
No privacy policy (required 152-FZ)
No data processing statement
No licensing disclosure on site
After
Full privacy policy, brand-styled
Personal data processing statement
Licensing block on all programme pages
04
No conversion architecture

Everything on one endless homepage — no dedicated programme pages, no clear CTAs, no structured content hierarchy. Parents had to hunt for age ranges, pricing, and how to sign up. The site failed at its primary commercial function.

High bounce rate, zero clear enquiry pathway
Before
Everything on one monolithic homepage
No pricing cards or schedule tables
Phone buried, no CTA button
After
4 dedicated programme pages
Pricing + schedule on every page
CTA in hero, mid-page, and footer
03 — User Research

Who we're designing for

Three parent archetypes based on the kindergarten's actual enquiry patterns and the emotional context of choosing early childhood education in Russia.

Anastasia, 31
Working mother · First child · Time-scarce
"I need to know in 30 seconds if this is worth a phone call."
Clear programme overview — no hunting
Visible pricing upfront — no surprises
Licence and official credibility signals
Easy phone / WhatsApp contact
Mobile-first Decision-maker High standards
Dmitry, 36
Father · Research-driven · Sceptical buyer
"Show me the licence number and the methodology. Then we can talk."
Documented methodology with evidence
Named teachers with real qualifications
Legal documents accessible and readable
No sales pressure — let him read at his own pace
Detail-oriented Trust-through-proof
Lyudmila, 58
Grandmother · Decision-influencer · Values warmth
"It needs to look like a real place where children are cared for."
Warm, human visual tone — not corporate
Photos of real teachers and environment
Obvious phone number, no complex forms
Address and map clearly visible
Warmth signal Phone-CTA
04 — Design Process

From audit to handoff

Five phases over three weeks — each building on the last, with research grounding every visual decision.

01
Discovery
Audit + BriefSite walkthrough · competitor scan · research
02
Research
3 personasCJM · Pain points · HMW questions
03
UX Design
IA + FlowsSitemap · Wireframes · Content strategy
04
UI Design
4 pages in FigmaTokens · Components · Animations
05
Build & Handoff
HTML/CSS/JSDocs · Client handoff
05 — Customer Journey Map

Understanding the parent journey

Mapping the emotional arc of a parent discovering, evaluating, and deciding on a kindergarten — and identifying exactly where the old site failed them.

Stage Awareness Consideration Evaluation Decision Onboarding
Action Searches "private kindergarten Volgograd" on phone Clicks site, scans homepage in seconds Looks for programme pages, pricing, team credentials Ready to call or submit an enquiry Calls, visits, signs child up
Thinking "Which options look credible enough to click?" "Does this place look trustworthy with my child?" "Does the programme match my child's age and needs?" "I've seen enough — how do I take the next step?" "Was this the right choice?"
Feeling Scanning · Neutral Anxious · Judging fast Cautious · Needs proof Impatient if CTA unclear Hopeful
Old site Pain No SEO signal, buried in results Pain Chaotic visuals destroy trust instantly Pain No programme pages — content buried Pain No clear CTA, phone number hidden
New site Fix Programme pages improve SEO relevance Fix Editorial warmth + licensing builds trust Fix Dedicated pages per programme with pricing Fix CTA in hero, mid-page, and sticky header Fix Warm brand impression carries into visit
Opportunity Better meta titles, programme landing pages Hero answers "what is this?" in under 5s Dedicated pages: pricing + schedule per programme Phone, WhatsApp — multiple contact pathways Newsletter / news feed for ongoing engagement
06 — Before & After

Five pages, one system

Same kindergarten, same services — radically different first impression. Click any screen to zoom.

Before Before
34sadik.ru — Original
No system · Desktop-only · Not responsive
After main After
Main Homepage — Redesign
Hero · Age groups · Team · Trust signals · Newsletter
Weekend After
Weekend Group
Ages 3+ · Sat–Sun · 1 200 RUB/day
Mental Arith After
Mental Arithmetic
Ages 4–12 · 9 levels · 3 500 RUB/mo
School Prep After
School Preparation
Ages 5–7 · Reading, writing, maths · 4 200 RUB/mo
5 pages
Dedicated programme content with focused CTA on each
Mobile-first, fully responsive across all breakpoints
Fluid layouts · Clamp() typography · 44px touch targets
Design philosophy
Warm, not cute. Professional, not cold.
07 — Design System

Built on a system,
not a feeling

Every visual decision documented as a token — ensuring consistency now and zero design debt when the site grows. Hover over any swatch to expand.

Cream
#FAF8F4
Background primary
Petal
#F9EEE6
Section alt background
Sand
#EDE8DE
Borders & details
Sage
#7B9E87
Section labels, success
Clay
#C47B5A
Primary accent, CTAs
Blush
#E8A89C
Decorative highlight
Sky
#B5CDD9
Tag / chip accent
Butter
#EDD68B
Warmth highlight
Ink
#2C2620
Headings, dark sections
Typography
Playfair Display
Display / Headings · 700 · Italic for warmth accents
DM Sans — body & UI
Body / Labels / Buttons · 300–600 weight
SECTION LABELS
Labels · 10–11px · 600 · .16em tracking
#FAF8F4 · clamp(32px,4vw,58px)
DM Mono · Token values and code
Spacing Scale
4px · Micro (icon gap)
8px · Tag / chip gap
16px · Component internal
32px · Card gap
64px · Section grid gap
80–120px · Section vertical padding
08 — Design Decisions

Choices that had reasons

Senior design is about the decisions you make and why. Click each to explore the thinking.

Sage + Clay instead of primary kindergarten colours
Colour strategy · Brand positioning
The problem

Most kindergarten sites default to primary brightness — red, yellow, blue. Bold, playful, child-facing. But the audience is parents, not children. Bright palettes signal "childcare template", not "premium educational institution".

The decision

Earthy sage greens and terracotta clay on warm cream. Warm enough to feel human, restrained enough to feel trustworthy. Designed for the person making the financial and emotional decision — not the child attending.

One page per programme, not one long homepage
Information architecture · SEO · Conversion
The problem

Everything crammed onto one endless homepage creates cognitive overload and kills SEO relevance. A parent searching "mental arithmetic Volgograd" lands on a generic page with no signal that this is what they need.

The decision

Each programme gets its own dedicated page. Focused conversion, better SEO, shareable links. Parents can send exactly the right page to their partner without explaining the whole site.

Mascot as brand personality anchor
Illustration · Identity · Memorability
The problem

No brand photography at launch. In education, photography is the primary warmth signal. Without it, the site risks feeling clinical — all text and cards, nothing human or memorable.

The decision

A friendly dinosaur mascot and hand-drawn cloud elements run across all pages, creating visual character without a photoshoot. When photography is added, it enhances rather than replaces — no redesign needed.

Legal compliance as a trust feature
Legal design · RF compliance · Trust signals
The problem

Legal pages are usually afterthought boilerplate dumped in a footer. For a licensed educational institution under RF law, missing docs are both a legal liability and a missed trust signal.

The decision

Full legal documentation authored and designed to match the site aesthetic. The licensing block on programme pages — with licence number — turns a regulatory requirement into visible evidence of institutional seriousness.

Playfair Display — editorial over playful
Typography · Brand positioning · Differentiation
The problem

Most Russian childcare sites use Nunito or rounded variants throughout — creating a wall-to-wall sameness in the category. Smart Baby needed to look different to signal that it is different.

The decision

Playfair Display as display face: editorial authority, warmth, elegance. Paired with DM Sans for UI — modern, clean, friendly. Confident and approachable without being childish or generic.

09 — Outcomes

What was delivered

4
Fully designed and built pages — main homepage + 3 dedicated programme pages
100%
Mobile responsive — fluid layouts, touch targets, clamp() typography across all pages
0→1
Design system created from scratch — tokens, components, typography, colour, spacing
Custom brand mascot and illustration system for consistent visual identity across all pages
~3wk
End-to-end: discovery audit through to client handoff with full documentation
Fully responsive across all breakpoints — designed mobile-first throughout
10 — Reflections

What I learnt

Designing for parents is designing for trust under pressure

Parents choosing a kindergarten are doing so under significant emotional load. Design in this context is not about delight — it is about reducing anxiety and building confidence fast. Every visual decision has to answer: does this make a parent feel safer?

Premium aesthetics are overdue in education

The instinct in childcare design is to go bright and playful. But the user is the parent making a financial decision, not the child. Premium aesthetics signal seriousness. Designing against category conventions is the strongest differentiator in a market where everyone looks identical.

Information architecture is the highest-leverage UX decision

The biggest improvement was structural — moving from a monolithic homepage to dedicated programme pages. No visual polish can compensate for poor content structure. The right content, in the right place, at the right moment in the journey is the foundation everything else builds on.

Legal compliance is a design problem too

Privacy policies are usually afterthought boilerplate. For a licensed educational institution, these documents are trust signals when designed well. Turning a regulatory burden into visible evidence of seriousness is a genuine competitive advantage in the Russian education market.