Habitat Design System

Overview

Habitat Design System (DS) was created to support the growth of UXhouse, an online community for User Experience (UX) designers and practitioners formed during the pandemic. The system was designed to expand the community’s digital presence, enabling members to create, publish, and share written and video content. It transformed a simple website into a robust platform for showcasing collective knowledge, fostering collaboration, and broadening accessibility to the UX industry.

As the founder of UXhouse, I led this year-long project in collaboration with a volunteer team of designers and developers. Many team members were students eager for real-world experience, and I provided mentorship, approved designs, coded components, and managed the repository. To ensure the team’s success, I also funded access to essential tools for design and development.

The project utilized Figma for design and documentation, TypeScript with Gatsby for development, GitHub for code management, and Netlify for deployment.

Problem

The UXhouse website could not support the community’s growing needs:

• Content Management System (CMS): The absence of a CMS limited the ability to publish written and video content effectively.
• Scalability: Without essential components, the site struggled to adapt to the community’s evolving goals.
• Credibility: The lack of a robust publishing platform risked UXhouse being overshadowed by established platforms like Medium or social media.

Building Habitat DS introduced additional challenges:

• The team consisted of volunteers, resulting in uneven progress as contributors worked in their spare time.
• Many team members were new to design systems, requiring guidance and hands-on mentorship.

Solution

Habitat DS addressed these challenges by creating a platform that prioritized functionality, scalability, and collaboration:

• CMS Integration: Netlify CMS was implemented to enable efficient content creation and management, integrated seamlessly with the existing deployment pipeline.
• Content-Focused Components: Components for article pages, author profiles, and video showcases were designed to highlight community expertise and contributions.
• Collaborative Workflow:
  • Wireframes established a foundation for the design team to build on.
  • Iterative design reviews ensured the system aligned with project goals.
  • Development was supported by clear documentation and task handoffs.

One key innovation was building Habitat DS as a stand-alone platform. This approach gave UXhouse complete control over how content was presented, freeing the community from reliance on third-party tools like Medium while demonstrating UX principles through the platform itself.
 

Impact

The Habitat Design System brought lasting value to UXhouse:

• Skill Development: Volunteer contributors gained practical experience, advancing their careers and education.
• Community Growth: The system elevated UXhouse’s brand, positioning it as a professional organization and expanding its potential reach.
• Legacy: Although development halted before launch due to shifting priorities, Habitat DS became a model for collaboration and innovation within the community.

Conclusion

Leading Habitat DS was a pivotal experience. It was my first opportunity to build a design system from the ground up and to lead a multidisciplinary team. I gained insight into balancing user-centered design with practical constraints, mentoring contributors, and creating systems that enable others to succeed.

The project taught me the importance of empathy and flexibility when working with volunteers and the value of collaboration in achieving ambitious goals. While Habitat DS didn’t launch, its creation strengthened the UXhouse community and demonstrated the impact of shared effort.

This experience reinforced my belief that meaningful work is about more than outcomes—it’s about the process, the connections made, and the skills gained along the way. Habitat DS laid the groundwork for my approach to design systems and team leadership, lessons I carry into every project I undertake.