Armut Design System

Creating a design system is not an overnight task or a timebound project. It is also never truly finished due to its ever-evolving nature and the need for ongoing maintenance.

Designing a stable and efficient Design System needed cross-functional collaboration. Not only Constantly evolving, our Design System went through many challenges, though scaling it through a constant feedback loop helped minimize them.

By providing a strong foundation and ensuring regular feedback, our Design System helped improve the efficiency and velocity with which our designer built delightful products for our users.

The Pear

The word Armut means “pear” in Turkish: the brand name comes from a local saying about getting work done easily. Since its conception Armut become an amusing and iconic name in Turkey’s growing digital space. While the logo went through a few iterations to increase its readability and ease of use on different media, the core of it never changed. The pear brand mark is drawn through combination of elementary shapes, while the custom logotype design was inspired by the beutiful geometries of Century Gothic and the little quirks of Raleway.

Colors

Along with typography and spacing, colors are the foundations of Armut design system. To simplify the decision process during UI design we tried to stick with a minimum amount of shades and tone. Green is for main call to actions, greys for texts and creating visual hierarchy. Supporting colors are used to add charm to illustrations, drag the attention to secondary information, or highlight destructive buttons.

Tailored icons

Our icon library is divded into 3 sizes. We have a set of small icons to be used inlne accompanying labels and buttons; a medium set for menus and messages; a big set to add some color and charm to modals.

Reliable components

Designing components for 4 product teams means not only creating pixel perfect elements, but making sure that those elements are flexible and and resilient to adapt to different use cases.

Connecting with the users

We use illustration mostly to celebrate with the user on core a-ha moments, and to lighten up empty states by adding a little charm to moments of friction.

These drawings are meant to support the product without shouting for attention, to humanize the message without distracting from it.

Photography

A core virtue in the field In the service providng is ability to inspire trust. At the end of the day finding a new plumber, painter or cleaning lady means opening the door of your home to a complete stranger. Because of this the imagery of Armut/Homerun focus on real life pictures, starring confident professionals, happy customers and, possibly, empathetic interactions between them. With an ever growing list of services to display, we needed some guidelines to help maintaining a consistent look and feel across the platform.

Design sytem contribution process

In a highly aligned, loosely coupled organization is important to document contributions and have defined processes to ensure that stakeholders are aware of what’s going on.

A design system contribution model ensures that our design system can evolve without misunderstanding and inconsistencies between teams.

By treating the design system as a product and sharing ownership across teams, we enabled our team to design and build new features faster.