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.
05
Style guide elements
Logo design
Logo consists of two parts - an icon and full logo with text.
An icon is meant to be used as a brand suggestion, if the brand name is already mentioned somewhere else.
Full logo is meant to be used if it is the only indication of the brand.
Variety of patterns indicated below can used as a design element for various background and products.
Colour palette
Brand consists of two main colours green and dark purple, the third colour light rose is used as a background colour to differentiate between the elements and the background. These colours were defined by using the split complimentary colour system. The light rose and dark purple are shades from the base colours.
The brand background is white, so green and purple can visually guide users through the main navigation systems. Green is the main colour for primary CTA-s, while purple functions as an accent colour and together with light rose it also serves for the secondary CTA-s.
Brand colours
Base colours
hex #9CC270 Green | Secondary colour | Primary CTA
Light hues
hex #F9FBF7 Light Green
hex #C270A6 Rose
hex #9B70C2 Purple
hex #FBF7FA Light Rose | Primary colour | Element background | Secondary CTA
hex #F9F7FB Light Purple
Neutrals
hex #FFFFF White | Background
hex #5E5E5E Grey | Icons
hex #00000 Black | Text
Dark hues
hex #4E6138 Dark Green
hex #42303C Dark Rose
hex #3A3042 Dark Purple | Tertiary colour |
Tertiary CTA, accent
Various shades are applied for different buttons during different actions. Default buttons use the brand colours as the base while hovering, focusing and pressing use lighter and darker shades from the same colour palette. A designer can choose based on the previous UI Designs and provided palette the most suitable shade for the future design.
Typography
Typography has to be simple and consists of sans- serif typefaces to appeal for mobile devices.
Iconography
Icons are from Material Design System, if the icon is not present in the system, new designs will have to be created.
Main icons
Outlined
Weight: 400 (2dp)
Grade: Normal
Optical size: 24dp
Padding: 2dp
Corner radius: 2dp
Exterior corners rounded
Interior corners sharp
Colour: Dark purple
Social media icons
Outlined
Size: 24dp
Colour: Grey
Main Navigational UI Elements
Splash screen animation
Imagery
Appropriate Images
Images have to be in natural tones and settings. Over-contrasting or saturating the images is not allowed.
Real estate images need to present the property's layout, features and character in a correct and real-life manner. Images need to be of good quality.
Sites need to be cleaned beforehand so that the room and property itself would be in focus. Buildings need to be aligned properly on an image - preferably shot on a tripod.
Drone images need to show the characteristics of the neighbourhood and the property.
Interior images need to showcase all the rooms with all the entry points, so a viewer can understand the layout of the property.
Emotive and real estate agent profile photos need to be welcoming and natural.
Inappropriate Images
Avoid images which are oversaturated or too bright. Images need to showcase both - light and shadows.
Avoid images done on strange angles - from up to down or from down to up. No tilted buildings.
Avoid drone photos done straight from the top, which does not convey any necessary information from the viewer.
Avoid interior images from messy or cluttered rooms - which do not showcase the property itself.
Avoid images with various coloured filters.
Avoid images of people, which are staged and unnatural.
06
Responsive Design
Dome website is built as a mobile-first application but to offer consistency in design - medium and large breakpoints were added to the initial design. These designs ensure intuitive navigation and esthetical appeal for users.
Grid Systems
Mobile
Columns: 4
Margins: 2
Gutters: 3
Grid size: 8px
Column width x 4 = 70%
Margin width x 4 = 16%
Gutter width x 3 = 14%
Total screen width = 100%
Tablet
Columns: 8
Margins: 2
Gutters: 7
Grid size: 8px
Column width x 4 = 75%
Margin width x 4 = 8%
Gutter width x 3 = 17%
Total screen width = 100%
Desktop
Columns: 12
Margins: 2
Gutters: 11
Grid size: 8px
Column width x 4 = 85%
Margin width x 4 = 5%
Gutter width x 3 = 10%
Total screen width = 100%
Landing page breakpoints
The landing page hierarchy is built based on the user's needs for various features. Medium and large breakpoints also include "Newly listed home" and a user feedback section. These sections are added to enhance user engagement with a website and to build trust with potential users through the feedback possible.
Property details breakpoints
On a medium and large breakpoint an agency info will be scrolling together with rest of the content to offer easy and direct possibility for users to contact an agent or book a tour.
07
Final Design
08
Conclusion
Dome webpage design has followed a user-centred design process, keeping our project brief and our persona as the focal point of all the designed features. The Domes interface is designed to be accessible and clean keeping the various WCAG design guidelines as the base for the main design decisions.
Even though a project brief included some brief design recommendations and one persona - Rashida's background, it was challenging to design the real-life scenarios our main users would be faced with. This is also an area within user research that could be improved - to have in-depth user research to attract various users with different goals and needs.
Further on to enhance user engagement and finalize the design decisions iterative design processes and user testing are recommended.