In the last quarter, we have started a plan to completely redesign the user interface (UI) of the Cloud Academy website, and we used this opportunity to introduce a fast, reliable, and highly reusable interface that covers the majority of cases. Since we are using React as the main library for building our frontend applications, its principles are the best approach for building small and easy components for building more complex interfaces.
At Cloud Academy, we have some frontend apps with a lot of components created using principles of Atomic Design. At first, we thought it was the best choice for us, but in these three years we noticed some drawbacks:
Initial atoms or molecules didn’t reflect the concept of atom and molecule. Adding props and styles every time we touched a common component interface broke that rule and we didn’t have common rules or guidelines when editing them — if I needed a new boolean prop I would simply add it and set the inverse value as default where that atom is used.
Different pages or site sections had similar designs, but we incorrectly used two components or more. For example, we had different tab components!
We didn’t have common design guidelines, and buttons shapes were different among different pages (different font sizes for label and icons, different colors, and behaviors).
Without having an updated list of what we had, it was difficult to easily reuse them. We didn’t have a visual list of what we had, so the Design Team and our internal stakeholders used to propose different versions of the same components every time (and often we discovered it only after designs were approved).
We initially considered and evaluated various UI toolkits, but they were too vague or complex for us, so we decided to start from scratch and create one which fits