Making Social Housing Inclusive
Wolverhampton Homes came to Prodo with the clear mission of redesign their outdated website which was excluding many of their tenants from essential social housing services.
This case study shows how I turned a clunky and unfriendly website into an inclusive platform that serves every tenant regardless of their ability or digital confidence.
Role
Lead UI/UX Designer
UX Researcher
Accessibility Expert
Company
Wolverhampton Homes
Industry
Social Housing
Platform
Website
About this project
Wolverhampton Homes is the main manager of council-owned social housing in Wolverhampton. They manage thousands of council-owned properties and serve a very diverse community from different demographics and backgrounds.
Their existing website had become a barrier to accessing essential housing services, with outdated navigation, critical accessibility failures, and a desktop-first design that ignored their predominantly mobile user base.
They reached out to Prodo, the sector-leading social housing digital transformation agency, asking for help. As the Lead Designer and Accessibility Expert at Prodo, I led this 8-month transformation ✨
What users see when they land on the mobile version of the website: there are many issues such as the scale of the alert banner, insufficient colour contrast, missing ARIA labels (and much more)
Team Structure
The team consisted on me, the Lead Designer & Accessibility Expert, one of our Product Managers, the Engineering Team which had one front end and one back end developer & QA.
As the only designer on this project, I owned the entire design process from research through to delivery. This end-to-end ownership allowed me to maintain design consistency and accessibility standards throughout the entire process, whilst working collaboratively with the PM and engineering team.
The Challenge
Wolverhampton Homes operates social housing services on behalf of Wolverhampton Council and serves 24,000 diverse tenants with several different needs.
Despite 63% of tenants visiting the website regularly, satisfaction averaged just 3.6/5, which revealed a critical gap between service quality and digital experience. 30.7% of tenants avoided the digital platform entirely, creating dependency on phone support for housing services that should be accessible online.
85%
mobile users stuck
The majority of mobile users got trapped by the website’s desktop-first design.
Circular
navigation loops
Poor UX was preventing important common task completion like paying their rent.
Critical
accessibility failures
Lack of accessible considerations was excluding tenants with disabilities.
53.3% needed easier repair reporting
Tenants needed a more efficient way to raise repairs - at the moment they were struggling to find the information and were forced to call the support team.
Outdated UI
Beyond these functional issues, Wolverhampton Homes also wanted to refresh the website's visual identity to make it more engaging and modern as they felt their current website was cold, corporate and uninviting:
Wolverhampton Home’s website - desktop and mobile versions
Why does this matter?
For a social housing provider, every excluded tenant represents a failure to serve vulnerable communities who depend on these essential services.
I was tasked with solving this crisis that had a real life impact for both tenants and Wolverhampton Homes.
Discovery
Taking on both the research and design roles meant I needed to build a complete picture of what tenants were actually experiencing.
I had a few weeks to gather information which was helpful to set up a plan but I was also the only designer and researcher so I had to be as efficient as I could. I ultimately decided to combine different research methods to gather both qualitative and quantitative data and used AI to help spot patterns.
Typeform Survey
I started by creating a Typeform survey to gather feedback from the residents and Wolverhampton Homes staff. For residents, I focused on their experience using the website and on accessibility barriers and for the staff I focused on operational struggles and how they used the website as a business.
Tenant input
The survey reached 425 respondents (97.4% tenants) and revealed critical insights about satisfaction levels (3.6/5), device usage (80.6% mobile), and priority needs (53.3% wanted easier repairs). The open-ended responses provided a good understanding on their frustrations, barriers, and communication preferences that helped me shape my design decisions.
Stakeholders input
The staff feedback validated that the website was inefficient and was creating unnecessary workload, with many tenants reaching out via phone to ask for help with tasks that should be simple self-service journeys.
Google Analytics
I analysed a full year of behaviour data (July 2024 - July 2025) covering 24,000 users across 167,000 page views and 50,000 sessions. This analysis revealed consistent patterns in how tenants were actually using the site versus how we expected them to.
Some of the key behavioural insights were:
Mobile-desktop divide
The data showed 85.5% mobile traffic but significantly lower engagement times on mobile devices
Homepage engagement
32,249 views but only 17-second average engagement, indicated possible confusion
Repairs bottleneck
29,607 repair page views but low completion rates, were forcing tenants to call instead
High Contact Us Traffic
13,318 Contact Us page visits indicated users couldn't find information through normal navigation
Search failures
30% of searches returned zero relevant results, leading to task abandonment
Top visited pages
Stakeholder Workshops
I had the chance to speak directly to both Wolverhampton Homes' staff and a few tenants which was crucial for understand things that couldn't be captured in the survey. This allowed me to ask follow-up questions, dive deeper into specific pain points, see firsthand how different people interacted with the current site and show them some other housing associations websites.
These workshops helped me validate what I was seeing in the survey data and analytics and helped us prioritise which features would have the biggest impact.
Censoring our attendants to protect their anonymity 😃
“The website needs clearer content, search and navigation. The design could also be tidier and more accessible, specially on mobile.”
- Wolverhampton Homes Resident
Accessibility Audit
Part of my research was conducting a WCAG 2.1 AA audit using both manual testing and automated tools (IBM, WAVE and Lighthouse) to understand where the current site was failing users with disabilities.
During my testing I checked things like screen reader navigation, keyboard-only navigation, colour contrast analysis and cognitive load assessment.
I was particularly looking for the violations that are most common in the social housing sector: insufficient contrast ratios, missing or poor focus indicators, broken heading hierarchies, and touch targets below the 44px minimum.
The audit revealed critical barriers that were preventing vulnerable tenants from accessing essential services, giving me a clearer and complete picture of what I needed to address in the redesign.
Manual Testing on the menu and search, two of the most problematic areas and Wave testing on the homepage 🚨
Competitor Analysis
I always look at other housing associations as part of my research, not only for inspiration but also to look at industry best practices and see what our clients might be missing in their offerings.
Some of the things that stood out to me that competitors had and Wolverhampton Homes lacked were a clean visual hierarchy, much more mobile friendly layouts, clear service categorisations and an overall accessible website. These gaps directly informed my design strategy moving forward.
This was one of the competitor websites that most tenants preferred during our sessions
Me 🤝 Claude
Because of the sheer amount of information I gathered during research, specially the survey responses and accessibility reports, I decided to use Claude to help me identify themes and patterns that I might have missed otherwise.
This was a time saver, to say the least.
Claude helped me quickly identifying recurring issues around technology literacy, circular navigation complaints and many other issues that would have taken me weeks to do on my own.
I did personally validate all the insights to make sure everything made sense and verified the sources which was the only slightly time consuming part of this process but it was definitely worth it for the overall time saved in the end.
Claude and I in the trenches
All research methods pointed to the same critical issues: navigation complexity, mobile experience failure, accessibility barriers and inadequate repair reporting systems.
Sitemap &
Information Architecture
The current website’s content had evolved organically over time which created duplicated content, deeply nested sections and unclear user journeys.
Using all the insights from research, workshops, analytics, and tenant feedback, I redesigned the sitemap and information architecture of the website’s key pages to simplify the navigation and prioritise what tenants really needed.
Sitemap
After the discovery phase, I created a new sitemap to map out how content, services, and user journeys should be organised across the website. This helped me simplify a structure that had grown organically over time and gave a clear view of how users navigate key areas of the website.
The new sitemap was designed to make key tasks such as home management, property search, help & support and contact channels more visible and accessible, to ensure users could reach these key actions in fewer steps.
This sitemap focuses on key services and pages rather than showing users every single page available. I’ve also limited third level pages to the absolute minimum and only when they are strictly necessary
Information Architecture
Once the sitemap was approved, I moved on to the top level pages’ information architecture. To define the structure on these pages, I grouped the content based on the research themes I found during research and prioritised high level tasks based on the analytics and user journeys based on what tenants naturally search for an navigate to.
The goal was to improve discoverability and reduce overall cognitive loads for users.
My Home is one of the most important sections on the website: it’s where tenants can go to manage their homes, pay rent or raise repairs
Validation & Next Steps
Once the sitemap and IA were created, I had a review session with the project’s stakeholders. Because these redesigns were based in evidence from the research the approval happened quickly with minimal revisions which allowed me to quickly move to the next step.
This stage created the foundation for everything that followed and really helped reducing uncertainty during design, ensuring that we were solving the right problems.
Wireframes
After the sitemap and IA were approved, I moved into wireframing to establish information hierarchy and test whether layouts would work for tenants. This phase was critical to validate if tenants could quickly find priority actions and that the content hierarchy felt intuitive before investing time in visual exploration.
The research directly informed every wireframe decision. The low homepage engagement (17 seconds) made me prioritise clear service categorisation above the fold, mobile dominance (85.5%!) required mobile-first layouts, and accessibility requirements (proper structure, 44px touch targets, clear hierarchy) had to be priorities from the start.
I started with the homepage and wireframed the first-level pages. I used Figma wireframing libraries to speed up iteration and experimented with Figma's Make (Figma’s AI feature) to explore alternative layouts, evaluating each against tenant research insights which saved me precious time because I didn’t have to wireframe every single option.
The final homepage wireframe layout on desktop and mobile
Validation
I tested wireframes with tenants from earlier workshops (walking through repair reporting, finding contact information, accessing accounts) and stakeholder review calls. This validation confirmed layouts worked and surfaced small adjustments, like rewording button labels for clarity, before moving into the visual concepts.
Exploring the Visual Direction
Wolverhampton Homes asked for three visual concepts to explore different options whilst staying on-brand. Each concept tested different emotional tones and levels of ambition, all grounded in the same research findings, WCAG 2.1 AA standards, user demographics, and brand identity.
I designed only the homepage initially (desktop and mobile) to validate the hierarchy and navigation before scaling the full system. Although visually different, all three concepts had to work responsively with mobile-first priority, improve discoverability of key services (repairs, contact, account access), maintain accessibility standards, feel trustworthy for vulnerable tenants, and respect the established brand identity.
Wolverhampton Logo, Font and colour palette - their brand guidelines were quite basic which was actually great because it allowed me a bit more freedom
Concept A
Conservative Approach
This was the safe option which was closer to the existing website. Blue and yellow were used sparingly with traditional layouts and restrained hierarchy, focusing on familiarity for long-term users.
Concept B
Medium Direction
On this one, I introduced a stronger visual identity with more confident use of the yellow brand colour and better contrast. This balanced familiarity with a more modern feel.
Concept C
Bold & Modern
This was the most progressive direction with a more expressive use of brand colours, contemporary layouts, and bolder imagery. It also had dynamic hover interactions: the hero banner and service tiles underneath moved on hover, adding personality and energy.
The conservative, medium and bold options
Stakeholder Feedback
Stakeholders preferred the second option because they felt like it was more welcoming, human, and introduced stronger personality, but they also like some of the bolder elements of the third option so I kept this in mind when developing the rest of the website. They really wanted the website to feel modern and approachable rather than institutional, which is rare in social housing.
One thing that really stood out during our conversations was how much they loved the sun pattern that is part of their logo. Stakeholders loved it so much that they were planning on evolving it into their future brand guidelines, proving you can innovate within existing constraints.
This was all ✨ very exciting! ✨
Final UI & Design System: Building a Scalable Foundation
Once the homepage direction was approved, I rolled out the design across the full website.
This phase covered everything: from core templates (landing pages, service pages, repair journeys), navigation systems, search patterns, responsive layouts, and reusable content components. Every element needed to work across devices whilst staying accessible and consistent.
Building the System
I started by creating reusable UI components and patterns with consistent rules. This meant new pages could be built from existing components, engineering had documentation to work from, and future updates could happen at the component level which would create less design debt, make implementation faster and QA easier.
Using AI to Build Faster
To speed things up, after creating the base components, I used Figma Make to help me quickly generate all the states (hover, active, disabled, focus) whilst keeping my specs intact. It also helped me handling component organisation and flagged accessibility issues such as colour contrast ratios, ensuring I was adhering to WCAG principles throughout and allowing me to focus on design decisions whilst AI handled the repetitive work.
Some of the new website’s base components
Solving Navigation Complexity
Tenants complained about going "round in circles," 4-5 levels deep navigation, and getting lost when scrolling (non-sticky menus).
To solve the issue I re-categorised and reduce the IA to only the most visited/important pages and made the navigation sticky.
Upgrading the Mobile Experience
The website was desktop-first but it had 85.5% mobile traffic which translated to poor touch targets, excessive scrolling, and broken layouts.
To solve this I took a mobile first approach, keeping accessible touch targets in mind and using thumb friendly layouts with elements like full width buttons.
All layouts are now responsive on all devices and breakpoints making it more inclusive for everyone.
Accessibility First
During my audit, I found critical WCAG violations which included things like insufficient colour contrast, missing ARIA labels, content outside landmarks, and poor keyboard navigation. One of my main goals was to solve these barriers to make the platform more inclusive.
The new website follows the principles of minimum contrast ratios, uses proper semantic structure, shows clear focus states, includes ARIA labels on all interactive components, uses a minimum of 16px body text with clear hierarchy and readability and a consistent interaction behaviour to help reduce users’s cognitive load.
Making the Homepage work for tenants
The homepage was the main entry point with a high number of visits, but very low engagement. Many tenant’s also expressed that they didn’t find it helpful and struggled to find what they needed.
To solve this issue, I redesigned around what tenants actually needed. Research showed repairs (53.2% requested this), rent payment, and contact info were top priorities, so these became the hero actions. I framed it as "What would you like to do today?" making services feel like tasks, not confusing departments.
I showed 4 primary services upfront, secondary options below, so tenants didn’t get overwhelmed. The visual hierarchy came from size, colour, and spacing working together and the usage of real tenant imagery with diverse representation made it feel human and welcoming, not institutional and boriiiiing.
Next Steps
Improving the repairs experience
Although the repairs page had thousands of visits, it also showed poor completion, forcing tenants to call instead. The survey showed 53.2% of tenants wanted easier repair reporting.
Repair reporting was a functionality that was part of the SaaS Product which is also a Prodo platform - the report’s page simply give users more information before they are directed to the portal. For this reason, this improvement was part of a separate improvement.
I still re-categorised the menu so it was easier for users to find the page and added repairs as a quick actions to the homepage to help discoverability.
Metrics
This is an ongoing project that will be released soon, for this reason I don’t have metrics to show just yet, but stay tuned!
What did I make of this project?
This was one of those project that remind me of why I became a designer in the first place. Speaking directly to real people who rely on these services for their homes, safety and daily lives, made this really meaningful to me.
Many groups of people like the elderly, those who find tech hard, or people with accessibility needs, face real barriers when websites are poorly designed. Building sites with everyone in mind, specially vulnerable tenants, can help someone get their heating fixed sooner or spare an older tenant the hassle of a confusing site, so every design choice matters.
Hearing the excitement from stakeholders after seeing the designs truly made my day - I can’t wait to see the impact the new website had in both the tenant’s and WH’s staff.
