Overview
Milanosport manages 24 public sports facilities across Milan, but its website made using them unnecessarily hard. Booking a session took 16 clicks across multiple pages. Finding an accessible facility required 10 steps. The information architecture was inconsistent, the visual design was dated, and key accessibility standards were unmet — all for a platform serving a diverse, city-wide public.
This project was a full UX redesign: from research and diagnosis through to a new information architecture, visual identity, and high-fidelity prototype. The brief was clear — make it usable, make it accessible, make it feel like a modern public service.
Timeline
This was a fully collaborative project — Duru, Yaren and I contributed equally across every phase, from the initial heuristic evaluation and competitor analysis through to the information architecture, visual identity, and high-fidelity prototype. Every major decision was made together.
Figma
Problem
Goals
Research & Insights
Usability Heuristic Evaluation
Issues across visibility of status, consistency, error prevention, minimalist design, help, and accessibility.
Competitor Analysis
We analyzed the main direct and indirect competitors of Milanosport to see how it is performing and in which areas it is lagging behind.
Benchmarking findings
- Consistency and coherence is the parameter competitors excel at and should be improved in Milanosport.
- Airbnb and Trainline are very usable due to seamless navigation and clear call to actions.
- Milanosport performs poorly in error-proofing, minimalism, readability, and ease of navigation.
Comparison summary
User personas
We identified five personas based on different features and services available on the competitors.
"YOLO, lets just do it, man!"
Bob
International student who just moved to Milan.
Goals
- Scheduling sporting activities
- Participating in sporting events
- Meeting new people and exploring the city
"Nourish the mind and the body"
Carla
Olimpia Milano supporter that is a wheel-chair user.
Goals
- Finding competitions for wheel chair basketball
- Being healthy
- Finding facilities that offer accessible sporting options
"Use it or lose it"
Lorenzo
A retired senior who owns a dog and a cat.
Goals
- Easing the pain
- Taking care of his health
- Finding affordable classes
- Socializing
"Be water, my friend"
Fabio
A colorblind body-builder gym manager.
Goals
- Have more clients
- Manage the gym and its schedule
- Organizing events
- Having work-life balance
"Live your life like a work of art"
Chiara
A writer, who is a mother of two kids aged 8 and 11 y.o.
Goals
- Keeping the children physically active and healthy
- Taking care of herself
- Socializing
- Having work-life balance
Cognitive walkthrough
We identified four main tasks and analyzed the flow and number of clicks required on the current Milanosport website for each one.
Information Architecture
We simplified the structure of the website and added new sections, such as profile and routes.
Home
Centres
Specific center page
Summer camp
Specific summer camp
Events
Specific events page
Profile
Routes
Wireframes
Since there were many usability issues — including accessibility, consistency, and user control — we decided to design from scratch, creating wireframes based on our information architecture.
Design System
Logo
We designed a new logo in a more modern and minimal style that is more legible in small sizes.
Colors
We used Stark app to evaluate and improve the contrast while considering different color blindness conditions.
Icons
We recreated the icons for a unified visual language.
Buttons, selections & text inputs
We tried to visually give feedback to the user with different states.
Redesign
Home page
We simplified the overall look and content, organized content by hierarchy, and added an interactive map to highlight centres and their locations.
Centres page
We added filters and an interactive map to help users find the relevant centre faster and more efficiently.
Specific centre page
We highlighted the booking CTA and carried important information to the top. We embedded the booking process in the same page.
Events page
We added images, price, date, place and a short description for events, plus filters so users can find relevant events. We improved the single event page.
Summercamps page
We renamed and restructured this page for clarity, creating a clear hierarchy and making available options very clear.
New features
Personal profile
A profile where users can check upcoming and past bookings and manage personal data, with a review system for past bookings.
Routes page
Inspired by Spor Istanbul, sport route suggestions around Milan catered to users' physical activity preferences.
Summary
For each task we significantly reduced the number of clicks and pages visited, simplifying the navigation flow.
Accessibility
We tested our prototype considering different types of color blindness conditions using the Stark app.
Prototype
Reflection
Milanosport taught us the value of rigorous diagnosis before jumping to solutions. The heuristic evaluation and cognitive walkthroughs weren't just academic exercises — they gave us a shared, evidence-based language to talk about what was broken and why. When you can show a stakeholder that booking a sports session takes 16 steps and should take 9, the case for redesign practically makes itself.
The competitor analysis was also a turning point. Mapping how Airbnb and Trainline handle complex booking flows — and understanding exactly why they feel effortless — sharpened our eye for the difference between a UI that looks clean and one that actually thinks about the user's mental load. That distinction now shapes how we approach every UX project.
If we were to continue this work, we'd want to run usability testing with real Milanosport users — particularly older adults and people with disabilities, who are most affected by accessibility gaps — and iterate on the prototype based on their feedback.
Credits
Professors: Roberto Dadda, Paolo Negri
Team: Duru Erdem, Alessandra Sgariglia, Yaren Yavuz