Work

About

Contact

Staylia

A digital real estate platform that simplifies the process of connecting property owners, tenants, buyers, sellers, agents, and agencies directly.

Role:

UX Designer,
User Researcher

Time Frame:

Apr 2020 to
Aug 2020

Skills:

User Research,
UX Design,
Usability Testing,
Accessibility Testing,
Branding

Tools:

Figma, Balsamiq,
Miro,
Adobe Illustrator,
Typeform,
Optimal Workshop,
Zoom

Project Overview

The client approached us with a visionary idea to innovate Dubai's real estate sector. Facilitating seamless transactions, Staylia simplifies the buying, selling, and renting of apartments, villas, lands, and commercial properties. It boasts a comprehensive catalog that showcases a wide range of real estate options, catering to diverse customer needs and preferences.
Driven by a commitment to fill existing market gaps, Staylia aims to create a user-centric experience that engages both existing and new users across all platforms. By leveraging cutting-edge technology and a customer-first approach, Staylia ensures that every interaction—from property search to transaction—is efficient and transparent. Ultimately, Staylia strives to be the most trusted and preferred destination for individuals and businesses looking to navigate Dubai's dynamic real estate market with confidence and ease.
...
Go to
Discovery
Research
Ideation
Wireframe & Iterations
Final Design

Discovery Phase

Exploring Insights
& Opportunities .

Methods used:

Client Interview
Stakeholder Mapping

I initiated the Discovery Phase with the client, aiming to deeply understand the current market landscape. I conducted comprehensive research to identify competitors and their strategies, while also exploring emerging trends in the industry. Utilizing diary studies, I delved into the daily routines and interactions of users to uncover nuanced insights. This approach allowed me to gather valuable data that informed strategic decisions for crafting a user-centered design solution. Through rigorous analysis and collaboration with the client, we aimed to set a solid foundation for creating an impactful user experience.

Client Interview

In the initial step, I conducted a detailed client interview to grasp their preconceived notions, ideas, assumptions, and potential target demographics. This process involved employing techniques such as contextual inquiry and interviews to gather insights into their business goals, user personas, and expected outcomes. By employing user-centered design methodologies, I aimed to uncover the client's underlying needs and aspirations, setting a strategic direction for the project. This comprehensive approach ensured alignment between user expectations and design objectives from the outset of the UX process.

Stakeholder Mapping

Following the client interview, the next step involved stakeholder mapping to delineate the core, direct, and indirect users. This process identified key stakeholders such as renters, buyers, agents, agencies, and internal teams including development, marketing, sales, and support. Core users encompassed those directly engaging with the platform, while direct stakeholders consisted of internal teams crucial to operational success. Indirect stakeholders, represented by end-users, were pivotal in understanding broader market dynamics and user needs. This mapping facilitated a holistic approach to UX strategy, ensuring alignment with diverse stakeholder interests and enhancing overall project outcomes.

This mapping was facilitated using collaborative tools such as Miro for visualizing stakeholder relationships and Google Search Engine for gathering market insights and competitor data. These tools enabled a holistic approach to UX strategy, ensuring alignment with diverse stakeholder interests and enhancing overall project outcomes.

Research Phase

Uncovering User Needs
& Market Dynamics .

Methods used:

Competitor Analysis
User Persona
User Interview
Dot Voting

The result of the Discovery Phase was a comprehensive understanding of the market landscape, encompassing competitor analysis and profound insights into user behaviors and preferences. This phase also facilitated the research process, establishing a clear stakeholder map that identified core, direct, and indirect users crucial for the project's success. These insights provided a solid foundation for advancing to the next steps of the design process.

Competitor Analysis + Dot Voting

Thorough Competitor Analysis: Systematically Categorizing Insights on Unique Selling Propositions, Advantages, and Disadvantages Utilizing Miro During this phase, we meticulously evaluated potential competitors identified in earlier stages, meticulously noting findings across various categories such as unique selling propositions, strengths, weaknesses, and market positioning. Using collaborative tools like Miro, We organized these insights to visualize and prioritize strategic considerations for our client's project. This approach not only informed our UX strategy but also provided a clear understanding of market dynamics and competitive landscape. By categorizing and documenting each competitor's offerings and market strategies, I aimed to identify opportunities for differentiation and enhancement in our design solution.

Additionally, I facilitated internal stakeholder engagement by encouraging them to identify crucial points from the competitor analysis that resonate with their business and customers. Using the dot voting technique, stakeholders prioritized key insights and features they believed would best serve user needs and align with business goals. This participatory approach ensured that our design decisions were grounded in both user-centric principles and strategic business objectives, fostering alignment across all project stakeholders.

User Personas

During this phase, I developed detailed user personas based on insights gathered from client interviews, extensive market research, and data provided by the client. These personas guided our UX strategy to ensure we addressed the specific needs and behaviors of our diverse user base:
1. Renters
2. Buyers
3. Agents
4. Agencies

By creating these user personas, I ensured our design solutions were empathetic and user-centered, addressing the specific needs, goals, and pain points of each group. This strategic approach, listing personas based on interests, influences, goals, needs, expectations, motivations, and pain points, enabled us to tailor the user interview questions to cater to each specific user type's needs.

User Interviews + Dot Voting

Following the user persona, I strategically crafted user interview questions using various psychological triggers such as goals, frustrations, motivations, needs, challenges with competitors, desired features, and positive experiences. This strategic approach aimed to empathize with the users and uncover their true needs. I ensured that questions would yield deep and actionable insights.

To facilitate this process, I used Typeform to create an engaging and intuitive online questionnaire. This allowed us to reach out to up to five potential users identified by the client, ensuring a diverse range of perspectives. The questionnaire was designed to delve into user experiences and expectations, uncovering key insights that would inform our design strategy.

After conducting the interviews, I carefully collated all the responses, categorizing them based on user type to create a comprehensive synthesis of insights. This detailed summary captured the essence of user answers, highlighting critical themes, patterns, and specific user needs. I then presented this summary to the entire team, to effectively prioritize the key points for the application, we facilitated a dot voting session. This involved the team members reviewing the summarized insights and voting on the most crucial aspects. By performing helped us to visually prioritize the features and pain points that required immediate attention. This method not only fostered collaborative decision-making but also ensured that our design and development efforts were focused on the most impactful areas, aligning closely with user needs and business goals.

Ideation Phase

Shaping and Refining
Ideas .

Methods used:

Key Findings
Affinity Clustering
Statement Starters
Tree Testing

In the ideation phase, I integrated the insights from previous steps to focus on generating innovative ideas that will enhance the app experience for users. By leveraging findings from user interviews and research, We identify key pain points, user preferences, and business goals. This groundwork informs our brainstorming sessions, where multidisciplinary teams collaborate to explore diverse concepts and solutions. We dedicated a full-day workshop session to implement these design methods in a collaborative online workspace using Miro.

Key Findings

Key findings were identified through a comprehensive process of dot voting, encompassing both competitor analysis and user interview responses. These insights were thoughtfully categorized to reveal patterns in similarities, differences, learnings, and opportunities, resembling a refined iteration of the RTB method.

This thorough understanding empowers us to pinpoint precise areas ripe for strategic targeting and refinement in our approach. By anchoring our design decisions in empirical data and profound user insights, this phase serves as a critical foundation for crafting a effective statement for our features that resonates deeply with our audience. It ensures that every design element is purposeful and aligned with user needs, enhancing usability and satisfaction across the board.

Affinity Clustering

In the next phase, I employed affinity clustering, a UX technique that involves grouping similar findings into clusters. This method allows us to distill and organize the diverse insights gathered from competitor analysis and user interviews. Through this, we prioritize and refine our feature set to ensure that the application not only meets but exceeds user expectations. This structured approach enables us to focus on developing functionalities that are most impactful and relevant to our target audience. Key feature groups identified are,
1. Detailed Information, Media, Listing Quality
2. Intuitive & Mobile ready UI, Search, Filter, Specialization
3. Verified listing, Trust symbol, Reviews/Ratings
4. In-Chat, Support, Instant Notifications, Ease of Access

Statement Starters

Through the above process, I precisely pinpointed key user priorities and identified gaps in competitor offerings. Our subsequent step entailed crafting statement starters, a method rooted in UX design principles, to catalyze brainstorming sessions aimed at devising intuitive solutions for these identified features. These starters serve as prompts to ideate and innovate, leveraging design thinking methodologies to ensure user-centricity and usability in our solutions. This approach aligns with principles of empathetic design and iterative refinement, where each statement starter guides us towards developing features that are seamlessly integrated into the user experience.

Tree Testing

Tree testing was conducted using the Optimal Workshop tool to evaluate the navigation structure and information architecture of the application, ensuring a seamless user experience without confusion. This process was instrumental in validating the IA and refining the flow of features to establish an optimal and logical structure. By analyzing user interactions with the hierarchical layout, we gained insights into how effectively users could navigate and locate information, guiding us in optimizing the application's usability and overall design effectiveness.

Wireframe & Iteration

From Idea to
Visualization .

Methods used:

User Flow
Wireframing

With features and navigation thoroughly validated and refined, I embarked on the crucial phase of visualizing the user journey through the lens of information architecture. I utilized Figma, to craft detailed wireframes – essentially digital blueprints – for each screen and interaction. This iterative process involved continuous refinement based on user feedback.

User Flow

I centered our user flow around user behavior, leveraging insights from tree testing and information architecture principles to structure the app's navigation and content for intuitive usability. Observing user interactions with this structure allowed us to iteratively refine the flow, enhancing navigation and optimizing the overall user experience. This process not only validated our information architecture decisions but also enabled us to create a streamlined and effective user journey that meets user expectations and enhances usability.

This user flow was meticulously crafted using Figma. I then tested these designs with users through contextual inquiry, gaining valuable insights into how they interacted with the application in real-world scenarios.

Wireframing

Wireframes were scrupulously crafted using Figma, employing iterative testing, rapid prototyping, and refinement to enhance UX and align with both customer needs and business objectives. This iterative approach involved conducting usability testing, contextual inquiries, and heuristic evaluations to gather user insights and validate design decisions swiftly. By integrating findings from these UX methods into the iterative design process, we optimized usability and functionality.

Final Design

The Journey to
Exceptional Design .

Covers:

Design System
High-Fidelity Prototype
Feature Explanation
Accessibility Checks

Once the client approved the results from user flow and wireframe testing with users, we advanced to the high-fidelity prototype phase using Figma. This involved developing a detailed design system and branding to ensure consistency and visual appeal. Additionally, we conducted thorough testing, including accessibility testing, to guarantee inclusivity and usability across all user demographics. This phase marked a crucial step towards refining and preparing for final implementation.

Design System

For the final design, the first step I took was to create a robust design system. With a keen eye for detail and guided by principles of human psychology, I carefully selected colors and fonts to enhance legibility, readability, and aesthetic appeal. I opted for geometric shapes, such as blocks, to symbolize the building blocks of property concepts.

Iconography was meticulously crafted, along with considering elevation, spacing, and radius to maintain visual harmony. Components followed the atomic design methodology, ensuring a scalable interface design system. The design system included variables for quicker turnaround times. By integrating these elements, the design system supports effective and engaging user interfaces, ensuring a seamless and intuitive user experience.

High-Fidelity Mocks

Once the design system parameters were approved by the client, I began crafting high-fidelity mockups in Figma, adhering to the established wireframes and user flows. I precisely integrated the design system components, ensuring consistency and cohesion across all screens. The preparation phase, which included extensive user research and the application of design thinking methods, provided a solid foundation for the hi-fi prototype through informed design decisions.

To illustrate the effectiveness of my approach, I've outlined the key solutions developed for the all the findings/challenges identified through above process, along with the Design Laws/Psychology that underpin each solution. These solutions played a crucial role in helping the client secure their initial set of investments and kickstart their business successfully.

Customer Mobile App

By minimizing the number of choices and presenting clear, concise options, the signup process becomes quicker and less overwhelming. This reduction in cognitive load ensures users can complete the signup swiftly and confidently. The use of engaging shapes and visually appealing elements makes the interface more attractive, which in turn enhances its perceived usability. Users are more likely to enjoy the process and feel positive about the platform when the design is both functional and beautiful.

The home screen layout is crafted to guide users effortlessly, ensuring that the search functionality is prominently placed. This allows users to begin their property search quickly and efficiently. Property cards are designed to display all essential details clearly and concisely, making information readily available at a glance. This ensures users can make informed decisions without unnecessary clicks.

An integrated chat feature is prominently accessible, allowing users to quickly reach out for inquiries or support. This enhances the overall user experience by providing immediate assistance and facilitating communication with property agents or support staff. Also, Call-to-action buttons are designed to be visually distinct and strategically placed, guiding users toward key actions with minimal effort. The use of contrasting colors and clear labeling ensures these buttons are easily identifiable and actionable.

The search results are seamlessly integrated with an interactive map view and list view, allowing users to visualize property locations while browsing listings. This dual-view setup enhances spatial understanding and helps users make more informed decisions. An comprehensive filter options were also provided to refine search results based on user preferences. Users can easily adjust parameters such as price range, property type, and amenities to find properties that match their exact criteria. Prominent action buttons and selection indicators are used throughout the interface, ensuring users can easily engage with the most important features, such as saving properties, contacting agents, etc.,

Listing detail screen is designed to align with common conventions and user expectations. This ensures a familiar experience by organizing information such as reviews, amenities, neighborhood details, and more, logically and breaking it into manageable sections, thus the cognitive load is reduced. Users can easily find the details they need without feeling overwhelmed.

I also ensured each listing includes a prominent trust badge indicating that the property has been verified. This promotes user confidence and trust in the authenticity of the listings. Additionally, assisted recommendations of related properties are displayed, helping users explore similar listings that might also meet their requirements.

Admin web App

We have developed an exclusive admin web application designed specifically for sellers, agents, and agencies. This web app is highly customizable and can be adapted for use by customers, including renters and buyers. Its flexible design allows it to cater to a wide range of users within the real estate industry, providing a user-friendly experience for both professionals and clients. Connect to know more about this.

Accessibility Checks

Finally, I ensured the design is in compliance with accessibility standards by conducting rigorous checks such as vision simulation, color contrast analysis, touch point optimization, and typography and spacing checks, to meet universal accessibility requirements. This approach not only enhances user experience across diverse needs but also aligns with regulatory frameworks, fostering a design ethos that prioritizes inclusivity without compromising aesthetic or functionality. Each element is scrutinized to harmonize usability with visual appeal, ensuring every user can engage seamlessly with our interfaces.

Above is the vision simulation of the high-fidelity design, aligned with the vision simulation standards. This conforms that the design is accessible and user-friendly, catering to diverse visual needs.

Conclusion

Process
Drives Results .

In closing, the client was incredibly pleased with the entire design process, from initial research to the final mockups. Our focus on user-centric design and adherence to accessibility best practices resulted in a mobile application that not only impressed them but also played a key role in securing their initial funding. This successful outcome signifies the powerful impact that a well-informed design can have on a business, paving the way for its next exciting chapter.