We helped Springboard build 10 design components in 5 weeks
Highlights
- The Rangle and Springboard teams built 10 new design system components in five weeks
- Using Radius, Rangle’s design system accelerator, we accelerated decision-making to enable alignment, knowledge sharing and standardization of Springboard’s UI kit
- Upskilling Springboard’s design team will now set them up for long-term ownership and success
About Springboard
Springboard is an online learning platform on a mission to transform one million lives through education by 2030. They prepare students for the tech industry’s most in-demand careers with comprehensive, mentor-led programs in software engineering, data science, cybersecurity, UI/UX design, and more.
The opportunity
Prior to partnering with us, Springboard worked with an external design agency on a rebrand for their marketing website. Once the rebrand was completed, they wanted to take the new page designs and create reusable components for their UI kit for their other products and platforms.
Springboard partnered with us to help build several core components from their static site to include in their UI kit, to train and upskill their team on design system best practices, and to learn how to do the work so that their team of designers feel confident continuing the work after the engagement.
Inception
During the inception phase, which lasted about a week, our team conducted stakeholder interviews to understand how the design system would be used, dependencies on other initiatives, and constraints. In parallel, we started reviewing the designs created by the external design agency and broke them down into components. Lastly, we looked at the work that was started by the Springboard team. Here is what we discovered:
- New requirements arising from unifying their product line to use one design system, such as the need for white labeling.
- Understanding that some products’ UX would be redesigned, and the need to account for that during the design system build.
- Designs created by the external design agency were not necessarily built with reusability in mind, and were not all accessible.
- The Springboard design team did a great job gathering core tokens. This allowed us to focus more on building components together.
- Design system knowledge across Springboard was varied and upskilling the team was critical to success.
- How Springboard likes to work, and what coaching / upskilling methods resonated the most.
With these findings in mind, our teams quickly adapted our ways of working to meet Springboard designers where they were. We still conducted a quick audit of the token layer, ensuring everything was in order, and made simple recommendations. We then aligned with Springboard on the highest priority components to build, and presented POVs on how to proceed with next steps knowing that the design and flow for some products were unclear. The aim was to maximize progress, while minimizing throwaway work.
Building the design system
Using resources from Radius, Rangle’s design system accelerator, we showcased demos of what an end-to-end design system would look like. This helped us significantly speed up the decision-making around Figma setup and file structure. We hosted multiple workshops in quick succession, sharing best practices both around the what, and the how, enabling us to start building components right away.
Rangle is a strong believer in learning by doing, and to this effect, we proceeded to work in 3 steps:
Step 1: Building the first component
By the end of the second week, our designers built the first component. As they were building it, they hosted multiple learning sessions covering how the component was being built, the logic behind building it this way, and which questions to address in order to build it properly. Springboard designers were exposed to the importance of conducting audits and research, considering one-off designs, how to tackle accessibility concerns, and why certain documentation made sense to include in the hand-off specifications for developers.
Step 2: Learning by doing
Following the learning sessions, Springboard designers put their knowledge to use and collaborated to create their first component. They went at a pace that made sense for them, jumped into multiple working sessions with our team, gathered feedback, and gained new insights. By the end of this step, Springboard designers felt confident about the process and were looking forward to practicing more. In the meantime, our team continued building more components and delivering value to Springboard.
Step 3: Scaling
At this stage, each designer took on additional components, and the Springboard team transitioned from learning to collaborating and building with the Rangle team, asking questions, debating approaches, and learning how to grow and maintain their design system. By the end of this stage, the Springboard team was confident in their knowledge to build a solid foundation, how to make decisions around the design system (and how to research if more clarity was needed), how to prioritize and build components, as well as insights around governance, adoption and workflows.
Our engagement with Springboard was design-focused, and as we progressed, we surfaced the risk around designing components without validation from the development team, who would then build these components. We aligned with Springboard to build two components and were able to receive feedback around token naming and structure. By making slight adjustments, designers were able to greatly improve communication with the development team. They were also able to validate that the approach we took to build components and document hand-off specification was solid.
The outcome
By successfully upskilling Springboard’s design team, and by using Radius, we accelerated decision-making to enable alignment, knowledge sharing and standardization of the Springboard design system. Springboard achieved their goal to create ten components in five weeks and up-skilled their design team setting them up for long term success.
As this was a design-only focused engagement, we pointed out the risk of not directly collaborating with development on a design system and provided recommendations for UX and product. We also guided Springboard to build their components embracing the uncertainty around future product designs.
With this approach Rangle maximized the value of the design system delivered and partnered with Springboard helping them on their mission to transform one million lives through education by 2030.