A mobile app is meant to be a living product that is maintained and improved upon over time. As designers, it is easy to forget about the long term aspect of an app which can lead to us designing elements that work well on their own, but don’t contribute to the overall usability and experience of the product. I was recently able to experience this first hand and it helped me understand the value of component libraries.

I was brought onto a project shortly after its initial launch to help with future releases and maintenance. Each section of the app had been designed by a different person which meant that the overall experience felt detached from itself. There were many elements in the UI, ranging from buttons to hero banners, that were functionally identical, but looked completely different depending on where you were in the app. Although it is sometimes beneficial to stylize a certain interaction or section in a way where it stands out from other areas of the app, in general, these discrepancies can add a lot of overhead to the on-going design and development efforts and make it harder to use.

As it was, the product would be difficult to maintain over time, so I took the initiative to start creating a component library that would help unify the experience and reduce design and development effort going forward.

I started by creating a library of components using the Craft plugin for Sketch. I created consistent styles for headers, buttons, text elements, text fields, navigation, and other commonly used elements in this app. While building out the new library, I wanted to ensure that each component was appropriately styled for iOS and Android to help each app feel more familiar to people who use each platform. This process helped reduce development time and expensive customization of UI elements that were not contributing to the app’s usability or someone’s experience with the product.

Using components also helped the design team build more consistent interactions throughout the app and reduce the time needed to build out new screens. Component design is like using Legos to build out a screen; no need to re-build an element from scratch for each screen. Although it took time upfront to build out each component, it greatly sped up our design process and allowed us to spend more time exploring features, iterating on flows, and making a better app.

Using Craft made it easy to share the same components with all designers on the project and ensure that they were always using the latest designs. Craft can automatically update linked components so any changes made to the component library were carried throughout all files. It took some trial and error to learn how to use the tool in the most efficient way, but I was able to share my learnings with other teams to make it easier to use the tool on new projects.

This experience helped me realize how powerful component based design can be. It has quickly become a practice that both our mobile development team and I advocate for at the start of any project. Not only does component based design help create more user friendly apps, it helps reduce time spent designing or building out screens and can make it easier to add new features down the road. It has also helped improved communication between the UX and development teams while reducing necessary documentation. The benefits are well worth the change in process and can help create a strong foundation for a maintainable product.