The team at education startup Future Learn used atomic design as the backbone of establishing their new pattern library.
I especially love how they shared why the first stab at a pattern library didn’t work:
Finding specific information was often time-consuming, as the elements were listed in one (very!) long list. We didn’t apply a methodology to the way we organised the styleguide, so there wasn’t a specific pattern on how we create individual parts and how all the parts fit together.
We saw the styleguide mainly as a front end tool, so designers weren’t involved in creating it. As a result, a lot of the terminology used was different, so the styleguide wasn’t helping to facilitate a shared understanding across the team. It also meant that design rationale wasn’t documented in the styleguide – it didn’t explain why the elements were the way they were and didn’t provide guidance on how and when to use them.
There wasn’t a lot of live code either, so it got out of date quickly. Very soon we had mismatches between UI elements on the platform and their documented versions. Contrary to our expectations, it didn’t serve as a reliable reference for fixing front end bugs. It also wasn’t effective at helping us to maintain and improve consistent use of elements on the platform.
As the FutureLearn site was growing, the need for a better reference point for designers and developers became more apparent. So we started working on the pattern library. And this time, designers and developers were both involved in the project.
They also shared their process on how they rolled up their sleeves and made this all happen, which involved creating an interface inventory of their existing interface.
I’m so thrilled to see more teams using atomic design to create and maintain their interface design systems. Great work Alla Kholmatova and team!