Bostadsförmedlingen REdesign – A better way to find your new home.

Overview

What type of product

Bostadsförmedlingen Stockholm mediates available rental apartments in the Stockholm region. In 2022, they brokered approximately 20,751 apartments. As a result, around 41,000 people got a new home through their service. They work with over 200 property owners, both private and municipal.

The problems

1. The need to simplify and clean up the standard apartment pages to be easier to scan and to have an better overview. Also to make it clear how the process for applying for an apartment is done.
Even if there are some limitations in the systems that hold the information on this pages we need to clearify, change and update as far we can as possible. Also some new functionality is needed for making a lot of information scalable but still easy and user friendly.

2. The new production apartments which is a part of it self also need changes as well. Also try to align the standard apartment pages with new production to be similar even though they have some differences in content.

3. Mobile need a much needed cleanup to be fully responsible. Most users are on mobile and this is crucial to work smoothly.

The solution

1. Break down the entire standard page and create and evaluate different test such as A/B tests, card sorting and surveys. Look on every part to see how we can redesign and improve functionality. Create wireframes and components with examples to show the team and the evaluate. Make every part fit together as a whole. Make responsive design and create wireframes and prototypes for both desktop, iPad and mobile.
2. Now when we have components for standard apartment pages we can reuse them and adapt them to new production pages as well. What a timesaver! As we work our designsystem grows.
And here we use the same process to break down the parts of the page and creating new wireframes and prototypes to show the team and make a decision together.
3. In the above two parts mobile view was made mobile-first and prioritized. In the mobile view we wanted to create a much better experience because majority of the users are on mobile.

My tasks

– The breakdown
– Create card sorting for the teams
– Create A/B test for the target audiences
– Use of HotJar tool for gathering insights
– Showcase the result to the teams
– Create wireframes
– Create prototypes for a realistic movement of the page
– Create presentations of all above and gather feedback of which version is most enjoyable.
– New presentation for the teams with the results
– Final version is set and now ready for production.
– Handover to devteam where I go through the entire project again and to showcase the latest changes and the final version.

Project details

Client

Bostadsförmedlingen Stockholm

Year

2023/2024

Category

Product design, Service design

Services

UX, UI, Research, Visual Design, Wireframes, Prototypes, Presentations, Handover

Analysis of current website


After collecting the data available such as CSAT (Customer Satisfaction Score) or in Swedish NKI(Nöjd-kund-index) which is measured every year, I could find valuable information and insights to bring with me. This together with analyzing the existing website and all user stories collected, it’s time to make the breakdown. In this step I like to have the overview over the entire page as a whole but also to isolate each part of the page here to focus on in detail.

The existing website that we want to make improvements on.
As you may see, it needs an upgrade.

User stories collection. I like to have a structure and make things organized. Much more efficient and important to have a good overview.

With existing qualitative and quantitative data we now know that the research and the user stories we created is a list of task to be solved. Here are some of them:

Users do not really understand the process for renting an apartment, for example if a requirement is not fulfilled.
Mobile view needs improvements
A lot of scrolling
Acceasbility guidelines(wcag) is not implemented
Hierarchy and logical order needs a lift

Their old website had difficulty conveying the value and offer in a simple way to the user. How can we create so that Bostadsförmedlingen conveys their value to the user in a simple way and improve the overall experience of the service?

Clearer communication
Clarify value and steps for the user through the website in a personal but professional manner.
Simplicity and pedagogy
Guide the user to use Bostadsförmedlingen in a simple, concrete and educational way.
Modernize interface
Create a modernized and inclusive user interface for the website.

The research


After analyzing, collected data and got a pretty good image of what needs to be done, I made some research. I made a competitive research looking at others in the same business, both in Sweden but also abroad to look for something new and to get inspired. A moodboard was created. So much fun to gather inspiration and the mind starts to expand and spin.

Moodboard – Collection of inspiration

Testing different approaches, visuals, icons and more

Example of breakdown


Here different people was invited to figma, both from inside the company but also som testers from outside to sort and arrange the content as they logically want to have it. Comments in text and Figma’s comment system comes very handy here.

Another part of redesigning – The apartment info box


The infobox now

The problem here is that feedback says that this not easily eye scanned and also not visual. The color of the background feels boring. The fontsize is hard to read for some people.

Some of the variations created visible above. Grouped into sections to divide as sections and to be easier to scan over. Also set as as tags. Different border-radius, fill and stroke variations. Also different break row systems(fill row or break on each tag). The mission here is to accomplish: Easy overview, mobile friendly, WCAG approved and to add asterisk for longer tags with the reason to fit. The variations was of course tested and voted and the final version was decided.

The developing


During the entire project I always had a dialogue with the developers. This makes them included as well as brainstorming limitations that could be a problem later on. I also like to have a nice handover with the dev team. After we are approved of the final versions of the designs, I like to have a presentation with the dev, projectmanager and sometimes more involved members or teams. Here we usually go through all the aspect of the design, activated dev mode in Figma to make sure devs are on track with everything and can ask questions and so on. This meeting is often much appreciated from the teams.

Presentation for the teams

Focus on devteam for handover

Created a guide for members in dev to understand Figma in devmode

Components – Building up a designsystem from scratch


In this company I started out from scratch with creating components and as it grew for each task I created a designssystem. For every task and every new component we are saving time next time we are creating something. I like to make my components smart and to be adjustable and adaptable to be used in different ways and context.

Part of the designsystem I created.

Example of a component with variations. This makes it really easy to switch variation directly inside the design where used.

My takeaways


This was a really exciting and challenging project.
We worked closely with both project owners and developers to create something that both works to implement and that would be as user-friendly as possible. This was a really good experience for me because I think I have grown even more in my role as a UI/UX Designer and developed an even better communication and understanding for other teams and people in the project.
What I wanted to do better in this project but there was no budget for is to do better tests where we focused on doing interviews in real life and also giving user tasks to do while monitored. This to have different analysis methods to empathize even more with the users who will use Bostadförmedlingens service.

If I were to continue working on the project, I would likely work on the following items to improve the user experience.

Interview users to get feedback on the entire service experience

– Work more with creating a more visual experience with graphics, icons and illustrations.

– Continue to suggest improvements to the design based on data, research and ensure it continues to align with the WCAG 2.1 AA criteria.

– I would like to deep dive into the user experience of ”my pages”. This is when users are logged in to the service and can see all their apartments they have applied for together with settings and uploading documents to fulfill the criterias. This is a big job but it would be so much fun grabbing this task.