.webp)
Baselane is a platform providing tools and resources to landlords for financial management. The company sought to modernize and standardize its design processes to ensure a seamless and cohesive user experience across its product offerings.
USA, Canada
Design system
Product design
.webp)
Inconsistent designs across components and platforms.
Missing components and documentation, leading to inefficiencies and slowing down workflows.
Poor integration between the design system and the live product, requiring developers to detach components during implementation.
Outdated visual styles that did not align with modern design standards or Baselane's evolving brand identity.
Lack of scalability, making it difficult to adapt the system to the product’s growth and increasing complexity.
.webp)
.webp)
Build a comprehensive, scalable, and user-centered design system.
Align the design system with Baselane’s brand identity and product needs.
Enhance cross-platform responsiveness to support various device types.
Create detailed documentation to streamline onboarding, collaboration, and maintenance.
Facilitate rapid iterations and updates, enabling future rebranding and product growth.
.webp)
.webp)
The project was completed over a span of six months, with an additional two months dedicated to refinement and final adjustments. The team adopted a structured and methodical approach to ensure the successful creation of a comprehensive design system
.webp)
We conducted a thorough audit of Baselane’s existing design components, uncovering inconsistencies, identifying gaps, and highlighting areas for improvement. This process provided valuable insights into the challenges and opportunities within the current system.
Collaboration with Baselane’s internal team - product managers, product designers, and developers was critical during this phase. Together, we refined the product's visual direction to align with Baselane's brand identity, user needs, and strategic goals.
.webp)
Building on the findings from the discovery phase, the team focused on establishing the foundational elements of the design system. This involved defining essential design principles such as typography, color palettes, and spacing to create a cohesive visual framework.
Reusable components, including buttons, forms, navigation elements, and tables, were meticulously designed to ensure consistency and adaptability across the platform.
These scalable components provided a strong foundation for seamless integration into the product and allowed for efficient updates in the future.
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
A critical aspect of the project was ensuring the design system’s responsiveness across all devices. The team implemented a grid system supporting up to 15 breakpoints, accommodating everything from TV-sized screens to mobile devices.
Special attention was given to ensuring that even complex components, such as tables and widgets, adapted intuitively to varying resolutions. Components and patterns were also designed with mobile and tablet adaptations in mind to prioritize cross-platform usability, supporting Baselane's goal of building an accessible and user-friendly platform.
.webp)
Following the creation of foundational elements and components, the team entered an intensive testing phase to ensure their usability and effectiveness in real-world scenarios. Each component underwent rigorous evaluation for functionality and consistency across diverse product contexts, prioritizing seamless integration with Baselane's workflows. This process included validating designs with real users and product stakeholders to align with their practical needs and expectations. Feedback collected during testing informed iterative refinements, improving the design system's robustness and adaptability.
To ensure smooth adoption across the organization, we created a comprehensive documentation. This resource detailed design principles, usage guidelines, and implementation instructions, empowering designers and developers to easily adopt, maintain, and expand the system in alignment with Baselane’s strategic objectives.
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
The new design system delivered measurable improvements for Baselane:
Designers and developers reported significantly faster workflows due to reusable components and clear guidelines, reducing time spent on repetitive tasks.
The system standardized design across all product areas, eliminating inconsistencies and providing a cohesive user experience.
The implementation of a robust grid system and mobile adaptations ensured a seamless experience across devices, boosting accessibility and user satisfaction.
The design system supported Baselane's growth by allowing for easy updates and expansions. For example, a company-wide rebranding was completed in just two days by updating foundational styles, demonstrating the system's flexibility.
New designers and developers were able to quickly understand and contribute to the product using the documentation and well-structured components.
.webp)
The Baselane design system transformed the company’s design and development processes, addressing critical inefficiencies and paving the way for future growth. By focusing on scalability, usability, and cross-platform compatibility, the design system enabled Baselane to stay competitive in the dynamic real estate finance market and provided a solid foundation for long-term success.
