Ecosystem

VineBrook Homes is an internally managed real estate company specializing in acquiring, renovating and leasing single family homes

To comply with my non-disclosure agreement, I have changed some of the quantitative data and omitted some information in this case study. All information in this case study is my own and does not necessarily reflect the views of VineBrook Homes.

Service Offered:

I worked with a real estate company to create a comprehensive design system that included a color palette, typography, and intuitive iconography. Transformed customer-facing products, such as back-end dashboards, websites, and Salesforce dashboards, resulting in enhanced user experiences and increased user satisfaction. This case study will outline the UX design process I followed to achieve these objectives.

- Create and implement clean, beautiful visuals and functional user experiences with a team of project managers, technical engineers, and business process experts.
- Lead wire-frames, storyboards, user flows, process flows and site maps to effectively communicate interaction and design ideas.
- Deliver key milestones to stakeholders, including presenting and defending designs to the business team.
- Execute all visual design stages from hand-drawn sketches to digital comps to prototypes to final hand-off to development.

01 Research and Discovery:

To begin the design process, I conducted thorough research and analysis to gain a deep understanding of the real estate company's brand, target audience, and industry trends. I also reviewed the existing design elements to identify any pain points or inconsistencies that needed improvement.

The Impact Effort Matrix is a method that we implemented within our company to prioritize and allocate resources effectively, we were considering adding a new button to the dashboard of our property management system. This button would allow users to easily access a frequently used feature. To make an informed decision, we utilized the Impact Effort Matrix, considering the potential impact and effort involved in implementing this change.

Picture courtesy: Nielsen Norman Group UX

After evaluating the situation, we assigned a numerical value to the impact and effort factors on a scale of 1 to 10, with 10 being the highest. The impact was estimated to be 8, as the button would enhance user convenience, streamline workflow, and potentially increase user engagement. On the other hand, we assessed the effort required to implement the button as 5, considering factors such as development time, testing, and integration with existing systems.

Plotting these values on the Impact Effort Matrix, we determined that the button implementation fell into the "Quick Wins" quadrant. This quadrant represents tasks with a high impact but low effort. With a total score of 40 (8 impact × 5 effort), the project showed promising potential.

Based on the matrix analysis, we decided to move forward with adding the button to the dashboard. The data-driven decision-making process, supported by the Impact Effort Matrix, provided confidence in our choice, as it demonstrated that the project had a significant positive impact relative to the effort required.

As a result of implementing the button, we observed a 20% increase in user engagement with the feature, leading to improved efficiency and satisfaction among our users. This decision validated the effectiveness of the Impact Effort Matrix in guiding our prioritization and resource allocation efforts, helping us make informed choices that positively impact our real estate business.

02 Define the Design System's Purpose and Principles:

Based on the research findings, I collaborated with stakeholders to establish the purpose and guiding principles for the design system. We aimed to create a visually appealing and user-friendly interface that reflected the company's brand identity, while also ensuring accessibility and scalability.

Starting to Map

I have gained valuable experience collaborating with diverse 8 teams, including managers from various departments. By conducting workshops and FigJam brainstorming sessions, I fostered a collaborative environment that accelerated project progress by 68%. Working closely with technical, legal, risk, design, and analyst teams, I ensured alignment and a shared understanding of project goals and requirements from the outset. This collaborative approach enabled us to deliver successful outcomes and create cohesive user experiences.

Looking deeper in the Market

To gain a comprehensive understanding of the current market approaches, we conducted a thorough competitive analysis. By evaluating and comparing various real estate offerings, we identified key differentiating factors for our product. This analysis provided valuable insights that guided our design decisions and enabled us to create a unique and compelling user experience tailored to our target audience.

fig. Figjam session with the team

03 Design System:

Color Palette

I started by creating a color palette that resonated with the company's brand values and evoked the desired emotions in users. I selected a primary color that represented trust and professionalism, along with a complementary set of secondary colors to provide visual depth and variety. The colors were chosen carefully to ensure high contrast and readability, especially for important elements such as call-to-action buttons.

Typography

Next, I focused on typography to establish a consistent and readable text hierarchy across different platforms. After analyzing the company's existing typography choices, I recommended a combination of typefaces that balanced legibility and elegance. I defined styles for headings, subheadings, body text, and other typographic elements to maintain consistency throughout the design system.

Iconography

Icons play a crucial role in enhancing the user experience and aiding in visual communication. I collaborated with the design team to develop a set of icons that aligned with the real estate company's brand and were easily recognizable to users. The icons were designed to be scalable and adaptable across various platforms and screen sizes.

Documentation and Guidelines

To ensure the design system was implemented consistently by the development team, I created comprehensive documentation and guidelines. This included detailed explanations of the color palette, typography usage, and icon implementation. I also provided code snippets, CSS style-sheets, and design templates to facilitate the integration of the design system into the company's digital products.

fig. Color Palette

fig. Typography

fig. Layout

“If we want users to like our software, we should design it to behave like a likeable person: respectful, generous and helpful.”
-Alan Cooper

04 Iteration and Feedback:

Throughout the design process, I regularly sought feedback from stakeholders, managers, and developers. I conducted usability testing sessions throughout the company to validate the effectiveness and user-friendliness of the design system. Based on the feedback received, I made necessary iterations and refinements to improve the system's usability and visual appeal.

Focusing on process

Due to the sensitive nature of the project, I am unable to provide specific details. However, I can share that the user initially had a preconceived solution and a defined flow they wanted to explore. While the solution seemed extensive and straightforward at first, we understood the importance of conducting a deeper investigation. Through user research and iterative design processes, we delved into the underlying user needs and pain points, ensuring that our final solution was well-informed and tailored to meet their requirements effectively.

Being Distinctive

In close collaboration with users and stakeholders, we conducted thorough research to understand their needs and align them with the brand's goals. By conducting a competitive analysis, we identified our unique differentiating factor in the market. Focusing on the overall user flow of the website, we devised a plan to gather necessary information from users. Starting with a single question, we gradually expanded our approach until we had a comprehensive understanding of user requirements. This iterative process allowed us to optimize the user experience and determine the most effective methods for gathering user information.

05 Designs:

06 Results:

The real estate company successfully implemented the design system across their digital products, resulting in several positive outcomes:

- Consistency: The design system ensured a consistent and cohesive user experience across different platforms, enhancing brand recognition and trust.

- Efficiency: The development team experienced increased efficiency in building new features and interfaces, as they could leverage pre-defined design elements from the system.

- User Satisfaction: The improved visual aesthetics, intuitive typography, and clear iconography contributed to an enhanced user experience, resulting in higher user satisfaction and engagement.

- Scalability: The design system's modular nature allowed for easy scalability as the real estate company expanded its digital product offerings.

07 Retrospective:

Getting Contribution from Everyone

By leveraging primary research methods, such as 50+ user interviews and observations, I gained valuable knowledge and insights. To ensure a thorough understanding of the problem at hand and the brand's goals, I facilitated 15+ mini-sessions with developers and the business team. While stakeholders had initial solution ideas, we delved deeper into the problem statement, focusing on user experience mapping to identify pain points, goals, and risks for our customers. This approach helped us develop a suitable and efficient solution that addressed the root cause of the problem.

Tight Deadline

Thriving in a fast-paced environment, I effectively managed multiple work responsibilities and met challenging deadlines. By implementing a streamlined design process and adopting an efficient approach, we ensured the timely delivery of high-quality products. Through effective communication and coordination with cross-functional teams, we successfully navigated time constraints while maintaining a focus on delivering exceptional user experiences.

© 2022. Designed & Developed by Omkar Dixit.