Reframed the opening state
- Reduced competition at the top of the page so the release lands first
- Made the primary listening action the clearest immediate move
- Clarified what the page is for before asking users to explore further
Lotta for Change · UX/UI Design
Clarifying the homepage around the release, the CTA path, and mobile reading flow
A homepage redesign focused on clarifying the release hierarchy, making the first action easier to spot, and stabilizing the mobile reading flow without flattening the site's existing character.
Deployed
April 2026
Role
UX/UI Design
Scope
Homepage
Tools
Figma, WordPress
Focus
Hierarchy, CTA, mobile
01 — Context
Why the original homepage was not guiding action clearly enough
The existing homepage had a strong visual identity, but the release was not being given enough room to land. Primary actions were easy to miss, competing moments carried similar weight, and the page asked visitors to infer its priorities rather than presenting them directly.
The redesign focused on making the homepage easier to scan, easier to act on, and more dependable on mobile — without overriding the visual character that was already working.
02 — Decisions
Three design moves made the page easier to scan, understand, and act on
Rebuilt the page for smaller screens
- Adjusted scale and spacing so the hierarchy survives the mobile layout
- Rebuilt vertical rhythm so stacked sections still scan in order
- Simplified section flow and stabilized interaction behavior
Made discovery more deliberate
- Clarified grouping and content priority
- Tightened type relationships between headline, support copy, and CTA
- Made the relationship between the single and the wider project context easier to follow
03 — Before / After
The comparison shows the hierarchy shift, CTA priority, and reading order more clearly
Before
Unclear CTA hierarchy
Primary actions competed with secondary content, so the page did not make its intended first move obvious on arrival.
Competing focal points
Several strong visual moments carried similar emphasis, without enough priority logic to guide attention through them in sequence.
Inconsistent spacing and rhythm
Section transitions and vertical spacing did not consistently reinforce the content hierarchy, especially under quick scanning.
Mobile readability and layout issues
On smaller screens, copy, CTAs, and stacked media created friction in the reading flow and made the page feel less stable than the desktop version.
After
A clearer opening hierarchy
The redesigned landing state clarifies what to do first, instead of letting the primary action compete with the rest of the page.
A more legible reading order
Tightening typography, spacing, and grouping made the page readable in sequence — something to scan through rather than decode section by section.
More stable interaction cues
Buttons, toggles, and supporting states were tightened so each interaction feels deliberate — nothing ambiguous, nothing that reads as accidental.
04 — Mobile
Mobile was rebuilt as part of the core redesign, not treated as a follow-up fix
Mobile optimization
The original homepage didn't translate cleanly to mobile — hierarchy flattened and key actions lost clarity. The redesign rebuilt pacing and section order so the page stays legible on smaller screens.
Dual CTA structure
Two distinct calls to action: one for immediate listening, one for exploring the broader project context — making the goal clear without reducing it to one path.
Language and content controls
Language toggles and collapsible sections keep secondary content accessible without cluttering the main path.
05 — Reflection
What the redesign improved
The core challenge was not inventing a new visual language, but making the existing one behave with more discipline. The redesign worked best when it reduced ambiguity: clearer first actions, clearer pacing, and a homepage that supports the release without asking users to decode its priorities first.