UX/UI DESIGNER
5w's?
who?
This web app is made primarily for new, small-scale property buyers who are looking to invest for additional income or financial security.
what?
This will be a user-friendly, responsive web app containing a database of available residential properties and land, and comprehensive information on each listing.
when?
Buyers will use this tool when conducting property searches, and making a decision about where to invest.
where?
Buyers will use this tool at home or on the go. Users can search for properties anywhere, as long as they’re logged in on a device.
why?
Unseasoned buyers need access to reliable, uncomplicated information about their potential property investments. Buyers get a feel for a place by viewing comprehensive information about the property and its neighbourhood before spending time on-site.
OVERVIEW
Context:
Real estate investment is an increasingly popular way for individuals to achieve financial security. It is an exciting and emotional experience, but often complicated. While there are plenty of blogs and agencies providing information, often, buyers new to the market may struggle to get started without professional guidance and waste time viewing properties out of their range. This web app will provide them with the expertise needed to get started efficiently.
My role:
UI designer
The primary focus of this project was on UI design following its best practices such as:
-
Keep the interface simple
-
Create consistency and use common UI elements
-
Be purposeful in page layout
-
Strategically use colour and texture
-
Use typography to create hierarchy and clarity
Tools:
time:
Pen & Paper, Sketch, InVision, Principle, Angle,
January 2021-March 2021
Persona
Rashida, active 34 y.o. IT consultant
"I want to provide my family with financial security. I’ve been considering buying property for a while, and am looking for a tool that can help me find what I’m looking for, quickly!”
goals
● invest in property beyond the city for increased financial security for her family
● find the right information for fast decision-making
● get a tool to help her find the right properties so as not to waste her time
tasks
Since she is new to real estate, she wants easy to use tool which helps her find the property she’s looking for:
● Search for properties, inputting criteria relevant to what she’s looking for
● Easily view and return to listings she’s interested in
● Receive relevant and comprehensive information about properties
environment
● lives with her family in a city on the east coast, and spends most weekends in the countryside
● likes hiking with her family, and playing basketball with old colleagues and friends from college
● uses online tools regularly to help schedule her work, social life, and communicate with friends, family, clients, and colleagues. The tools she uses are functional, easy to use, and intuitive
wireframes
based on User Stories, I sketched user flows and low-fi wireframes
Working out central web app functions
● As a user, I want to create a profile containing all my property criteria, so that I'm recommended results most relevant to me
● As a user, I want to be able to search and filter properties, so that I can find good matches based on my needs
● As a user, I want to be able to save or mark properties I am interested in, so that I can easily revisit them
the next step was creating thorough hi-fi wireframes before applying colour and imagery
colour scheme
Once I had prototypes ready, there was a time to get familiar with
Rashida’s visual identity and create web app’s Style Guide that appeals to her.
To achieve it I used the method of assembling Mood boards aiming to find 'Perfect Properties' visual style reflecting Personas nature.
mood boards
Mood Board #1
focuses on warm, calm, elegant hues such as cream, peach, rust and green. Rust offers a sense of comfort and well supports the idea of evoking a feeling and desire of a cosy home, a place where one finds peace and can be true to himself. The central image of doors says that any door can lead you to your home, you just need to find the right door. 'Perfect Properties' is there for you to help you in search for perfect home.
Mood Board #1 aims to attract first time home buyers.
Mood Board #2
is exciting, vibrant, energising, loud and fun. It focuses on young adults looking for opportunity to invest in their future by buying property. I chose neon orange as the most active colour because it embodies enthusiasm, motivation and positive energy. I matched it with blue hues which is colour of sky and the ocean - symbols of endlessness and bravery.
This Mood Board should inspire users to make a move to invest in property.
My personal preference goes to the Mood Board #1 however it does not reflect Persona accurately enough. The Mood Board #2 reflects Rashida's outgoing personality much better hence the property app should be designed in a way to capture and hold her attention. I used colour palette and overall mood introduced in this board to achieve a match with Rashida's nature
colour palette
Even though I was quite sure about the colour scheme choice, I went ahead to explore more possible Colour Palette choices based on Mood Board #2 in order to be sure about the best solution.
Choosing Orange as a starting point, I then applied Colour Theory principles of matching to create three harmonious palettes. I followed the colour wheel rules such as:
Since the idea was to create strong and engaging 'Perfect Properties' interface so it keeps in line with young, enthusiastic and outgoing Persona Rashida, my final decision was to use Complementary palette.
Deep Blue as a dark primary colour and Neon Orange as an accent colour combined with Grey shades and White background allowed to achieve lively, intense, fun yet trustworthy and reliable websites effect upon users.
style guide
1.logo
- must follow colour palette codes
- must keep original shape and elements
- must be displayed on a white background
2.colours
Call to action buttons
Accents
Primary colour
Buttons
Text
Background
Field boxes fills
Text
Buttons
Icons
Text
Background
3.iconography
- Icons must be simple, conventional and communicate clear message
- Colour: grey #979797
- Size: 24x24 px
- Touch size of 48x48px
- Style: outlined with transparent background
- Social media icons style: original colours and design
4.typography
5.UI elements
6.imagery
Imagery Do’s:
- Clear image
- Modern properties/interiors
- Delivers inspiring message
- Represents property well from inside and outside
- Shows tidy interiors
- Good resolution
- Emotionally appeals to young audience
- Looks affordable, does not intimidate young buyers
Imagery Don’ts:
- Gloomy colours
- Emotionally uninspiring
- Property looks unaffordable
- Property looks worn out hence unappealing
- Shows messy interior
- Property surroundings seems unsafe, dirty
- Image focuses too much on architecture details
- Image doesn’t deliver clear idea about the property
- Poor resolution
8.accessibility
7.tone of voice
- Language must stay polite, friendly and neutral.
- Do not use specific industry jargon in order to stay understandable and friendly to clients of all levels
- Tasks language must stay clear and helpful: instructions and descriptions simple and concise.
- Any quotation must include information of original sources.
- Include text-to-speech (TTS), especially for Articles or elsewhere where users encounter larger amount of text
- Use Closed-Captioning in Video content
- Keep background white in order to maintain clean uncluttered screens
- Make sure the colour contrast supports text legibility
mobile mockups
User story: As a user, I want to create a profile containing all my property criteria, so that I'm recommended results most relevant to me
create account/sign in flow
Setting property criteria flow
User story: As a user, I want to be able to search and filter properties, so that I can find good matches based on my needs
search and buy filter flow
User story: As a user, I want to be able to save or mark properties I am interested in, so that I can easily revisit them
Save likeD properties
responsive deisgn
grid
To provide an optimal experience for the user across the board, 'Perfect Properties' web app is designed as a responsive website. To make design respond well on tablet and desktop, I chose 12 column grid to layout the screens.
breakpoints
Home screen
Property list screen
Property Profile screen
final mockups
final thoughts
'Perfect Properties', my first UI project, presented me with a challenge to find a way where each screen visually communicates the UX path and leaves user engaged.
In my experience to work on Colour Palette was the most important part of the project. Research shows that users take about 90 seconds to assess the quality of online products and from 62% to 90% of all product assessments that people make are colour-influenced on the subconscious level. Therefore I paid great deal of attention assembling Mood Board that reflects Personas character as accurate as possible. I had to constantly remind myself to stay away from my personal judgment and experience the app through Personas eyes.
The prototype needs to be tested with real target audience users to understand how well the art of 'Perfect Properties' UI works along with the science of UX.
thank you
