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
Homepage (center) shows available housing, an about page (left) with the most essential content and a contact page (right).
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
Left: one of 20 pages of observation and interview results. Right: the requirements based on those interviews. Middle: one of four design sketches.
First prototype: one site that handled both companies. Everything was designed minimalistic. User testing showed it was too minimalistic.
Processing the testing results, which resulted in the single site being split into separate sites for student housing and financial services.
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)