Context.
LaComu is a Barcelona platform, winner of the 2026 Princess of Girona Social Award, that connects neighbours, organisations and the administration on a map of the neighbourhood. The team already had the app working; they asked me to improve the design of the public side and the mobile experience ahead of a meeting with management. I worked on a copy of their frontend and delivered the changes to their repository through pull requests.
My role: front-end design and development of the improvement, from audit to delivery. Duration: October 2026.
Fixed limits: the three-node logo, the brand green, the copy and the routes stay untouched. The project belongs to LaComu: I do not publish their code and this page only covers my contribution.
The problem.
The public pages and the app shared one shell, the brand barely showed and there were 39 accessibility failures. On mobile, the map and the lists were hard to use.
What I decided, and why.
01
Separate the public pages from the app
- problem
- Home, About and Contact were shown inside the app, with its sidebar and bottom bar. It looked like a single product with no face of its own.
- decision
- A public layer with its own header and footer. The routes stay the same, so no link breaks.
02
The brand as structure, not decoration
- problem
- Sections of identical cards; the logo and the green said nothing.
- decision
- A floating header, a hero in the brand green and a neighbourhood scene that, as you scroll, joins neighbours, organisations and the administration with the exact stroke of the logo and turns into it. Thirteen brand illustrations, one per idea, instead of generic icons.
- why
- The logo already says «connected community»; the scene tells it instead of repeating it.
- technical detail
- GSAP with ScrollTrigger: the animation is pinned on desktop and tied to the finger on mobile, without pinning, so it does not fight the scroll. With «reduce motion» everything stays static.
- review
- The team saw that the scene got lost against the background in light and dark. I put it on its own light-green card, the same in both themes, and along the way I found and fixed that the threads were not being painted.
03
Accessibility: from 39 failures to 0
- problem
- 39 failures across 158 elements: low contrast, buttons that only appeared on mouse hover, small touch targets and pages that overflowed the screen on mobile.
- decision
- A skip-to-content link, a single main region per page, AA contrast in light and dark, 44 px touch targets and each card title as a real link.
- how I checked
- axe with Playwright (WCAG 2.2 AA) at 390 and 1440 px, in light and dark, before and after.
04
The app, comfortable on mobile
- problem
- Each activity took almost a whole screen and the map had three panels on top of it.
- decision
- Activities in compact rows (about 5 per screen instead of fewer than 2), 44 px filters, a single bar over the map with a layers panel, and the logo as the way back to the home page.
05
Delivering it properly
- Four chained branches (accessibility, home page, About and Contact, mobile app) so each review stayed small.
- Typecheck, build and lint with no errors, and 3,692 tests passing on every branch.
- All new copy in the 6 languages of the platform (Catalan, Valencian, Spanish, English, Galician and Basque).
- A before-and-after video and a presentation for the meeting.
Screenshots.
01 · Separate the public pages from the app
02 · The brand as structure, not decoration
03 · Accessibility: from 39 failures to 0
04 · The app, comfortable on mobile
Result.
- 0 accessibility failures across 7 pages (before: 39).
- 5 activities per screen on mobile (before: fewer than 2).
- 1 bar over the map (before: 3 panels).
- Changes merged into their repository and deployed in their test environment.
- Next phase under discussion: the map navigation flow and the directory.
What I learned.
- Redesigning without being able to touch the logo, colours or copy forces you to work on structure, rhythm and motion.
- Splitting the work into small pull requests let the team review it without fear.