case_01:
duration:
client:
role:
varianti.eu
3 months
uni project; “RRM” SIA
web design; SoMe content
intro
varianti.lv is a real estate listings platform, that also serves as an archive of Real Estate related articles.
Focus of this project was to work with meta-data and filtering to create a user-friendly and professional looking redesign of the website and its architecture.
problem statement
varianti.lv faces multiple issues, including short user sessions due to unclear instructions, unengaging content, and a dated design, therefore affecting its success. The landing page lacks polish and modern standards. Filtering options are limited, resulting in frustratingly broad search results. Adding property listings is not user-friendly, which discourages users to advertise their properties, impacting profits.
process overview
We ran 6 weeks of development based on the design thinking methodology which includes 5 stages: empathize, define, ideate, prototype and test. We eventually created a partially functional website with advanced filtering options.
main points
> Advanced filtering
> New design
> Magazine integration
my role
I organized the project’s structure and took care of time management. Played as the main communicator between the team and the client. Conducted user research, as well as initial desk research, and facilitated user interviews. My team members helped me create the design and develop the final product.
Additionally, I worked on the client’s existing social media pages, improving overall atmosphere and creating design cohesiveness.
research
First step of the project was to gain an understanding of the Latvian real estate market. We conducted a brief analysis of existing studies and publications, employing keywords like ‘Latvian real estate market’ and ‘property buying process.’ Two crucial areas were explored to support our research process: the use of media among Latvian users and our behavior during the property purchase process.
Concerning media usage, we identified that our platform’s target audience, including a significant Russian-speaking minority comprising 27% of the total population, influences media content, necessitating availability in both Latvian and Russian.
Our exploration of user’s behavior during property purchase revealed that potential real estate buyers in Latvia typically conduct their own research before actively starting the buying process. The process was likened to any high-involvement purchase, involving four behavioral phases: Discovery, Research, Selection, and Closing. Notably, it was acknowledged that the internet, and real estate websites, in particular, have significantly impacted the Discovery phase, making us more self-directed and less reliant on agents.
empathize
In this project, we put significant emphasis on identifying the diverse user groups for the varianti.lv platform. Adopting a Design Thinking approach, it was crucial for us to comprehend the motivations, experiences, and desires of our users.
We categorized our users into two main groups: renters/buyers and sellers/people who rent out property. We gathered detailed criteria for each group, including factors like age, location, income, family lifecycle, social class, occasion and motive, sought benefits, readiness stage, and user status to gain a comprehensive understanding of their characteristics.
We then employed qualitative data gathering process through interviews. Interviewees were selected based on the established user categories. We created two distinct interview guides for renters/buyers and sellers/leasers, tailoring questions to capture the unique experiences of each group. We observed reaching data saturation during the interview process, indicating that we had collected a sufficient amount of data.
Following the interviews, we conducted a thematic analysis and identified patterns and meaning across multiple interviews.
Our findings shed light on user’s motivations, decision-making processes, and factors influencing their choices. The insights gained from these analyses guided us in refining the varianti.lv platform to better cater to the diverse needs of our user base in the Latvian real estate market.
define
In the Define phase of our Design Thinking process, we focused on observing the user problems we identified through our research. The primary objective was to precisely define the challenges users face with the portal, enabling us to concentrate on relevant issues in the subsequent stages. To execute the Define phase effectively, we needed a user need statement, specifically a Point-of-View (POV) statement, which summarizes who the user is, their needs, and why those needs are crucial. These statements capture the core of the problem and serve as a foundation for the ideation stage. (See below)
Concerning media usage, we identified that our platform’s target audience, including a significant Russian-speaking minority comprising 27% of the total population, influences media content, necessitating availability in both Latvian and Russian.
Our exploration of user’s behavior during property purchase revealed that potential real estate buyers in Latvia typically conduct their own research before actively starting the buying process. The process was likened to any high-involvement purchase, involving four behavioral phases: Discovery, Research, Selection, and Closing. Notably, it was acknowledged that the internet, and real estate websites, in particular, have significantly impacted the Discovery phase, making us more self-directed and less reliant on agents.
The format of a POV statement follows the structure: “[User] needs [a need] because [insight].” The user in the statement refers to one of the user personas created during the Empathize phase. For example, for the persona of Melanie, we formulated five problem statements based on insights gained about this user archetype. These problem statements were then transformed into ‘How might we…’ questions, opening up opportunities to propose relevant solutions aligned with the identified needs.
Some of the questions derived from the Point-of-View Madlib of Adam’s persona include inquiries such as:
- how to display listing details comprehensively,
- how to make it easy for users to assess affordability and quality,
- how to assist renters in navigating the application process,
- how to ensure sufficient metadata for a thorough search,
- how to enable users to save favorite listings conveniently,
- how to empower users to carry out the renting/buying process independently.
With these statemens, we were well-prepared to move forward into the ideation stage of the Design Thinking process.
ideate
In this phase, our focus was on generating solutions that addressed our users’ needs and exploring the limits and potential of these solutions. The questions established in the define phase served as a sort of requirements specification and the foundation for our ideation sessions. The primary goal was to generate as many ideas as possible and later refine and evaluate them. For this project, we opted for two ideation techniques: Rapid brainstorming and the Worst possible idea.
Rapid brainstorming involved generating ideas within a set timeframe, with the base being the questions defined earlier. We conducted one brainstorming round for each set of questions associated with each persona. After each round, we evaluated our ideas, immediately categorizing them based on feasibility.
Another method employed was the ‘Worst possible idea‘ technique, aiming to discover unpleasant and ill-advised solutions to users’ problems. The questions guiding this process included inquiries like “What’s the worst way of solving this problem?” and “What might be some unethical solutions we could develop?”. After gathering all the bad ideas, we analyzed why these ideas were undesirable. Then, through discussions, we transformed these initial dreadful solutions into something valuable. The ideas were turned upside down, creating a more positive outline to avoid mistakes and generate useful and usable solutions. While we gathered valuable insights from the Worst Possible Idea session, the number of feasible ideas was notably fewer compared to those generated from rapid brainstorming.
prototype
This part of the process is all about transforming the findings from our research and ideation into tangible design solutions. To manage the abundance of potential product features, we used a prioritization matrix, considering both the value to users and the feasibility of each feature. This matrix guided us in deciding the order of implementation for various features, emphasizing those that were highly valuable and feasible.
In crafting the information architecture, we started by determining the pages for displaying content and their connections. We retained much of the original structure but made strategic adjustments, such as separating listings into ‘For sale’ and ‘For rent.’ The global navigation was streamlined, considering user preferences identified in qualitative research and benchmarking.
Addressing the need for improved filtering and organization of property listings’ metadata, we established clear taxonomies and metadata categories. We carefully selected metadata for filtering, aligning choices with user preferences gathered from interviews and benchmarking.
Applying the principles of atomic design, we organized the building blocks of our product and progressed to wireframes. The wireframes, created with real data, allowed us to visualize the final product layout efficiently. Focusing on design psychology principles, we strategically placed elements on the landing page to enhance user interaction and experience.
Moving to the design guidelines, we defined typography, colors, and components. Work Sans was chosen for its on-screen optimization and font weight range. The color palette, with red as the brand color, aimed for a unified image with the client’s magazine. We applied atomic design principles to components, refining the property listing card for better scalability and information presentation.
The culmination of these efforts led to the creation of mock-ups, combining wireframes with design guidelines and content. The final designs incorporated filtering options, sorting features, and pagination to enhance user navigation and reduce cognitive load.
In the interactive design phase, we focused on microinteractions, using Figma to create dynamic button components with states for default, hovered, pressed, and disabled. These microinteractions aimed to provide users with feedback on the interactive elements and enhance the overall user experience.
development
In the development phase, we opted for WordPress as both the CMS and development environment due to its versatility and user-friendly features. Utilizing plugins such as ACF, Advanced Custom Fields, Custom Post Type UI, Elementor Pro, JetSmartFilters, and YoastSEO, we aimed to create a comprehensive and easily maintainable solution for our client.
The development process began with setting up the working environment, including registering a domain with One.com and creating a customizable WordPress theme. We utilized an online course to develop a base structure for our “Real Estate Theme.” Due to time constraints, we explored Elementor Pro as a more efficient way to handle dynamic and responsive content, including header and footer navigation.
We created a custom post type named “Properties” with 23 custom fields using ACF. The dynamic display of listings was achieved through custom themes in Elementor Pro’s theme builder. The filtering and advanced search functionalities were implemented with JetSmartFilters, requiring the creation of taxonomies for text-type fields. Despite some technical limitations and bugs, including those related to ACF’s free version and responsiveness challenges, we fine-tuned the design in Elementor and addressed SEO considerations using YoastSEO.
testing
We originally planned for prototyping tests but opted for live product testing due to added functionalities. We chose the Think Aloud Test, focusing on tasks like property searches and sharing listings. Instant Data Analysis provided quick and accurate results, categorized by severity. Our usability report for the For Sale page identified critical issues, such as slider difficulty, addressed by adding text input fields. Other improvements involved displaying property addresses, enhancing price readability, and improving pagination visibility.
social media
Apart from the project, I embarked on the journey to improve the social media of varianti.lv and Kvadrātmetrs. The client wished to combine the two identities, as they have been going hand to hand for a long time, and it felt logical to join them together.
I designed a new header for the client’s Facebook page, as well as a new post template, that represents the source of posted articles being the Real estate magazine Kvadrātmetrs.
notes
The case that you have explored is an exam project and a digital concept.