Sven Uilhoorn

Interaction- and Game Designer based in Groningen, the Netherlands
Back to homepage Screenshots of different page types of the Student Housing & Insurance Company websites, both mobile and desktop

Websites Student Housing & Insurance

Two websites aimed at very different demographics. The housing site serves housing for students and starters. The insurance site provides financial services and insurance aimed at medium income households.

Where the housing website aims to provide as much service as possible up front without sign-up, the financial/insurance website mostly focuses on making a personal appointment and providing documents.

The currently live website is no longer my work, but still strongly resembles a lot of the design decisions I made. I managed/updated the then final product for 3+ years after it went live.

Roles and Responsibilities

I was responsible for the entire project;

  • client interview
  • user interviews and observation sessions
  • interaction- and visual design
  • development of custom Wordpress theme
  • customization of Wordpress back-end
  • user manual and after care

Final Product

Three screenshots of pages. The left one shows a page with text about the company and the rent process. The middle one shows the homepage with housing listings, a search filter on the left and a newsletters sign-up and link to already rented housing objects at the right of the page. The most right page shows the contact page with a map and contact form.

Homepage (center) shows available housing, an about page (left) with the most essential content and a contact page (right).

Again three screenshots of pages. The left shows the smartphone version with contact details and a form to file housing complaints. The middle page shows the details of an housing object, with pictures of it in the center, the location in a map and details in tables. The right page shows the bottom of a details page, with a form to request an appointment to visit the housing object.

Separate smartphone website (left) and details page of a housing object; the choice for a separate smartphone website is based on user research and interviews. All of the 15 interviewed users preferred checking out student housing on tablets and laptops to get a decent view of the pictures.

The financial services website looks pretty similar, but was a lot more simple in content. Therefore this page focuses on the housing website.

Process and Methods

I used this project to try and build a method that focusses on keeping the user involved as much as possible without the "big money" approach of eye-tracking, A/B testing and so on.

I set up a plan including the following stages:

  • client interview
  • user interviews & competitor observation sessions
  • designing wireframes
  • wireframe testing with users
  • designing style tiles
  • development and release
  • final user testing
  • polish and after care

A sketch showing writings of interview results, requirements based on those and a wireframe of the eventual design.

Left: one of 20 pages of observation and interview results. Right: the requirements based on those interviews. Middle: one of four design sketches.

The first polished wireframes in gray and white. Five different page designs including a separate smartphone screen are shown here.

First prototype: one site that handled both companies. Everything was designed minimalistic. User testing showed it was too minimalistic.

This image shows some of the screens from the wireframe with written comments detailing necessary improvements.

Processing the testing results, which resulted in the single site being split into separate sites for student housing and financial services.

A selection of style guides. Each one has the same layout; a page that contains all elements from all the different pages from the wireframes. The colors of backgrounds, links and the fonts differ.

The style tiles. The client chose the centered one. Big and small adjustments were made based on theory and two mid development user testing sessions.

Toughest Challenge

Building the custom theme. Back then, I was new to Wordpress. Especially the PHP of showing the images and the search form were quite tricky for me as I mostly didn't want to rely on plugins.

Looking into answers at StackOverflow helped me out a lot, but most of the solutions I had to figure out myself. The search form is the only plugin I bought when I couldn't get it to work after a week of trying.

In terms of design the most difficult task was to make sure all the characteristics of a room would fit within the lay-out and still be easy to scan, without comprimising space for pictures and a map.

What I'd do Differently

Spend more time on typography and the grid layout. These are key elements in generating trust amongst users, something I valued highly in both the prototype testing sessions and the testing of the final product.

Although some test participants were divided about trusting the website/company, they claimed it was more about not being familiar with the company name rather than a design issue.

Tools Used

  • Word: documentation, client manual (all as .pdf)
  • Trello: checklist and project planning
  • Illustrator: wireframes & style tiles
  • Notepad++ & Dreamweaver: custom theme development
  • Xampp: local hosting
  • Wordpress: CMS + plugins (Advanced Custom Fields/Arconix shortcodes/Search & Filter Pro)

Back to homepage

More Projects Like This

Squadroddels 2017-2018
Three magazines for student squash club
Cosy Racing Community
Forum and website for international sim racing community
Card Race Series
Simultaneous action forum card game, play as a race car driver
Gibu Bestratingen
Website for paving company showing projects and expertise