Building a design system to empower collaboration
INTRODUCTION
Socialroots is a worker-owned software cooperative that aims to revolutionize collaboration by creating a data commons. Their innovative app enables individuals and groups to seamlessly network, collaborate, and communicate effectively. By integrating action commitments and updates within the natural flow of conversations, Socialroots empowers users to stay engaged and committed to their objectives.
OVERVIEW
As the beta version of the Socialroots app approached its launch, the need for a comprehensive design system became evident. This case study explores the process of developing a design system for Socialroots, a worker-owned software cooperative. The design system aimed to provide a consistent, shared experience, unify visual solutions, and improve collaboration among teams, particularly designers and developers. Leveraging the power of Figma as a collaborative tool, the design system encompassed guidelines, reusable UI components, and templates to enhance the Socialroots web application. This study highlights the evolution from ad hoc decision-making to a structured approach, enabling scalability, design integrity, and enhanced productivity within the Socialroots ecosystem.
MY ROLE
As the lead designer, I spearheaded the creation of the design system for Socialroots. I guided the conceptualization and development process, ensuring cohesion, scalability, and a consistent user experience across the company’s expanding ecosystem.
UX TEAM
Akinkunmi Oyehan, UX Designer. Naomi Sherry, Product Manager.
Research and Planning
Creating a successful design system for Socialroots required thorough research and planning, inspired by industry-leading brands like Spotify. The aim was to turn the vision into a reality by mapping out all components, from the simplest to the most complex, while establishing optimal design and implementation guidelines.
Recognizing the importance of unifying the user experience (UX) and user interface (UI) across platforms, our team emphasized the need for a design system that could be easily maintained and implemented on both the design and development sides. We needed a design system that could function across various devices without the need for splitting significantly based on devices. To address this challenge, extensive research was conducted to identify the benefits and best practices of unifying UX/UI across devices. The team examined case studies, analyzed industry trends, and explored successful examples from various companies. Drawing inspiration from these findings, we formulated a compelling argument for the advantages of a unified approach, highlighting enhanced brand consistency, improved user experience, and increased efficiency in design and development processes.
INTERVIEW & PLANNING
Furthermore, we conducted internal surveys and interviews to gather insights from the Socialroots stakeholders and team members. This helped us understand their concerns, preferences, and expectations regarding the design system. We encouraged open discussions and collaborative decision-making to ensure that everyone’s voices were heard, fostering a sense of ownership and buy-in from the team.
The research and planning phase laid the foundation for the design system, setting the stage for a cohesive and scalable solution. By drawing inspiration from industry leaders, addressing concerns about split designs, and involving the team in the decision-making process, we established a strong case for the unification of UX/UI across platforms within the Socialroots design system.
A System Architecture
To meet the demands of the constantly evolving app, our design system needed to prioritize flexibility and adaptability. Working closely with the lead developer, we established a generic structure as the foundation of our system. This involved breaking down all elements into their fundamental components, ensuring a modular approach. Crucially, we detached the most common elements, such as typography styles, colors, inputs, and buttons, from any specific context. This approach allowed for easy integration of future changes, ensuring a seamless evolution of the app while maintaining design consistency.
TYPOGRAPHY
We defined our typography styles with generic names instead of specific ones. The type scale contains fourteen (12) font sizes and each expressed in 10 styles each ranging from “extra thin” to “black” of the popular font: Inter. This further allows for easy access to typographical dynamics required of a complex web application, such as Socialroots.
COLOR
The color palette was deconstructed into system colors across multiple tints, providing both flexibility and scalability for future expansion. By centralizing color changes in one location, the ability to instantly update the main color throughout all components was achieved. In addition to system colors, user-selected colors are automatically generated with corresponding tints, ensuring true customization while adhering to the design system’s principles.
SPACING
A well-designed spacing system is a vital element in creating visual harmony and maintaining consistency within a user interface. By defining precise measurements and guidelines for spacing between elements, such as margins and padding, the spacing system ensures optimal readability, balanced compositions, and a pleasing visual experience.
The spatial values of this system are determined in the factor of 3 with 6 being the base; hence 3, 6, 9, 12, 18, 24, 36, and 45.
BUTTON SYSTEM
Having established a foundational system for colors, typography, and spacing, we proceeded to focus on fundamental elements like buttons, iconography, and so on. These served as the essential building blocks for constructing more intricate components and flows.
The defined set of basic rules facilitated the creation of new components, as we could leverage the previously established guidelines. Each added component adhered to specific guidelines, specifications, and behavior, based on the components it was derived from. This streamlined approach ensured consistency and efficiency throughout the design process.
ICONOGRAPHY
There are 480 basic variants of the icons recreated for use. 240 icons are filled icons, while the remaining 240 icons are the solid equivalent of the filled ones. These icons comprise general icons that are commonly used such as message, notifications; and some are special icons that are based on features of the web applications, such as the “send and notify”, “Message now”, “No messages” icons.
Creating Components
Having studied the interfaces and the product guide, it was important to create common components that are mostly used in the products. These components are created with instances or variants in order to cater for varying use cases.
The atomic structures that were worked on are: buttons, forms, checkbox, avatar, sidenav, pageheader, chips (filter) and tooltip.
In the creation of these components, we made sure that each of our components is:
1. Accessible, by creating a strong visual hierarchy and improving usability for everyone. This is visible in components such as buttons, where we have made provision for varying use cases. This is why the buttons come in large and small sizes; which are further created in primary, secondary and tertiary instances as well as in various states: default, hover, and disabled. This is also applicable to components such as field forms.
2. Intuitive which connotes that the components are platform-friendly. For example, the sidenav component is made especially for the desktop platform. Whereas, for the mobile, the equivalent is the top navigation.
As an improvement on the old side navigation, the new approach provides for clarity and inclusion of “send a note” button and repurposed the positioning of the settings icon and profile avatar. This further helps to simplify the visul appeal of the duo-navigation. Also, the new side-nav includes notification badges for all features and “user-tags” in order to identify when there is a notification on any feature or within a group or network, hence called user-tags.
IMAGE: The old side-nav (top) and the new side-nav (bottom)
IMAGE: The new side-nav component for both desktop and mobile
IMAGE: Variations and instances of the side-nav
3. Aesthetics which involves improving on the visual appeal of the components; and as in Jakob’s law, we ensure the web application has a modern visual look. i,e. clean and minimal design, rounded corners, vibrant colors, smooth shadows, filters, avatar, …
Cards and Modals
Cards and modals are broadly used in the web and mobile designs, in order to offer contextual information and make features more discoverable. Based on our research and conversations with users and stakeholders, we then created cards and modals:
1. that can help provide an entire list of options sufficiently and help users make deliberate decisions (as shown below);
2. that displays content and actions on a single topic inside a container. This helps users to further access multiple features easily, with an upgrade on the visuals which makes it much more appealing.
3. that helps to provide more information about a content, user or group. In this case, cards are being used to give more detail on groups or subgroups – expressing stats, providing actions and presenting the users who are leaders and/or members of the group or subgroup. (See images below)
IMAGE: Old card modal vs New card modal for Groups
