Open house
Duration:
November 2022 - November 2022 (2 weeks)
Responsibilities:
Collecting business requirements
Desk Reasearch, UI Design
Developing a design system
Presentation of the solutions
Iterate on designs based on feedback
Role:
UX/UI Designer
Goal
Introducing new components for open houses and special labeling for new properties.
Personas
Placester Customizer Users
Potential clients for real estate agents.
Environment
Real Estate Industry in the USA
Creative Industry
Let's see project
overview
deadline
Due to urgent needs and specific project requirements, it has been determined that the time allocated for the completion of this task will be limited to approximately 7 days. This short timeframe is a result of project priorities and the necessity to deliver results swiftly.
Research
Benchmark analysis of platforms: Realtor.com, Zillow.com, Redfin.com, Trulia.com, Homes.com, Remax.com
Tools
Brainstorming sessions in order to take their needs and company goals into account.
Placester
Placester is an online platform for real estate agents in the USA, providing an intuitive website builder, 30 templates, displaying current properties based on the MLS database, CRM, and more.
The project began with thorough research.
Path to success begins here
Visual Exploration
Explore real estate portals visually, uncovering nuances that shape online property experiences.
User interface
Navigate property portal dynamics, discovering intuitive design elements for seamless user experiences.
A Detailed Investigation of Real Estate Platforms.
An analysis of 6 portals was conducted, namely: Realtor.com, Zillow.com, Redfin.com, Trulia.com, Homes.com, Remax.com, considering the appearance of the 'new’ and 'open house’ labels on the card, text content, date and time format, and the layout of the list of all open houses for each property. The comparison was presented in the form of screenshots and subsequently shared with the team.
Project strategy: FigJam and Trello Dynamics
The strategy involved the initial detailed development of the entire concept using FigJam, enabling a holistic view of the problem. Subsequently, to organize and monitor progress, a task list was created in Trello, facilitating effective management and implementation of each stage.
Trello
Effortlessly organize and track project tasks using Trello’s dynamic task management system.
FigJam
Leverage FigJam to foster a holistic conceptual view, promoting collaborative ideation and problem-solving within the project.
Wireframes
First and foremost, I focused on designing wireframes for the open houses module for four different breakpoints: 1440, 1024, 768, 375. The primary goal was to ensure an appealing appearance, especially when displaying a single tile with open houses. Additionally, four different layouts were designed to accommodate various user needs. For a single property, users can choose a layout that looks great for an individual listing, while for multiple properties, layouts displaying all properties and a carousel option were created to satisfy diverse user preferences.
Label Evolution: Crafting Consistency
and Aesthetics Across Variants
Each property card within the product already featured functions like 'virtual tour,’ 'featured,’ and 'add to favorites’ in 8 different styles, with color customization options. The new labels – 'open houses’ and 'new’ – had to be carefully designed to maintain consistency and aesthetics regardless of user color preferences, especially when displaying all labels simultaneously. Scaling the cards for various screen sizes presented another challenge, requiring adjustments to the new labels to preserve clarity and aesthetics.
During the design process, I faced challenges with the prior inconsistent card designs that had varying sizes depending on the style, complicating label scaling. Production analysis uncovered issues with cards where labels extended beyond the card area, resulting in an unappealing display. A fresh start was necessary, considering 8 card styles, 4 breakpoints, and adjusting views to existing page layouts. Components were created flexibly, allowing for badge addition, resizing, and styling cards using switches and variants to not disrupt existing views.
During the design process, my focus was on creating 7 distinct label variants. Collaborating with the team, we decided on uniform, minimalist white labels, with user-customizable colors. An analysis of existing labels revealed an issue of not fitting within tiles. After studying other portals, we established a consistent text format for 'open houses’ labels, considering date and time formats. We also changed the label 'new’ to 'newly listed’ for better context. Design efforts included adapting labels to various styles and layouts, resulting in a cohesive and aesthetic outcome.
Design Harmony: Crafting Seamless Views
20
Different layouts
8
Different styles of cards
Continuing smoothly, the remaining part of the design process flowed seamlessly, utilizing comprehensive property card components. I crafted views in the customizer, empty states, 'property details page’ subpage views, real-use examples, and numerous other elements. It’s worth noting that at this stage, no unforeseen challenges were encountered. Additionally, the entire process was meticulously outlined in an Excel sheet, aiding developers in understanding and implementing, especially given the large number of diverse views that could potentially pose issues.
Design Insights: Success and Future Directions
Smooth 7-Day Project Journey
The project achieved its goal in 7 days, implementing a robust open houses feature with 'newly listed’ functionality. Efficient problem resolution was facilitated by effective communication and ongoing feedback from the team and product owner.
Error-Free Evolution
Developers had no uncertainties, and the QA team reported no issues related to user experience (UX) or user interface (UI). The feature will continue to be developed and enhanced in subsequent iterations
Sample Views of Websites and Applications
The customizer’s snippet includes various tabs, allowing users to personalize their page according to individual preferences. In the customizer, page creators can modify layout, card style, add text, configure the empty state view, and customize many other options to craft a personalized subpage.
Flow on the 'property details page,’ featuring comprehensive components with detailed information about all open houses for the property. Due to the potential for multiple open houses, a 'Show More’ button has been added to display the next 4 upcoming open houses.
Example view of the search results page layout with a map. Property cards with new labels are displayed.
Get in touch
+48 790639039
karczewskamonika22@gmail.com
Katowice, Poland