Gentle Density Toolbox
Time frame
6 Months2023-2024
Kalamuna
Partner
Small Housing BC
Role
Lead UI, UX Design
Brand Design
Project Introduction
This online platform is a comprehensive, WordPress-based repository designed to address the housing affordability crisis in British Columbia. Aimed at city planners, polici makers, architects, builders, citizen developers, and related professionals, the toolbox offers a wealth of resources including sample housing designs, detailed case studies, municipal policies and regulations, educational materials, and practical how-to guides.
Our primary goal was to create a user-friendly and informative platform that promotes and facilitates the development of "gentle density" housing solutions—innovative approaches that increase residential density.
BackgroundCanada is facing a critical affordable housing crisis, with British Columbia experiencing some of the most severe challenges. The COVID-19 pandemic exacerbated existing issues, leading to skyrocketing home prices that have put home ownership out of reach for many Canadians.
Key points include:
- Vancouver's median home price: Approximately $1.2 million
- Median household income in Vancouver: Around $90,000
- Global ranking: Vancouver is the third least affordable housing market worldwide, after Hong Kong and Sydney
- Similar trends in cities like Victoria and Kelowna, with home prices exceeding $1 million
Small Housing BC is a organization dedicated to mitigating this crisis by advocating for "gentle density" housing solutions. This involves creating small-scale, multi-unit homes—like laneway houses, duplexes, and secondary suites—that blend seamlessly into existing neighborhoods.
Project StatementProfessionals such as planners, industry stakeholders, and citizen developers can easily discover, share, and access resources on gentle density from both within and beyond British Columbia. They can engage in community forums, participate in meaningful discussions, learn about Small Housing BC and the Gentle Density Network, and recognize us as a trusted authority in the field.
UX RESEARCH
Initiating Research and StrategyWe kicked off the Gentle Density Toolbox project by engaging with key stakeholders from the client side to understand their vision and objectives. To broaden our perspective:
- Interviewed Stakeholders: Conducted interviews with various stakeholders to gather diverse insights and understand their specific needs and expectations.
- Interviewed a Local Planner: Spoke with a planner in British Columbia about their experience with small housing to gain industry insights and practical perspectives.
- Analyzed Comparable Websites: Reviewed websites from regions facing similar housing challenges—such as New Zealand, Hong Kong, and California—to identify features and designs that the client preferred. This helped us understand best practices and innovative solutions implemented elsewhere.
Comprehensive Material ReviewReviewed Client Materials: Studied all provided case studies, reports, and supplementary information to fully grasp the scope and depth of the content.
Conducted a Content Audit: Evaluated the resources on the client's main website to understand existing content, identify gaps, and determine what could be repurposed or needed to be developed anew.
Defining Guiding Principles
and User TypesBased on our research:
- Established Guiding Principles: Developed from our interview findings to shape our decision-making process and design choices, ensuring alignment with the client's mission and goals.
- Identified Key User Types and Goals: Determined who the primary users were—planners, architects, builders, citizen developers, etc.—and defined what each user group needed from the site. This was crucial for creating a user-centered design.
INFORMATION ARCHITECTURE
Simultaneous Design
and Information ArchitectureTo efficiently manage the project's extensive content:
- Organized Extensive Content: Assisted the client in structuring the large volume of content they wanted on the site, ensuring it was logically organized and easily accessible.
- Managed Complex Taxonomy:
- Created a detailed spreadsheet linking each piece of content to its target audience and relevant categories.
- Engaged in in-depth discussions with the client to understand the nuances of the content and how different user types would interact with it.
Low Fidelity Wireframes
After completing the initial UX research and planning, we created a site map to outline the key pages for the Minimum Viable Product (MVP). We then developed user flows and various task flows to visualize the user experience from a bird's-eye view.
A significant challenge we faced was implementing the interactive map with multiple filters. Designing a seamless interface that allowed users to effortlessly navigate the map and apply various filters required careful planning and technical support.
Brand design & Logo development
To create a cohesive and visually appealing brand for the Gentle Density Toolbox, we focused on evoking a sense of calm and community. Inspired by the website's design, we used soft colors, clean typography, and engaging visuals to create an inviting atmosphere that resonates with users.
Design Approach
Bright Color Palette: Chose energetic shades of yellow and blue to symbolize growth and sustainability, fostering a tranquil and welcoming environment.
Clean Typography: Selected modern, easy-to-read fonts (Manrope) that enhance readability without overpowering the content.
Relatable Imagery: Incorporated visuals of small homes and community scenes to connect users with the concept of gentle density housing.
Logo CreationI developed multiple logo concepts featuring elements like low-rise buildings and houses to represent gentle density. Collaborating closely with the client, we refined the designs based on their feedback. Ultimately, we delivered a logo that aligns with the website's aesthetic and effectively communicates the project's mission.
Mock Ups and Prototypes
Hi-fidelity wireframes
We build hi-fidelity wireframes. We focused on building wireframe for each task to check the flow and at the same time try to make entire system cohesive.
Design System
Additionally, we created a consistent and systematic design style guide. This style guide improved communication with the development team and provided the design team with the opportunity to refine the design system with greater attention to detail.
Conclusion
&Reflection
With Live Plan Be+, people with chronic pain can coordinate an effective healthcare plan specific to their needs. Patients have easy access to support during times of pain, no longer experiencing limitations of time, location, or availability of in-person programs. Patients become more engaged in their treatments, understanding what they need help with and where to receive it. As chronic pain is a persistent condition, Live Plan Be+ stands as a digital health solution ready whenever a patient needs it, encouraging them to make healthy decisions for their well-being.