Under the Hood: The Hatch Apps Design System
A few companies have championed the usage of design systems— Airbnb, Atlassian, E-Trade and Shopify were some of the first, and have done it in a superb way by designing scalable systems that fit into several business cases. At Hatch Apps, we decided not to reinvent the wheel with the creation of our design system; instead, we chose to build a better wheel. We’ve streamlined our components so that our platform, design and technical components follow the same cadence, which allows us to move much faster than traditional software development firms.
When we were first developing the Hatch Apps Design System, we established that each component of a mobile user interface (buttons, content areas, images, headers) must be able to build upon the next (quite literally, like building blocks). That way, we could group related components by common use case to create bundles for our users.
Bundles are groups of components pieced together in a unique way to create specific functionality for the end user of a mobile app. Take the examples below: a profile page, detailed content page, and content library, all of which have been created with different components from the Hatch Apps Design System.
The marvelous thing about having a design system in place is that even when we come across use cases we haven’t seen before, we can add them to our repository as a new ‘bundle’. This cuts down on the time we spend pushing pixels or creating shapes, allowing us instead to focus on more important tasks like building for usability and business logic.
The real power of our design system first became apparent when I started designing our customers’ apps. What once took 8 hours can now be done in an hour, allowing our team to spend more time perfecting the details of a customer’s app, and less time building the foundational app from scratch (i.e. reinventing the wheel each time).
On occasion, we’ll encounter a completely new use case that doesn’t fit our existing design system. When this happens, our design team has to create a bespoke screen to accommodate the new scenario – but as the new design ultimately gets absorbed into the design system, encountering these new use cases merely helps up expand our library and grow the capabilities of our solution. Over time, this will enable us to respond faster and achieve a new level of efficiency in design for our users.
Check out these awesome resources:
Hatch Apps Design System: Shows our component library that we use to design our customer’s apps.
The Hatch Apps Showcase: Shows our most popular feature bundles and apps that our customers build.