Case Study

Component System and Storybook

Challenge

For their Multi-Vendor Sales Platform, a market leader in IT Design-to-Dstribution Business Process Services Company was looking for digital transformation. Our goal was to rethink everything from the ground up, putting an emphasis on new ideas and the customer's perspective/user centric design (UX). The purpose of our work was to not only generate a new layout, but also implement it as code and establish a component library that the core development team could use with little effort.

• Increase engineering velocity
• Increase UI/UX consistency across the user journey.
• Reduce the risk of bugs and errors.
• Seamless integration at the core dev team end.

The first step in reaching this goal was to find out what problems the front-end development group was having. Through analysis and feedback from stakeholder, we were able to find the weak spots in the app we have now.

Solution

As soon as the transformative design met their brand requirements, we started looking for ways to turn it into front-end components that could be reused. As the sprint started, the client's core development team was hard at work on the essential features, and our goal was to provide the front end components that they could quickly include on their end.

To achieve this, we took a systematic approach and broke down the design into smaller components, so that each could be easily reused and maintained.

• Base elements and styles come from the rudiments of composition.
• Combining base elements to make templates.
• Use tools to help expand and connect elements.
• Tailor the code, resources, and tools into one solution.
• Put it all together to make an application.

We thought about taking a more traditional approach to designing the component system, but we also wanted to make sure that developers worked quickly, that teams communicated well, that components could be reused, and that documentation was good.

As we progressed through the project, we were able to convert the design into working code and build a component system/library that could be easily used by the core development team. We gave Angular and React JS components, and for React, we shared code that was both functional and based on classes. All the components were handed over to the core development team by Storybook, as they help provide:

• Improves developer productivity: Storybook allows developers to work on individual components in isolation, without having to run the entire application. This speeds up development and makes it easier to catch bugs early.
• Facilitates collaboration: Storybook allows designers and developers to work together more effectively by providing a shared component library that everyone can access and use.
• Increases component reusability: By building and testing components in isolation, Storybook makes it easier to reuse those components across different parts of the application, which can save development time and reduce code duplication.
• Improves component documentation: Storybook allows developers to add documentation and annotations to their components, which makes it easier for other team members to understand how to use them.
• Enhanced testing: Storybook allows you to test your component in different states, which helps you to ensure that your component is working correctly and improve accessibility.

Success Factors

The Angular components that were built can be configured on their own, and they also come with a library of similar HTML components. What really stands out is the guided animation that users can use to make things easier on their brains.

• The core development team was able to use and integrate the component with ease.
• Increased engineering velocity
• Componets aided in bringing UI/UX consistency across the user journey, reducing the learning curve for end users.
• Because each component was tested separately, the development team received an error-free product.
• Seamless integration at the core dev team end.