Being a designer at GitBook
As the 16th employee and the second designer to join GitBook in 2021, I had the opportunity to work on a small team within a startup environment, which required me to wear many hats.
From designing features, to implementing them. From creating a design system from scratch to contribute to the branding strategy. And from defining the design principles and foundations to grow our design team, to contribute to the vision and direction of the product.
Product Design and Frontend Engineering
2021
GitBook is a documentation tool to create, edit and share technical knowledge - from product docs, to internal knowledge bases and APIs.
I joined GitBook when the team was in the process of building a new version of the product. During my initial months at the company, most of my time and contributions were dedicated to bringing this project to life.
Alongside a team consisting of 2 designers and 8 engineers, I worked on defining, and building the next iteration of the product. We closely listened to our users' feedback and successfully transformed GitBook into a more visually compelling and intuitive platform with refined features.
Below some examples of the work that was done:
Spine is GitBookâs design system, built with the aim of providing designers and engineers the necessary tools to keep evolving the product while giving it a new, consistent, and modern look and feel.
Spine was created when GitBook was building a new version of the product. With the entire team dedicated to this significant project, finding time and resources for progressing with the design system was challenging at times.
However, we recognized that it was in fact a great moment to build our design system and proceeded with creating Spine, which ultimately was key for shaping GitBook's new design language.
1. The initial phase involved conducting an in-depth audit to identify existing reusable components and design patterns already in use within GitBook.
2. Concurrently with the audit, the definition of design principles started. This process was characterized by collaborative discussions within the small design team. Each member contributed their insights, resulting in principles that resonated with our values, user needs, and organizational goals.
3. Following the audit, the focus shifted towards identifying, replacing, and eliminating duplicate components and patterns.
4. The next step involved the iterative crafting and refinement of design elements. These iterations were guided by our recently established design principles, prioritizing consistency and scalability across the platform.
5. As the design elements took shape, documentation became essential. To document our design decisions, we used Figma at first while exploring other options. You will see some examples of Spine's documentation below.
6. And last but not least, the handover and implementation of Spine.
To showcase the design system's appearance and provide a comprehensive overview, I am presenting the foundational elements of Color and the documentation of the Button component.
The journey of redesigning GitBook and developing Spine yielded several impactful outcomes that transformed both the product and the design processes.
The refined features and consistent design language brought a unified look and feel which made it easier for everyone to use GitBook and increased user satisfaction.
Spine streamlined the design and development processes at GitBook by providing designers and engineers with standardized components and guidelines.
Finally, the development of Spine and the redesign of GitBook contributed to the establishment of a design-centric culture within the organization. Design principles, documentation, and iterative design processes became integral parts of GitBook's workflow, emphasizing the importance of design in shaping the product's success.