Boost product quality & development speed

Flybits was looking to move to a new development framework, React. The development team was feeling the strain of inconsistent implementation of common functions, and the design team was unhappy with the product aesthetics and behaviour. I saw this as an opportunity to improve the product quality while easing implementation efforts and kick started this initiative.

Atomic design power

I encouraged the use of atomic design principles to provide the team with a base component library built in React, stylized to Flybits, with guidelines. I lead the team to identify what components and functions existed in the platform to help inform stakeholders of the importance of the initiative while giving us a starting point of what to work on.

I lead “hunting sessions” with the design team and others to find and catalogue the different components and behaviours. From those sessions, we reviewed the outcome with the front end team and began sketching.

Challenges

The biggest challenge we faced was getting approval for dedicated dev resources to build out the initial component library. We navigated this issue by compiling a document outlining the severity of the application inconsistencies and current dev challenges. A company design system was a solution to those problems.

Outcome

I worked with the team to establish design system patterns such as our application color palette, spacing values, base components i.e., buttons, input fields, and more complex components such as interactive tables. We worked closely with the front end dev team as we went through the design process. To document the system and make the development and design info accessible, we created an internal company website for the now known “Flight” design system (our CEO is an aviation fanatic). These patterns and guidelines are being expanded upon and used to this day. We had a storybook website for the devs and fully functional Figma component library for designers using Figma’s latest auto-layout tech. We saw an uptick in the websites visual continuity and an increase in development time for basic features.