Project overview
The Project:
Affinz Properties is a property management company operating in major cities in Nigeria. Affinz Properties through their website makes it easy for users to search for their desired property for either rental purpose or buying of property and in their desired city without going through too much stress and without the fear of getting scammed. They also allow property owners and real estate companies list their properties for management.
Project duration:
January 2023 to March 2023
Design process
The Problem:
People looking for an apartment or property to rent or buy sometimes face the stress of going from street to street in search of their desired and suiting apartment. Some people also get over charged by agents and at the end they still find it difficult to get their desired property.
The goal:
Affinz property website will enable users skip going from street to street in search for their desired property for buying or renting. It will enable them search and select their preferred property from their desired location and book for inspection at a very low price without being worried about getting scammed by fake agents. The website also provide other good offers for their potential clients.
My role:
Lead UX/UI designer, UX researcher, etc. I designed the Responsive web App for Affinz Properties from conception to delivery, covering for all device types, from desktop to mobile device.
Responsibilities:
Conducted interviews, designed paper and digital wireframes, designed low and high fidelity prototypes. conducted usability studies, accounted for accessibility and iterate on designs
User Research
Summary:
Working class adults who don't see going from street to street in search of apartments as ideal due to their tight work schedule and students who are operating on budget and don't really know their way around the environment were the primary user groups identified for this study through research. I conducted research and created empathy maps to understand the users i am designing for and their needs.
The aim of our website was confirmed by the identified user group and research also revealed that tight schedules was not the only reason preventing users from taking up the task of going from street to street in search of apartments. other user problems identified included being unfamiliar with the environment and fear of using untrusted property websites.
Pain points
Persona
User Journey Map
SiteMap
Paper Wireframes
Polygon were used to mark the elements of each sketch that would be in the initial digital wireframes.
Refined responsive screens, covering desktop, tablet and mobile screen sizes.
These design sketch iterations above covers all screen sizes. It covers desktop, tablet and mobile screen sizes and it prioritizes the home screen, in the effort to make it easy for users to browse through their favorite property and make quick booking for inspection. This design draft iterations on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
Style Guide
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on feedbacks and findings from user research.
Low-fidelity prototype
Using the completed set of digital wireframes, i created a low fidelity prototype. The primary user flow i connected was "browsing and selecting desired property, making payment and confirming booking for inspection, so the prototype could be used in a usability study.
View Affinz property website low-fidelity prototype
https://xd.adobe.com/view/dc10baaa-9b67-44a2-9242-e355437582b1-8943/?fullscreen
Usability study: Findings
Usability studies was conducted. The findings from the study helped guide the design from wireframes to mockups. It revealed what aspects of the mockups needed refining.
Findings
1. Users want subscription package description
2. "There should be tags that shows if a particular property is still available or not"
3. "In the above-the-fold home screen search options, add cities options and advanced search filter to enable broad search options and also specify exact location and search result"
Visual Designs
Early designs allowed for some customization, but after the usability studies, i added subscription description details. I also revised the design so user see all the subscription details when they first land on the screen.
Key Visual Designs
Desktop Screens
Mobile Screens
High-fidelity prototype
Desktop screen prototype
View Affinz property website desktop screen Hi-Fi Prototype
https://xd.adobe.com/view/78dfcd4e-b203-469d-983b-191d61d02b1e-2d8c/?fullscreen
Mobile screen prototype
View Affinz property website Mobile screen Hi-Fi Prototype
https://xd.adobe.com/view/9a1186a6-431a-47f8-8a61-495719df3a48-cf42/?fullscreen
The final high-fidelity prototype presented cleaner user flows for selecting property through Affinz property website and booking for inspection. It also met user needs for advance search options and booking package details, as well as more customization.
Accessibility considerations
1. Provide access to users who are vision impaired through adding headings for screen readers, and also landmarks
for ease of navigation.
2. Made use of icons to help make navigation easier.
3. Used detailed imagery for properties and options to help all users better understand the designs
Takeaways
Impact:
The website makes users feel like Affinz property website really thinks about how to meet their needs.
What i learned:
During the process of designing the Affinz property website, i discovered that the first ideas foe the website is only the starting point of the process. There is no limit to how the website can evolve in line with users feedbacks and usability studies, which was primarily what influenced each iteration of the website designs.
Next step
Conduct another around of usability studies to validate whether the pain points users experienced have been effectively addressed and to determine any new areas of need.