[wpseo_breadcrumb]

Rooming

Online woning verhuur platform Rooming vervangt de makelaar en zet social media in als verificatiemiddel voor betrouwbare huurders en verhuurders. Rooming, verhuren met een gezicht!

Design Challenge

Hoe kunnen we het Rooming platform dat uit 2013 stamt updaten naar een 2020+ versie waarin user experience en hoogwaardig design voorop staat?

My roleUX Designer, Voice actor, Graphic Designer, Marketeer, Business innovation, UX research, wireframing, Visual Interface Design, Managing development team
ClientB. van Baal | Rooming.nl
Used toolsAdobe XD, HTML5/CSS3, Illustrator, Codepen, After Effects, Lottie.js
TagsUX/UI, Marketing, Design, Business
Time periodMARCH 2019 – NOW

Rolverdeling

Omdat Rooming een groot project is waarin ik in meerdere disciplines heb gewerkt zal ik er één uitlichten; in dit gedeelte ga ik in op het UX/UI design dat door mij gedaan is voor Rooming. Voor elke pagina is er rekening gehouden met design trends, inspiratie opgedaan op dribbble/behance (platforms waarop de beste designers uit de wereld hun werk delen), veel overleg geweest met frontend en backend developers over wat wel en niet haalbaar is en rekening gehouden met zowel de Business goals van het bedrijf (meer omzet genereren, sales) en de wensen van de klant (gemakkelijk een woning kunnen vinden).

Mijn taken waren niet beperkt tot UX/UI design. Bij Rooming heb ik mij ook met adverteren, toekomstvisie voor het bedrijf en adviseren bezig gehouden. Ik werkte nauw samen met de eigenaar van het platform waardoor we veel sparsessies hebben gehouden om zo tot betere ideeën te komen om het platform naar een hoger niveau te tillen.

Het team

Rooming is een kleine start-up, ik werk nauw samen met de eigenaar; Boy, front-end developer Sander en backend developer Dylan. Ik was in mijn eentje verantwoordelijk voor het uitwerken van designs, concepten en plannen. Boy kwam af en toe met schetsen bij mij en voorzag mij van feedback en begeleiding. Hij gaf dan vooral feedback of hij de business goals genoeg behaald vond per pagina aan de hand van wat ik hem liet zien. Ik had zelf de verantwoordelijkheid om mijn designs aan te laten sluiten bij de user needs van de eindgebruiker.

Analyse

De eerste stap als ik iets ga ontwerpen is analyseren van bestaande designs en het doornemen van de feiten en data.

Vanuit Hotjar & Google analytics bleek dat de woning aanmeld flow grote fouten hadden; gebruikers konden bijvoorbeeld geen foto’s uploaden. Zij werden dan door een fout in de code teruggezet naar een verkeerde pagina. Daarnaast waren formulieren horizontaal opgebouwd wat niet optimaal is voor mensen die een formulier moeten gaan invullen. Hierdoor heb je namelijk een dubbele kijkrichting (top-down & left-right). Dit neem ik mee bij het opnieuw ontwerpen van de flow.

Voorbeeld van een Hotjar Analyse Heatmap

Hier boven staan voorbeelden van hoe een Hotjar Heatmap er uit ziet. Deze gegevens worden o.a. door mij gebruikt bij het analyseren van een bestaande website of webapp. Daarnaast ben ik in gesprek met eindgebruikers. Bij Rooming zijn dat zowel woning plaatsers als potentiële huurders.

Competitive Analysis

De tweede stap is bekijken wat er al bestaat en inspiratie opdoen.

Toen ik de eerste gegevens en conclusies samen met de marketeer van Rooming had getrokken vanuit de data van Hotjar & Analytics ben ik aan de slag gegaan met een onderzoek naar concurrenten.

Het doel van een onderzoek naar concurenten is om te kijken hoe zij een vergelijkbare flow aan pakken. Denk bijvoorbeeld aan hoe je een woning op Airbnb plaatst. Dit moet laagdrempelig en gemakkelijk zijn. Dit is dus een goede inspiratiebron; een project om van te leren en af te kijken.

Oude Rooming ‘verhuur een woning’ flow

Schetsen

De derde stap is het uitschetsen van wat eerste ideeën. Soms doe ik dit met pen en papier of ik maak een aantal lo-fidelity prototypes in Adobe XD.

Bij dit project: Rooming ben ik vooral veel digitaal aan de slag gegaan. Ik heb in Adobe XD gewerkt. Deze bestanden werden uiteindelijk met developers gedeeld; deze bouwden mijn ontwerpen om tot een daadwerkelijk functionerende pagina.


Homepagina

Hieronder staan de veranderingen van het design van Rooming (links oud, rechts nieuw). Ik zal zo wat meer uitleggen over de belangrijkste designkeuzes die ik heb gemaakt voor de pagina. Ik licht dus niet volledig alle design keuzes toe. Dit doe ik wel op aanvraag; neem dan contact met mij op!

LINKS: indexpagina oud 2013 | RECHTS: indexpagina nieuw 2020

Ontwerp keuzes – Indexpagina

Cards

Voor de overzichtspagina van alle woningen op Rooming wilde ik vooral graag de woningen in een nieuwe stijl proberen te tonen. In de oude versie van Rooming werd er gebruik gemaakt van rijen met kleine afbeeldingen (zie indexpagina oud hierboven) terwijl foto’s super belangrijk zijn als je naar een kamer op zoek bent.

De cards zijn veel veranderd in de periode maart 2019 – januari 2020

Ik ben zelf beter geworden in design in deze periode doordat ik veel las en informatie opzocht op onder andere youtube en LinkedIn Learning. Ik vind dat je dat goed terug kunt zien bij deze cards; ik heb mij ontwikkeld en de cards zijn mee ontwikkeld. De informatie hiërarchie is visueel beter vormgegeven bij de laatste versie (4.0) van de cards dan de versies daarvoor.

Visueel: Rooming

In de sectie hieronder een stijlimpressie van de interacties en flows die op Rooming te zien zijn. De interface animaties zijn gemaakt in Adobe XD

Betaalflow Rooming

Filteren en sorteren van advertenties


Inloggen/Registreren Pop-ups (UI DESIGN)

Bedankt voor het lezen van deze case!

Laten we nu samen iets moois maken!

ANDERE PROJECTEN

OBA boek zoeker

APP | PROTOTYPE | UI
Q2 2018

Mobiele native app concept voor de OBA om boeken te kunnen reserveren en informatie te vinden over de fysieke locaties van de Openbare Bibliotheek Amsterdam (OBA). Ik heb met dit project mijn UI skills uitgebreid.

De Bezette Stad

STORYTELLING | AUDIOVISUAL
Q1 2020

Interactieve audiovisuele experience waarbij toeristen door een app de geschiedenis van de gebouwen van Amsterdam ten tijden van de tweede wereldoorlog te weten komen.

MOBO-box

STARTUP | E-COMMERCE
Q1 2020 – NOW

Eigen bedrijf dat ik gestart ben tijdens de minor ondernemerschap in februari 2020. We dagen jonge kinderen van 6 tot 12 jaar uit om met techniek aan de slag te gaan. Met onze thema boxen en lespakketten maken we techniekonderwijs toegankelijk voor iedereen.