- Role
- UX/UI Lead
- Creative direction
- Art Direction
- Agency
- Another Circus
- Duration
- 1 year
- Year
- September 2021 - October 2022
What is Spitogatos01
Spitogatos is the leading real estate website in Greece.
Offering over 400 thousand active property listings for sale or to rent to millions of property seekers looking to find their favorite place in Greece.
Established in 2006, Spitogatos, boasting 35 million properties across Europe, attracts over 85 million visits and 2 billion pageviews annually, providing both B2C and B2B services.
My role
Taking charge of the entire lifecycle of the product's UX/UI redesign from inception to completion, overseeing a team of two individuals. Played a significant role in shaping the creative direction for the brand's identity redesign.
Present comprehensive UX flows and prototypes to ensure functionality and accurate information.
Ensure a smooth transition to the redesigned product by furnishing a detailed design system that aids Spitogatos in-house developers in aligning their existing code with the updated guidelines.
The Challenge
Lead the UX process by engaging in detailed discussions and grasping the client's business model to facilitate the successful redesign and delivery of an existing product since 2006.
Focusing on enhancing functionality and refreshing the brand's visual identity and UI aesthetics.
Challenge acceptedDesign process02
Timeline
A thoughtfully planned timeline was essential to coordinate the redesign of both the brand identity and the UX/UI functionality and aesthetics.
Previous identity03
Logo and character
The Spitogatos brand has been established since 2006. However, its previous identity appears outdated and does not convey the prestige that the product holds in its market segment.
Homepage
Examining the main search bucket functionality of the homepage while also pinpointing usability and readability issues.
Search Results
The search results page showcases featured listings at the top, along with the complete list, allowing users to filter selections from the left sidebar.
Listing page
The listing page demonstrating an image gallery on top, followed by the listing's information and finally display the form of interest.
Rebranding04
New logo
The logo has been revamped to exude a fresh and contemporary vibe while preserving its essence through the inclusion of the cat figure in its design.
Primary colors
Bold colors, sharp contrasts: The spitogatos color palette veers away from well-trodden paths to make a singular statement.
Secondary colors
Secondary colors were thoroughly selected for implementation across all visual communication materials.
New character
The cat, also known as the "houser-cat," has consistently been a prominent element of the Spitogatos brand. The updated brand and product aesthetics necessitate a redesign of the cat symbol to align with the new era of the Spitogatos brand, thereby finalizing the brand's visual identity.
Key visual
The revamped character, combined with the freshly chosen colors, constitutes the primary visual element that conveys the concept of a cat that adores being at home, reflecting the Greek significance of the term "Spitogatos."
Typography
Brand Applications
Showcasing the updated brand guidelines across a range of applications, including app icon, business cards, LinkedIn covers, and more.
UX Redesign research05
Moodboard
Following the presentation of three distinct mood boards to the client, the selected one establishes the appropriate direction for achieving the desired look and feel.
User research
User research conducted with Spitogatos users provided valuable insights into how they perceive and engage with the product.
New home wireframe
The vision for the newly designed homepage wireframe entails a full-screen page layout, (without scrolling), featuring solely the search bucket component. This approach aims to prevent disruption from other elements located below the fold.
New search results wireframe
The user research findings indicated a preference for using the map more frequently, along with a combination of both the map and the list. Consequently, a split-screen layout was created.
New listing page wireframe
The layout of the recently redesigned listing page introduced a clearer division of space. It features the photo gallery at the top, accompanied by quick actions, followed by a split layout presenting the listing information and the inquiry form.
Homepage UI06
Home search bucket
Demonstrating the search bucket feature, where users can select a location, define a price range, specify a surface area range (in square meters), and choose the type of residence.
Prototype
Interactive Maps
Adding an extra touch. Upon clicking to search for a location, a helper module appears even before the user starts typing, offering interactive map options to assist them.
Open map & select
Users can choose a region, area, or sub-area by clicking on the bounded map areas. An index helper is displayed to the left to assist users in identifying and refining their results.
Draw area on map
An alternative method involves the user clicking on at least 4 points to create a shape that delineates the area for searching listings.
Close to your place
Lastly, the "Close to Your Place" feature enables users to set a 20km radius around their location with a single click, which can be customized as needed.
Personalised homepage
When a user is logged in, a personalized homepage is generated to deliver tailored content based on their recent searches and listings, as well as showcasing featured listings and agents.
Search helpers
A specialized "helper area" was crafted to furnish users with informative articles on home searching or buying. Following this, a "Neighborhood" section layout showcases specific areas along with details about their surroundings.
Search Results UI07
Map view
The map view has undergone a redesign, now featuring both a list and a map that interact with each other. This is a departure from the previous version where the map occupied the entire screen.
List view
The list view includes identical information to that of the map view, ensuring consistency in both style and functionality.
Prototype
Add area to search
As revealed by user research, users frequently search for more than 2-3 locations simultaneously. To address this, a consistent location addition feature has been integrated compared to the homepage. Additionally, visual representations of the areas on the map have been provided to enhance usability and facilitate comparison
Prototype
Compare listings
An interactive layout has been designed to provide a clear visual comparison between similar or dissimilar specifications, with the flexibility to adjust the order based on the user's preferences.
Compare flow
Listing page UI08
Page breakdown
In addition to the revamped page layout, fresh information was integrated by showcasing an interactive map displaying the listing's location, along with market statistics and insights. A fixed header with various displays was created to guarantee the visibility of all pertinent information as the user scrolls.
Prototype
Neighbourhood page09
Full page
The neighborhood page concept aims to offer a dedicated landing page for particular areas, furnishing information about the region including residential and commercial details, an interactive map featuring categorized "what's around me" content, price indexes, user reviews, and area photographs.
Mobile design10
Home Search & menus
Implementing uniform functionality across mobile devices is essential due to the significant portion of users accessing the platform via smartphones.
Prototype
Map area select, drawn area, map radius
Search results view
Showcasing the UX functionalities of both the list view and the map view on the search results page.
Prototype
Listing page
Tailoring the listing page for mobile devices involves retaining all desktop functionality, albeit reorganized and segmented into concise steps.
Design system11
As highlighted in the introduction, guaranteeing a seamless transition to the redesigned product was a critical aspect that required attention to detail. A comprehensive design system was ultimately delivered to fulfill this objective.
Responsive design
Color usage
Form elements
Buttons & dropdowns
Conclusions12
- Results
- A successful brand & product redesign for the no1 real estate website in Greece.
- New UX functionalities introduced, resulting in a boost in the average session duration.
- A fresh yet recognizable brand identity that retains its heritage from 2006, extending its application to diverse platforms and requirements.
- Impact
- Increased user engagement demonstrated by extended session durations, heightened pageviews per session, and diminished bounce rates.
- Improved conversion rates were achieved by restructuring the website's information architecture, making the user journey easier for visitors to navigate, find information, and complete desired actions.
- Enhanced brand perception which leads to improved brand recognition, trust and credibility among users
- Reflections
- Participating in a long project presents challenges in terms of iteration, yet offers valuable opportunities. This involves understanding the client's business model and aligning with the development team's technical specifications, ensuring smooth synchronization for the final product launch.
- Working with a website that garners 85 million visits and 2 billion pageviews annually offers invaluable insights into user behavior patterns, which can be leveraged in a highly effective design thinking strategy.
