The city through the eyes of people with visual impairments
Urban Vision Solutions makes a visual impairment simulator for architects, universities and institutions. We designed the brand identity and an accessible landing page that lets visitors see the difference on the very first screen.
- UX/UI
- Landing page
- Development
- Category
- Web
- Scope
- Website
- Industry and model
- Brochure website · B2C
- Technologies
- WordPress, PHP, Laravel, Tailwind
- Website
- urbanvisionsolutions.com ↗
Challenge
A website about accessibility had to be fully accessible itself.
The simulator shows how people with various visual impairments see urban space. The landing page had to explain this to people without such limitations, while serving those who have them just as well.
We designed a visual identity and a website that meets WCAG 2.1: high contrast, readable typography, screen reader support and simple navigation. There are two versions: one for companies and institutions and one for individual users.
From comparison to buying the simulator
The page shows the problem first, then explains the tool.
- 01
Comparison
On the first screen, a slider compares normal vision with a selected condition.
- 02
Story
A video and the story of a visually impaired person’s daily walk through a train station.
- 03
Conditions
A list of conditions available in the simulator, with a short description of each.
- 04
Purchase
Who the tool is for, a gallery of scenes and buttons for the sales platforms.
A landing page that lets you see the difference
Images from the simulator lead through the whole page.
The world through others’ eyes
A video from the simulator shows a person with a visual impairment walking through a train station. In the version for individual users, the story follows a heroine who takes the same route every day.
Conditions in the simulator
Each condition has its own card, from monochromacy and color blindness, through cataracts and diabetic retinopathy, to myopia. The selected card expands with a short description, and the effects section lets you switch reduced contrast, impaired acuity or color blindness on the same simulator scene.
Who the tool is for
Architects and developers, universities and schools, organizations and companies, and private individuals. A gallery of simulator scenes shows how materials, color and texture affect the perception of space.
Purchase
A dark banner leads to the purchase on Steam, GOG and the Epic Games Store.
Scope of work
Visual identity
Logo, color palette and icons for the Urban Vision Solutions brand.
UX/UI
A landing page in two versions, for companies and institutions and for individual users, compliant with WCAG 2.1.
Development
WordPress build with simulator videos and purchase links.
Want a similar project?
Tell us about your idea and we will get back to you with specifics.
