Role
Senior Product Designer
Company
DomClick, 15M MAU
Platforms
Web, iOS, Android
The recent redesign of the DomClick main homepage and app has addressed numerous business challenges, significantly improved the user experience, and facilitated the transition to a new design system, including the implementation of a dark theme. This comprehensive redesign has not only modernized the interface but also aligned our platform with current user expectations and technological standards.
In the sections below, I will detail the steps taken during the redesign process, including the research and analytics conducted, as well as a before-and-after comparison of the redesign's impact. This journey highlights the meticulous planning and execution that went into creating a more efficient, user-friendly, and visually appealing platform.
DomClick is the leading real estate search service in the country. Serving 15 million monthly active users, DomClick is a trusted platform for real estate searches across Russia.
Our team of 1,000 dedicated employees works tirelessly to provide the best user experience, we have a deep understanding of the real estate market and user needs. The company offers a wide range of essential services designed to meet the diverse needs of our users. The main services we provide include:
I lead the design of the main sections of our website and application, focusing on the homepage, personal account area, and navigation. These elements are crucial for ensuring a smooth and engaging user experience across our platform.
Our design culture is the foundation of our success. We’ve built a robust design system and follow a data-driven approach, grounded in clear visual and editorial standards. My principles ensure consistency, while usability testing and A/B tests validate design decisions. I work closely with different teams and rely on surveys to keep a user-centered focus, driving innovation and excellence in every project.
Follow a System:
Do it myself:
Supported by separates teams:
Examples of Our Design System, Analytics Data, and Visual Guidelines. Picture quality reduced due to NDA
The redesign was implemented by my team, responsible for the main page and navigation, consisting of 12 people. I also worked closely with the Sharing team and collaborated with 11 designers, following the new design system and brand guidelines.
Working with:
Before the redesign, the main homepage of the website appeared as follows. I identified and listed the key conversion-focused and important sections.
Main sections on the main page of the website and iOS application
For my redesign project, I defined several key goals that needed to be achieved. I aimed to strike a balance between aesthetic enhancements and functionality, improve user satisfaction, integrate new technologies, and maintain brand consistency. I consulted with all stakeholders to define these goals, ensuring that the project aligned with the company’s overall vision and objectives.
Understanding your audience is crucial for project’s success. I must consider all scenarios to meet the diverse needs of our users. Our main clients are sellers, buyers, and mortgage borrowers.
To minimize disruption for users and ensure no working scenarios are broken, I will aim to maintain the page structure. We will roll out the new design incrementally through A/B testing to carefully measure its impact and effectiveness.
When embarking on a project, employing fundamental tactics is essential for success. By addressing the foundation and refining individual components, I can ensure a cohesive and effective redesign. I started by studying the Key Business Priorities to determine which scenarios are most crucial.
Key Business Priorities
Key business priorities are focused on the main screen of the homepage:
I wrote scenarios to validate key user interactions, made 5 calls with users from each group, and identified 7 issues. Usability testing is crucial because it allows us to uncover how users interact with our product in real-world scenarios. By observing their behavior and gathering feedback, we can pinpoint usability issues early on, ensuring our design meets user needs and expectations effectively.
Screenshot during a call with a respondent
In analyzing user feedback on our main homepage, I sought insights to guide our redesign. By reviewing previous research and designs, I aimed to identify recurring issues and areas for improvement. Notably, several users mentioned difficulties in finding the listing section. For example, like the comment below:
“Why is everything here about buying? Can I sell my apartment with you?”
Thanks to research, user feedback analysis, and analytics, I identified three potential issues with key scenarios. These are the findability of:
Potential issues with key scenarios
Next, I analyzed competitor websites and listing services to evaluate potential solutions. Conducting a competitor analysis is crucial as it helps to understand industry standards, identify best practices, and uncover opportunities for differentiation. This comprehensive assessment helps us make informed design decisions that improve our platform's effectiveness and user experience.
Competitors
Analyzing the data, I began to identify various issues on the website. These included a lack of or undue attention to important sections, difficulty in navigating to key areas, and insufficient visibility for critical services. Additionally, I found inconsistencies in the user interface and unclear labeling, which further hindered the user experience. These insights highlighted the need for a more intuitive and balanced design to better meet user needs and business objectives.
For example, I discovered an issue with empty space when there are not enough important notifications on the website. This underutilized space detracts from the overall design and user engagement, making the page appear sparse and less dynamic.
I identified elements with high click-through rates and importance that are hidden on the screen. Similarly, I found that some lesser-used elements are also present, which adds clutter and reduces the efficiency of the user interface.
For instance, it turned out that users rarely use the filter for searching listings by minimum price. This filter’s low usage suggests it may not be prominently placed or intuitive enough for users to engage with effectively.
It also became evident that the first screen is cluttered with many similar entry points, which can confuse users and drain their energy as they search for the optimal path. Simplifying and differentiating these entry points is essential for a more seamless user experience.
In the mobile version and similarly designed app, there are similar issues with the findability of important entry points. These problems are compounded by the smaller screen size, which makes it impossible to display everything on the first screen, leading to additional navigation challenges for users.
I created the initial web design for both desktop (1366px) and mobile (360px). Initially, I tested the layouts using Clueify, an AI plugin for Figma that typically accurately simulates a heat map for the real site. The tests revealed that on the desktop version, not all key scenarios were addressed in this iteration.
I rethought the main section on the homepage and ensured that the key scenarios worked.
Testing through Clueify and usability tests confirmed this.
I successfully reduced the number of entry points on the main screen by grouping all existing scenarios into two steps. Since these steps are extremely simple and intuitively clear, this not only improved discoverability but also led to an increase in user productivity, thereby boosting the usability index.
In addition to ensuring the key scenarios worked, I identified new opportunities to promote offers and target actions on the site.
Moreover, the redesign allowed us to transition to new components, simplifying both design and development. This also enabled us to create a dark theme for the website and app.
And of course, what I’ve described above is only a part of what I’ve rethought and redesigned. The remaining sections, although less popular with users, are no less important from a business perspective: mortgages, add-ons, promotion of company offers and services, additional services, advertising, helpful articles, and links.
Additionally, there are numerous blocks with search snippets that I created in collaboration with designers from other teams: search, cottages, new builds, and others.
In general, I typically create one version for applications with minor differences between iOS and Android, which I document separately. Additionally, I design four versions for the web: for mobile phones, tablets using a four-column grid, and two versions for desktops with a twelve-column grid.
As always, I design layouts in various states and highlight the differences between the old and new versions, making it easier for developers to code and reducing the need for revisions after design reviews.
Figma with breakpoints and design system grid
The A/B tests have concluded with excellent results. Currently, an A/B test is being conducted on a limited audience. Preliminary results indicate improvements in key metrics: retention, CSI, and core conversion rates, without negatively impacting existing, unaffected scenarios.
Old search block design (top) and new (bottom)
The redesign presented several challenges. One of the critical aspects was the need for early design feedback through critical collaboration. Engaging stakeholders and team members from the outset was essential to gather diverse perspectives and ensure alignment on project goals.
Additionally, adapting the design for iOS and Android, along with various breakpoints, proved to be time-intensive. Ensuring a consistent and seamless experience across different devices required meticulous attention to detail and extensive testing. Fundamental research was another crucial component, as it helped in early problem identification.
During the redesign, I came up with a few more ideas that we discussed as a team and agreed to implement later. For example, the main page currently lacks user personalization. I believe adding personalized blocks and customizable content will help us achieve even better results.
Thanks
