DOME
Responsive web design
Overview
Dome is a responsive website that provides property buyers with information on properties of interest.
The goal of a website is to create a seamless experience through real estate interactions, by providing necessary information to new property investors about the current market trends and key points to keep their eye on through their transactions.
​
To be able to provide this experience, Dome collaborates with several key agencies, who take into account each investor's journey and have relevant guidelines for new investors to follow.
My role
UI Design
My Tasks
User Stories
User Flows
Wireframing
Moodboards
Logo and icon design
Style Guide
UI Elements
Animation
Mockups
Tools
Figma
Adobe Illustrator
Adobe Photoshop
Paper & Pencil
01
Defining a Problem
Problem Statement
Small-scale property investors need access to reliable, uncomplicated information about their potential property investments and the process of the transactions. We will know this to be true if users start to engage with an application to contact partner agencies which eventually leads to an investment.
​
Possible solution
A responsive web app which is easy to use on the go - everywhere and anytime. Where a user can find all the necessary guidelines about different types of investment opportunities and can contact the most suitable partner agency to guide them through the process.
02
Defining users' needs and flows
Real estate investments offer great financial security for people who seek a long and steady income, but for new investors, it might often feel confusing or complicated to filter out the necessary information. To be able to define the Domes main focus and features I used the main personas - Rashidas needs, goals and wants as a base to create the main user flows for Dome.
User flows offer a variety of possibilities for Rashida - creating a customized profile for quick searches and map features, finding relevant tips and information about the investment possibilities to finally booking a slot with a partner agency for follow-up information or in-depth guidance in the real estate market.
User Flows
Problem
"As a user, I want to create a profile containing all my property criteria, so that I am recommended listings tailored to my preferences."
Solution 1
After the customization process, landing page guidelines feature updates to recommend the most relevant articles about property investment.
Solution 2
After the customization process, relevant agencies are filtered to the ones containing the most experience in property investment.
Problem
"As a user, I want to access as much written and visual information as possible about properties I am interested in so that I can make informed decisions."
Solution 1
A user can access in-depth information about property features through the property listing page. Information includes also a possibility to contact and agent for further details.
Solution 2
A user can use the loan calculator on the property details page to get information about the possibilities for extra finances.
Problem
"As a user, I want to be able to search properties, so that I can find good matches based on my needs."
Solution 1
A user can filter properties from a search feature through a map, where she can draw the required area according to her liking.
Solution 2
A user can add the property to her favourites list to be able to compare them for future reference.
03
Moodboards
I created 2 contrasting mood boards based on the project brief guidelines. Assigned colours had to be blue, green or purple and keywords for design were clean, quick and smart.
First moodboard consisted of blues and purples and was inspired by Scandinavian minimal design together with white background.
The second moodboard consisted of greens and purples and was inspired by minimal Art Deco graphics.
Both of the moodboards had their own advantages. The first moodboard with the minimal design was following more the project keywords - clean, quick and smart, but the blues and minimal design together felt too distant and corporate in the end. The second moodboard colours were more inviting and were in align with our personas personal appeal, yet the Art Deco graphics, even with minimal appearance, didn't suit together with the project guidelines.
​
​
In the end, I combined both of the mood boards, taking into consideration our persona's character and interests and the project brief guidelines. I used greens and purples for the design, yet kept the logo and other elements as minimal as possible on the white background.Â
04
Wireframes
After the user flows were in place I was able to construct low-, mid-, and high-fidelity prototypes, which helped to structure the layout of an app and focus on users main interaction points.
