Design System for a Design Team of One: Would this be a Overkill or Secret Weapon?
INTRODUCTION
Pilot is a Social Travel Planner designed to help travellers with planning, organizing, and sharing their trips with fellow travellers.
Why did we started this?
Since it was an early-stage startup, they had hired part-time or freelance designers to develop the product concept. I was brought on board when the concept gained recognition and the company received funding from accelerators to establish a market presence.
We collaborated with a branding designer to conduct market research and develop comprehensive brand guidelines. I was then tasked with implementing these guidelines across the product, and I saw this as an ideal opportunity to initiate the creation of our own design system.
TIMELINE
May 2022 — Nov 2023
THE TEAM
1 Product designer, Cross functional team for feedback
MY ROLEs
Project Lead, Product design, User Research.
My role
Wearing multiple hats to achieve product success
Working within resource constraints, I tackled various responsibilities for the holistic development of the product.
🚨 SPOILER ALERT!
These updates contributed to a notable 18% increase in customer satisfaction metrics (based on PMF surveys) within just one year. Additionally, we established a more solid brand positioning within the travel industry and gained recognition in various press outlets and startup competitions.
〰️〰️
Process
PROBLEM SPACE
Where are we at?
Here’s little overview what Pilot looked like when I first joined the team in 2022. As you can see in the image, the product didn’t have branding and concept, I was tasked to revamp the visual with collaborating with freelance brand designer.
Breakdowns of the Problem space
1
Inconsistent design across the app and page
The design lacked consistency due to the company's reliance on multiple part-time or freelance designers during the initial stages of product concept development.
2
Not optimized for responsive web
Despite the increasing number of mobile users, the current product the product didn’t cater the mobile user experience.
3
No strong brand identity
In the crowded digital landscape, a strong brand identity helps a product stand out from the competition. It creates a unique visual and emotional appeal that resonates with users, making the product memorable and easily recognizable.
DEFINING SUCCESS
What's ideal design system for our team?
Although I was the sole designer at the time, both the product and the team were expected to grow. I anticipated that implementing a design system would facilitate smoother communication and collaboration within the team as it expanded. I believed it was more beneficial to start building the design system early on, rather than waiting until the product became more complex, as this would prevent inconsistencies and streamline future design and development efforts.
1
Better collaboration and communication between product team
By establishing guidelines for various component states, the engineering handoff process became significantly smoother. We're now able to reuse the same components, eliminating the need for engineers to build new elements repeatedly. Additionally, designers can efficiently make a single update that impacts the entire product where these components are utilized.
2
Make easily product scaleable and speed up the design process
I aimed to establish the design system as the single source of truth, ensuring it encompassed comprehensive information, standards, and guidelines.
3
Give chance to non-designer stakeholders to explore their product ideas
The content and level of detail were tailored to the primary audience, whether it was designers, developers, or other stakeholders.
DESIGN PROCESS
Product Rebranding and Design system?
As we were a small product team, we had to strategically plan what to work on to maximize impact. In addition to the establishing design system for cohesive and iterative design process, we wanted our non-designer stakeholders to explore their ideas freely, we had to target wider range of users for the design system.
Information architecture
Understanding the product structure
I started with mapping out the page structure of the current app. After laying down the structure of the app, I defined ‘Functionality’ needed on each page to find the components that I can merge.
BRanding component
Adopting new branding concept for the product
Brand identity influences the overall user experience. A cohesive visual language, intuitive navigation, and consistent interactions create a seamless and enjoyable experience that reinforces the brand's values and personality. We collaborated with a branding designer to conduct market research and develop comprehensive brand guidelines.
Merging
Grouping and merging component, then redesigned them with new branding concept
I collected all the existing components used within the app and started organizing them to develop our design system structure. I followed the principles of Atomic Design, but instead of building from scratch with atoms, I deconstructed the existing components into their smaller elements. This allowed me to reassemble them into reusable and combinable components, aligning with the atomic design methodology.
To ensure the components aligned with the best UX practices, I frequently referenced a website called Mobbin to research and compare different approaches for specific functionalities and interactions before finalizing my design decisions.
When it came to interactions, I went beyond component design and focused on tailoring interactions to the specific device in use.
For example, on desktop, I accounted for mouse interactions with features like hover states, and utilized smaller buttons. Conversely, on mobile, where users primarily interact with their fingers, I prioritized larger buttons for better touch targeting.
Additionally, I incorporated mobile-specific gestures like tap, long press, and two-finger zoom, while also considering how the keyboard would impact the screen layout when activated. By accounting for these device-specific nuances, I developed comprehensive interaction guidelines that optimized the user experience across different platforms.
Accessibility
Most importantly, I had to validate that all newly designed components were functional and accessible and also visually pleasing. I rigorously tested them against WCAG to ensure they met our Double-A compliance standard. Additionally, I conducted A/B testing whenever updates were made to evaluate their effectiveness and impact on user experience.
DOCUMENTATION
Organize components that’s easy to reference
By establishing guidelines for various component states, the engineering handoff process became significantly smoother. We're now able to reuse the same components, eliminating the need for engineers to build new elements repeatedly. Additionally, designers can efficiently make a single update that impacts the entire product where these components are utilized.
Making guidelines more clear with growing team
We started as a web app, but was not optimized for smaller screens sizes. We’ve noticed that travel planners plan their trip with computer, but they wanted to access to the trip plan from their phone when they are at the destination. To cater larger audience and continue developing more features, setting the responsive rules was crucial.
MAINTENANCE
Managing Design system is on-going project
At the time, approximately 70% of our resources were allocated to designing new features, while the remaining 30% was dedicated to maintenance tasks. To streamline the process, I collaborated with the project manager to incorporate smaller design updates into the engineers' existing feature development workflow. This approach aimed to mitigate the risk associated with sudden, large-scale design changes and to minimize context switching for engineers, allowing them to focus on their primary tasks.
Updating design components as we go
In 2022, when I began building the design system, I initially organized elements using color swatches, font styles, and a variety of components in different states. As Figma released new features like variables and dev mode, I made a continuous effort to keep the system up-to-date with the latest technologies. While it was a time-consuming process and required significant learning alongside my product and feature design responsibilities, I recognized the importance of regular maintenance to avoid a daunting backlog of updates later on.
Understanding Design team operation as a Team lead
For designers, having established rules provided a better understanding of business objectives and how to translate them into the product. For instance, our primary user acquisition channel was friend invites, and to secure further investment and growth, we needed to continuously increase that number.
CHALLENGES
Naming convention and building the foundation of variables
There were two main challenges during this process. First, as the a design team of one, I lacked colleagues to discuss naming conventions and better way to communicate and reference the guideline. I had to rely on self-directed research and learning to overcome this hurdle. Second, establishing the initial variable structure with primitives, secondaries, and so on was difficult. Especially, as changes to primitives could have cascading effects on other variables, making it tricky to establish a stable foundation early on.
🏆 THE IMPACTS
¹ 18% improved
‘Customer satisfaction metrics’ from 55% to 73%(PMF survey).
² 46 times growth
on 'User base' from 500 to 23,000 within two years.
These updates contributed to a notable 20% increase in customer satisfaction metrics (based on PMF surveys) within just one year. Additionally, we established a more solid brand positioning within the travel industry and gained recognition in various press outlets and startup competitions.
REFLECTION 👏🏻
Building design system from the scratch not only helped me with design documentation but also better understand communication between cross functional teams.
In an early-stage startup environment, product ideas could come from anyone, including non-designers like the CEO, marketers, and engineers. Recognizing this, I actively fostered cross-team collaboration to ensure diverse perspectives were considered and integrated into the product development process.
Design system is not only for designers!
By establishing guidelines for various component states, the engineering handoff process became significantly smoother. We're now able to reuse the same components, eliminating the need for engineers to build new elements repeatedly. Additionally, designers can efficiently make a single update that impacts the entire product where these components are utilized.
