Student Roost Website Design

A user-first digital experience connecting UK students with accommodation.
From discovery through to build, test and continued conversion optimisation for the Student Roost website.

Role: Designer at Nzime

Overview

Student Roost is one of the UK’s largest purpose-built student accommodation providers. After working with them since 2018, they had outgrown their old website – they needed to build a new site from the ground up to help students find, compare and choose their home for university life. The goal was a truly user-centred experience that simplified decision-making across devices.

Research & Discovery

While being very familiar with Student Roost’s brand and audience, I didn’t want to make any assumptions – a user-driven research phase allowed me to challenge bias and ensure I was creating an experience that delivered on the audience needs.

I led research strategy that spanned across two different user types – resident and non-resident.

Current and Prospective Students – non residents

1. Facilitated online focus groups

I facilitated focus groups for each of Student Roost’s personas: sixth form, first years, second years, postgraduates and parents. The participants were not residents at Student Roost or had engaged with them in the past – meaning results would be unbiased. These sessions involved digital whiteboarding via Miro, where I asked participants to explain or diagram their ideal experience when looking for accommodation online.

2. Online usability testing

I also conducted usability testing via online recruitment platforms. In these remote usability tests, participants completed real tasks on the existing Student Roost website while narrating their experience. This uncovered usability blockers, and helped prioritise features based on real user behaviour.

Student Roost residents

Holding in-person workshops at Student Roost properties with current residents, including participants from all year groups.

1. Focus Groups

This was a diverse group who brought a lot of informed opinions on their experiences as a Student Roost resident. These sessions were a more open forum, allowing more contextual feedback around the website and booking experience that we may not have gained from the focus groups.

2. User Surveys

I also created user surveys sent to current residents. Deliberately keeping these brief and direct, but also allowing students to elaborate if they wanted to give any further information on their experience with the current Student Roost website.

Scoping

All research was collated and documented for Student Roost to review. Further in-person discussions and workshops with the Student Roost team helped to identify our success metrics, and project scope, alongside the results and recommendations from the research and discovery phase.

We conducted MOSCOW analysis to consider which requirements were going to be part of the initial website launch. This would inform the technical scope and allow me to begin the design phase.

Design

Sitemap & Wireframes

Using insight from the discovery phase, and considering content migration from their existing site, I created an initial sitemap before moving into a full wireframe stage that allowed Student Roost to prototype any new functionality created.

The wireframes were split into:

Bespoke page templates
Page builder library
High value pages that utilised page builder
Integration with booking system

Wireframing allowed me and the client to prototype and test new functionality in the site, ensuring confidence that it met the requirements from the users and the project scope.

Interactive map view that included filters for nearby amenities

This feature addressed a common user need from the research phase from students who needed to know what was close to properties, such as uni campus, transport links, nightlife and shops.

Categories to include were decided based on which were more commonly brought up across all user groups.

The map view also integrates directly into property links, to ensure a smooth user experience.

Advanced Filtering

One of the main concerns to come from the research phase was narrowing searches. I created a thorough filtering function that took into account some of the key criteria students needed to search, and what differentiated results

The main filters displayed sitewide included

Room type
Price
University

Further filters hidden behind a ‘more’ option included

Facilities
Tenancy length
Occupancy
Accessible rooms

Favouriting and Comparison Tools

This was a requirement from the Student Roost team that they had brought to us based on feedback from students. This sticky comparison tool is helpful for students who may be looking between cities, or are looking to compare room criteria across properties.

While the favouriting allowed students to create a shortlist of their favourites they could revisit during the comparison phase of their journey. It also allowed Student Roost to gain valuable data capture for their teams to follow up.

Categorised and Searchable Help Centre

A feature I recommended was an alternative approach to ‘help’ based information. Previously this has resided in FAQs with no real grouping or categorisation.

I designed an area that could house more rich information (utilising the page builder), and can also provide better results in search engines including AI engines, where students are more commonly turning to for advice.

Modular authoring experience

Utilising a page builder model created a more flexible authoring approach for Student Roost through Craft 5.

I outlined a full library of page builder blocks that would allow them to create their own pages, including more targeted campaign landing pages.

I also created several variations of blocks, using colour and layout changes to keep the designs engaging but still on-brand.

Accessibility

The UI Design stage allowed me to refine a more ‘digital’ friendly colour palette that complied with WCAG 2.2 standards.

Accessibility was at the forefront of the requirements for the client, but also was discussed during in-person focus groups.

This led to adding in three different ‘modes’ to the website – light, dark and calm. Calm mode is a more muted palette that is favourable for those who need less visual noise and digital anxiety.

Animations and Interaction Design

Heavy animations and motion within the interaction design was deliberately kept to a minimum on the site.

Aside from heroes, I intentionally designed most videos to only autoplay when hovered over. I also kept hover effects more subtle on desktop.

Mobile interaction design was created with familiar patterns in mind, using a ‘drawer’ style approach when opening overlays.

Testing & QA

Testing phase involves all arms of the team who worked on the project, documenting any snags or missing elements that need to be resolved before hand-off for client testing.

I also reached out to early focus groups to test prototypes once they had reached a more high-fidelity stage – this feedback helped refine designs before hand-off to development.

Results & continued work

After a year, the Student Roost website has continued to have a high engagement and conversion rate.
The site has become more discoverable through AI search engines, which was a primary success metric from the discovery process.
Utilising Hotjar surveys allows us to monitor any ongoing web issues and collate feedback.

I continue work on the Student Roost website, with ongoing work aiming to improve discoverability, engagement and conversion rate. Plus supporting them with campaign landing pages, and seasonal content.

View the Student Roost website