Gentle Density Toolbox

Design time frame 
6 Months
2023-2024
Kalamuna
Partner
Small Housing BC
Role
Lead UI, UX Design
Brand Design









Overview The Gentle Density Toolbox was created to address a growing need among planners, industry professionals, and citizen developers for reliable, accessible, and actionable guidance on gentle-density housing.  Rather than navigating fragmented resources across multiple organizations, users needed a centralized hub that could support faster decision-making, improve public understanding, and ultimately accelerate the adoption of gentle-density solutions across BC.

Through early discovery, we uncovered a consistent pattern: while a substantial amount of high-quality material already existed, it was difficult to find, hard to compare, and rarely designed with non-experts in mind. This insight shaped the direction of the product, prioritizing information architecture, clarity, and usability as foundational pillars.


Objectives
  1. Create a unified, searchable resource hub that reduces duplication, improves discoverability, and supports more efficient planning workflows.
  2. Enable cross-organization collaboration by providing shared tools, templates, and community-driven contributions.
  3. Improve access to technical and educational content so both professionals and non-experts can confidently explore gentle-density options.
  4. Support broader housing availability in BC by lowering the barrier to understanding, evaluating, and implementing small-scale housing solutions.








PROJECT SCOPE

Research

  • Stakeholder and SME interviews
  • Discovery questionnaire
  • Analytics and content ecosystem review
  • User segmentation and goal definition
  • Comprehensive content audit
Information Architecture

  • Content mapping
  • Information architecture redesign
  • Low-fidelity wireframes to validate structure
Design

  • High-fidelity wireframes and interaction patterns
  • Interactive prototypes
  • Visual identity and UI system
  • Design system foundations



My Role As the Lead Designer, I guided the project from discovery through delivery. I partnered closely with the PM, client and developers to align on requirements, prioritize scope, and translate complex policy and planning concepts into accessible, actionable UI. I led client-facing workshops, facilitated design decisions across teams, and ensured the final experience balanced user needs with technical and budget constraints (WordPress + custom mapping plugin).


Approach to Validation
Given limited access to quantitative testing at this stage, I established a structured qualitative validation framework to ensure rigor and reduce bias. This allowed us to make confident product decisions grounded in real user perspectives.

Our validation approach included:
  • Thematic analysis from stakeholder workshops and interviews
  • Card-sorting and moderated IA validation 
  • Usability reviews during prototype walkthroughs
  • Cross-functional evaluation with policy, engineering, and community partners

By synthesizing recurring insights across these qualitative methods we were able to validate the core information architecture, terminology, and interaction flows even without formal quantitative testing.




UX RESEARCH 






Interview  analysisInterviews with planners related professional and client(stakeholders), clarified core needs, pain points, and opportunities that shaped the Gentle Density Toolbox.

1. User Needs & Goals

Planners, the primary audience, want to work more efficiently and collaboratively while supporting better community engagement.
  • Information Retrieval: They need fast ways to search, sort, and filter resources, and quickly see new or updated legislation.
  • Community & Collaboration: A community forum is essential for networking and knowledge sharing.
  • Public Education: Planners value clear engagement materials that explain gentle density and housing options to residents.
  •  Secondary Audiences: Industry actors and citizen developers mainly seek sample home designs and introductory information.

2.Pain Points

Planners lack shared resources, face isolated communication environments, struggle with public opposition, and need clearer ways to visualize housing options without costly consultants.

3. Insights & Opportunities

A searchable resource hub can save time, a dedicated forum can foster community, visual tools can support understanding, and the platform can establish SHBC as a trusted authority.

4. Design Requirement

Build strong search and filtering, introduce a Planners’ Forum, streamline content contribution with templates, and offer visual resources with clear usage disclaimers.




Desk Research with Comprehensive Material Review
  • Desk Research: Reviewed all client-provided case studies, reports, and supporting materials to understand the full scope of content.
  • Content Audit: Assessed the client’s existing website to identify gaps, determine what could be repurposed, and outline areas requiring new development.







Defining Guiding Principles
and User Type and  Goals
Based on our research:

  • Identified Key User Types and Goals: Determined who the primary users were, planners, architects, builders, policy makers, citizen developers, etc. and defined what each user group needed from the site. This was crucial for creating a user-centered design.

  • Established Guiding Principles: Developed from our research findings to shape our decision-making process and design choices, ensuring alignment with the client's mission and goals.

       





INFORMATION ARCHITECTURE





Simultaneous Design
and Information Architecture
To 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





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.











Map and filters 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.



    High-fidelity wireframes 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


    This project highlighted the impact of designing clear, practical tools that fit directly into planners’ day-to-day workflows. By aligning early on around user needs and constraints, we were able to focus the product on what mattered most: helping planners find reliable information quickly, communicate more clearly with communities, and move projects forward with greater confidence.

    Even within tight timelines and technical boundaries, close collaboration with the client, PM, and developers enabled us to deliver a cohesive, scalable platform that strengthens community engagement and improves access to meaningful resources, while also creating a foundation that future teams can build on.