Spacify
3/5/65
Web
Student project
1. Introduction
Objective
A responsive web app that provides property buyers with information on properties of interest. Must feel “easy, efficient, and exciting” to use.
Persona
"As I am new to real estate, I want a tool that is easy to use and will help me quickly and efficiently find the right property.”- Rashida, IT consultant
The 5ws
Who? For new, small-scale property buyers who are looking to invest for additional income or financial security.
What? A user-friendly, responsive web app containing a database of available residential properties and land, and comprehensive information on each listing.
When? When conducting property searches and making a decision about where to invest.
Where? At home or on the go. Users can search for properties anywhere.
Why? Finding a perfect property should be a positive and painless process for users. They should get a reliable and uncomplicated tool that will help them quickly and efficiently find the right property.
Process
User flows
Low-fidelity wireframes
Mid-fidelity wireframes & prototype
Visual design & mobile mockup
Responsive design
Project details
Stakeholder: CareerFoundry UI Specialization Course
Role: UI/UX designer
Tool: Figma
Duration: 22 Mar - 3 May 22 (6 weeks approx.)
Approach: Mobile first & progressive enhancement
2. User flows
Considering the project objective and users’ needs and goals, I mapped out a user flow to demonstrate the screens that users might interact with as they navigate through the web app to complete their goal.
My thought process
What pages must I include in the web app in order for my users to achieve their goals?
How will users progress through the web app?
Some considerations for users
Users can search for properties right away without having to log in. They should be able to see what the app is about before deciding to commit.
They can seamlessly go from homepage to search results, then view property details and request a tour. But they can also go through a different path for additional features like signing in to save properties, filtering search results, and comparing properties.
3. Low-fidelity wireframes
With the user flow diagram laid out, I created low-fidelity wireframes by sketching the basic details and displaying the high-level functionality of each screen. I’ve taken a mobile-first approach by designing for a mobile breakpoint first then adapting content for larger breakpoints later.
My thought process
What is the minimum needed on each screen in order for my user to reach their goals?
How should each page be laid out?
How should the screens be connected?
Some considerations for users
4. Mid-fidelity wireframes & prototype
With the user flow and basic functionality of the web app confirmed, I translated low-fidelity wireframes into digital mid-fidelity wireframes and prototype using Figma.
What I worked on
Designed UI elements like buttons, labels, cards, fields, etc.
Employed UI design patterns like search autocomplete and input feedback.
Implemented consistent spacing (multiples of eight) and utilized spacing for emphasis, legibility, breathing room, and content grouping.
Considered the visual hierarchy of each page and edited the content so each page conveyed the key action I wanted users to take.
Some considerations for users
5. Visual design & mobile mockup
I came up with a visual design direction that would convey Spacify’s sense of ease, efficiency, and excitement. Click here for the full style guide. Then, with the visual hierarchy principles in mind, I applied visual design onto the wireframes to create a mobile mockup. Ultimately, I aimed to create a UI design that allowed users to focus on the content & functionality of the web app.
Colors
Selection
Primary color conveys the feelings of simplicity and efficiency. It also makes the property images (which are the main focus of the users) pop out.
Secondary color gives the feelings of stability and longevity which is appropriate for a property listing web app.
Accent color gives the feelings of warmth and energy, matching Spacify’s slogan of “find your perfect space” and aligning with its mood of excitement.
Some considerations for users
Are the colors applied in a harmonious manner? Are the colors pleasing to the eyes? Are they engaging, balanced, and pleasant?
The color contrast between elements and background should reach at least AA-level.
Typography
Selection
Lato: I chose Lato as my primary font because of its clean design and readability. It also signifies Spacify’s mood of ease and efficiency.
Kanit: Kanit works well with Lato. I chose to use it for headers and logo because of its bolder style which is in line with the current design trend. It also adds a fun and excitable personality to the web app.
Some considerations for users
Readibility
Legibility
Measure
Iconography
Selection
The icons both in regular and solid styles were curated from Font Awesome.
All icons share the same styles and are consistent with branding.
Some considerations for users
Icons should clearly communicate their meaning.
Touch areas for icons should be at least 40pt x 40pt.
Imagery
Selection
I wanted a home image that helped to tell the story of the web app and conveyed the right personality. The image’s colors should also be consistent with the web’s color palette.
Some considerations for users
The images should not take attention away from content and functionality.
The image property guidelines will ensure that users get the best property images.
6. Responsive design
After the mobile mockup came together nicely, I designed for tablet and desktop breakpoints and ensured a seamless user experience across all screen sizes. At each breakpoint, I followed a progressive enhancement strategy and provided users only with what is absolutely necessary for them to complete their tasks. Then, as a device increased in size, more features and content were progressively introduced.
My thought process
What content & functionality do I want to make available at larger breakpoints without additional user interactions?
How should I readjust sizes and positions of each element?
Some considerations for users
7. Reflection
I think the end product turned out very well. Spacify is very easy to use and provides all the necessary functionality to help users efficiently find their perfect space. Users can quickly check for interesting properties while on the go or conduct a more thorough research on desktop. Either way, looking for a perfect property will be a positive and painless process for them.
What went well?
As this was my 3rd UX/UI project, I already had a good understanding of the UX/UI process and Figma functions, so I was able to work more quickly and efficiently at each task.
What could be improved?
The project could use usability tests to see how the potential users interact with the web app. Usability test results could point out errors that I might miss and help to significantly improve the user experience.
What did I learn?
I gained more UI design experience, learning to establish a clear visual direction that aligned with project objective, answered user needs and goals, while accommodated a good UX. I also gained more experience working with colors, typography, imagery, iconography, and animation. Moreover, I got to practice designing for accessability, considering color contrast and levels of color blindness.
