Brief
Build a design system and use it to create a digital product with the constraint of creating an accommodation booking services.
My role
As this project was with 2 other designers, we split the workload based on our affinity. Having more experience with prototyping on Figma, I managed the interactions of the components in the design system and worked on creating the interfaces for the prototype.
Context
When starting university in a new city, many students face fierce competition for housing, especially from those already onsite conducting physical visits. Students searching from afar are at a significant disadvantage, often forced to rely on incomplete information or take risky decisions, which leads to high stress and uncertainty. Moreover, landlords tend to trust students who can visit in person over those who are too far away to do so, further compounding the difficulty for remote seekers.
Experience pain points
By analysing testimonies from students (online forums, in-school surveys and our own experience). We were able to highlight the main pain points when searching for a housing.
User needs
Another thing that came out of those testimonies is their needs, what could help ease those pain points and make them have a better experience while searching for housing.
Competition
We conduct an analysis between the main housing platforms: Studapart, leboncoin, Jinka, Flatlooker and LocaGestion to identify what is lacking and how we can create a service to make the difference for the students. Even if some of them look good at first sight, they are quite limited when it comes to creating a mutual trust between the student and the owner.
Positioning
Thus for this project, we focused on improving the trust between the student and the owner through our application.
eLoc is an application that facilitates the search for student housing remotely, with a focus on virtual visits and videoconferencing between the student and the owner.
Wireframes
Through some wireframes we were able to visualise simply how we wanted to display the housing information on the home page.
For the homepage we thought of 3 possibilities: compact card, extend card and a Tinder swipe
❌ Compact card: risk of lack of visibility and contrast
✅ Extend card: a good representation with an impactful visual and readable text
❌ Tinder swipe: not really appropriate for such matters as housing search
Those wireframes express our user flow, which is to showcase the main features of our app: video calls and virtual visits. It also helps us to see what kind of elements would repeat themselves and how to build the design system.
Design System
When performing an action on the application the user might get confused if we use the same button over and over again. I create 3 types of buttons with each different uses: the primary with a light typo and strong color used for the location button, for example; the secondary to register / login with brighter color and bolder typo; the alternative used when displaying a clickable icon such as login with Google.
The notifications might be a small red dot but it is a key feature in our app when responsiveness is essential for housing search. I had to come up with a good balance between not being too discrete and not hiding the icons.
To avoid creating too many elements, I created one card that can be used for various purpose: for the list of favourite housing, for the contact of the landlords, for the videos of the different rooms. By creating one template card we minimise the workload for a possible development of the app.
Virtual visit
Our first main feature in eLoc is to enable virtual visits with videos of the different rooms. Through those videos the user can have a better representation of the space and the connections between each room.
Communication
Our second feature is to facilitate the communication and the organisation of virtual meetings between the owner and the student. The application includes a chat box and a video call feature. When agreeing on an appointment, it can be displayed on the calendar page which will send a notification when it is time.
Although it would have been possible to link eLoc to video call applications such as WhatsApp, it is important to protect from potential scammers and leaking personal information.
Neighbourhood visualisation
It is often time-consuming to search amenities next to our future housing when the location is displayed. But with the neighbourhood visualisation feature, all the searches can be made in our app. There is a built-in widget link to Google Maps where you can search for amenities, time to commute, and such.
