Vyta Locations Feature
Designing a scalable locations system across provinces and cities
Role
Solo Designer
Timeline
2 Weeks
Tools
Figma
Deliverables
5 Page Designs
A growing brand with no location presence
As Vyta expanded its services across multiple provinces and cities, the website had no dedicated way to showcase where services were available. Visitors couldn't easily find out if Vyta operated in their area, leading to confusion and missed conversions.
The challenge was to design a scalable locations system, one that could grow with the brand as new cities and provinces were added, while always giving users a clear, helpful answer about service availability in their area.
A locations system built to scale
Clear Availability
Give every visitor an immediate, clear answer about whether Vyta serves their area.
Scalable Architecture
Design a system that works for 2 cities today and 20 cities tomorrow without needing a redesign.
Consistent Experience
Each city page should feel like a natural extension of the Vyta brand, not a generic template.
Designing for every state
- 01
Designed a parent locations page showcasing all provinces and service areas at a glance
- 02
Created an expanded provinces state so users can drill down into specific regions
- 03
Designed a service unavailability state to handle areas not yet covered, turning a dead end into a helpful moment
- 04
Built individual city page templates that scale, each page provides local context while staying on brand
5 pages. Every state considered.
From the parent locations overview to individual city pages and edge cases like service unavailability.
All Provinces Expanded
Service Unavailable State
City Page: Variant 01
City Page: Variant 02
A locations system that scales
15+
City pages designed
A scalable template ready to roll out across every Vyta market
3
Page states designed
Default, expanded provinces, and service unavailability. Every scenario covered
1
Cohesive system
Every location page feels like a natural part of the Vyta brand