Lubn Design Kit
Design System for Lubn
Context:
4 months
Design Internship
Skills:
Design System
4 months
Design Internship
Skills:
Design System
Overview:
Lubn is a Seattle-based startup that is developing the world’s first Smart Keybox technology for autonomous property management to enable a secure and easy solution to managing properties from afar. Lubn’s smart keybox is paired with an application to allow property managers to manage their devices is available in iOS, Android, and Web platforms.
Role:
I led and built Lubn’s design system from defining the universal system for the foundation that underlies all of Lubn’s design system, building out their component library for Web desktop and mobile apps, to working with engineers to ensure implementation success. I collaborated directly with the designer (also Lubn’s founder) and another developer along the way to ensure code efficiency and the system’s scalability as the product evolves.
Lubn is a Seattle-based startup that is developing the world’s first Smart Keybox technology for autonomous property management to enable a secure and easy solution to managing properties from afar. Lubn’s smart keybox is paired with an application to allow property managers to manage their devices is available in iOS, Android, and Web platforms.
Role:
I led and built Lubn’s design system from defining the universal system for the foundation that underlies all of Lubn’s design system, building out their component library for Web desktop and mobile apps, to working with engineers to ensure implementation success. I collaborated directly with the designer (also Lubn’s founder) and another developer along the way to ensure code efficiency and the system’s scalability as the product evolves.
01. Understanding the Problem
The early-stage startup was starting to scale but had limited resources, which called for the need of a design system to improve the team’s workflow efficiency.
Even though the team is still relatively small, as the product grew with the company rolling out their application on iOS, Android, Web app, it was hard to maintain product consistency with no single source of truth. The designer and engineer spent a lot of time and effort reinventing the wheel instead of leveraging a universal design system across the company.
My goal was clear: to build a design system to help the team create consistent and accessible applications more quickly.
Even though the team is still relatively small, as the product grew with the company rolling out their application on iOS, Android, Web app, it was hard to maintain product consistency with no single source of truth. The designer and engineer spent a lot of time and effort reinventing the wheel instead of leveraging a universal design system across the company.
My goal was clear: to build a design system to help the team create consistent and accessible applications more quickly.
01. Visual Audit
An in-depth analysis of Lubn’s current branding and existing screens to recognize patterns and needs.
Instead of continuing to reinvent the wheel, I gathered all of Lubn’s key screens and took an in-depth look at what the team has already created to recognize existing style and patterns. This helped me understand what components are needed and which of them to prioritize based on usage.
In addition, I gathered marketing images of Lubn to understand the company’s brand voice. After several discussions with the founder, we landed on “professional, cool, yet friendly.”
Instead of continuing to reinvent the wheel, I gathered all of Lubn’s key screens and took an in-depth look at what the team has already created to recognize existing style and patterns. This helped me understand what components are needed and which of them to prioritize based on usage.
In addition, I gathered marketing images of Lubn to understand the company’s brand voice. After several discussions with the founder, we landed on “professional, cool, yet friendly.”
02. Foundation & Design Tokens
Building the essential foundation of a robust design system with coding flexibility in mind.
After lots of explorations and testing colors for accesibility. I’ve came up with a primary palette, an extended palette, and a second extended palette for accessibility.
The primary color palette which is used in the files and codes is named based on a functional approach, these select colors from the actual extended palette with the colors. This is to ensure coding efficiency and flexibility with supporting two different color palettes. To foster for more inclusivity since it is hard to meet different needs, a second extended palette with higher contrast and lightness levels is developed. Design tokens used in codes remain the same but maps to different palettes depending on who the user is.
After lots of explorations and testing colors for accesibility. I’ve came up with a primary palette, an extended palette, and a second extended palette for accessibility.
The primary color palette which is used in the files and codes is named based on a functional approach, these select colors from the actual extended palette with the colors. This is to ensure coding efficiency and flexibility with supporting two different color palettes. To foster for more inclusivity since it is hard to meet different needs, a second extended palette with higher contrast and lightness levels is developed. Design tokens used in codes remain the same but maps to different palettes depending on who the user is.
To ensure color are consistently used, I’ve outlined the different usages of the color combination and semantic usages (showing a section of it below).
Overlays are created using the primary color as a basis, but treated as a different material from colors because of their different goals, behaviors, and usages.
The typography system uses an adaptive type scale which reduces the effort in coding as well. Each type is linked to the design token which maps to the accompanying value for each device.
03. Building the Component Library
I stress clean organization and file naming in my work to build complex components effectively and efficiently.
Once foundations are set, I jumped into building the components for web app size XS and L devices. These two libraries are prioritized for the team’s next series of push for designs on these.
Components are organized from atomic to molecular levels left to right, and top to bottom. My naming structure follows an organized format. Component names includes in the name of the final component which this molecule will eventually be nested in. The name reflects all of which it is nested in to provide visibility into how it is built. Molecular level components that are less functional are kept private to the file to reduce confusion from design team when using the library.
Once foundations are set, I jumped into building the components for web app size XS and L devices. These two libraries are prioritized for the team’s next series of push for designs on these.
Components are organized from atomic to molecular levels left to right, and top to bottom. My naming structure follows an organized format. Component names includes in the name of the final component which this molecule will eventually be nested in. The name reflects all of which it is nested in to provide visibility into how it is built. Molecular level components that are less functional are kept private to the file to reduce confusion from design team when using the library.
The designer using the component will have visibility into what makes up the component on their file as well even though the component is made up of private nested components not available directly on the library panel. This helps with communication in case the team has any ideas for other structures to improve the experience of using the components, while reducing confusion when looking for the right components from the library.
This is especially effective for complex components like the navigation drawer when trying to understand the building blocks of it.
This is especially effective for complex components like the navigation drawer when trying to understand the building blocks of it.
Constantly on the lookout to learn new ways to improve the design system.
Figma released the beta test for its interactive component feature around the same time when I started working on the design system at Lubn. I saw an opportunity to apply interactive components to improve the user experience of the design system which I was working on, and applied for the beta program. Luckily, I was chosen to recieve approval, and began experimenting with it. The result were positively recieved- not only did it helped to minimize the number of prototype links and screens across design working files, but also allow designers to focus more on higher product-level challenges instead of atomic level details (like states) when building screens to ideate user flows.
Figma released the beta test for its interactive component feature around the same time when I started working on the design system at Lubn. I saw an opportunity to apply interactive components to improve the user experience of the design system which I was working on, and applied for the beta program. Luckily, I was chosen to recieve approval, and began experimenting with it. The result were positively recieved- not only did it helped to minimize the number of prototype links and screens across design working files, but also allow designers to focus more on higher product-level challenges instead of atomic level details (like states) when building screens to ideate user flows.
04. Deliverables & Outcome
A brand new design system for Lubn - Lubn Design Kit
The final deliverable on my end is the design system’s foundation and two component libraries for Web app size large and extra small devices (providing a peek of part of the components I work on below).
Even though full implementation on the development side was still under the way when I rolled off, Lubn Design Kit was already enabling for smoother collaboration between design and development and helped to speed up the communivation and production process for the team.
The final deliverable on my end is the design system’s foundation and two component libraries for Web app size large and extra small devices (providing a peek of part of the components I work on below).
Even though full implementation on the development side was still under the way when I rolled off, Lubn Design Kit was already enabling for smoother collaboration between design and development and helped to speed up the communivation and production process for the team.
05. Learnings
Communication and involving engineering team early on is the key.
I communicated with the other designer and engineer on the team throughout the entire process to understand how to build the system better. At the end of my internship, the developer had started to implement the design system. Because he was involved early on, it was a was a smooth process as I created the design system with code efficiency in mind. Working with the designer also helped me anticipate how the system will be used. These really helped to bring designer and engineer closer, which is always a big win!
I communicated with the other designer and engineer on the team throughout the entire process to understand how to build the system better. At the end of my internship, the developer had started to implement the design system. Because he was involved early on, it was a was a smooth process as I created the design system with code efficiency in mind. Working with the designer also helped me anticipate how the system will be used. These really helped to bring designer and engineer closer, which is always a big win!