As a growing company with a higher demand for development delivery, we needed a solution to increase the speed at which we could develop features while maintaining a consistent user interface and user experience. A design system catered to Alkami was the answer. Her name became "Iris".
This was a massive undertaking that had a huge research phase at the beginning. We researched all kinds of other design systems to capture what kind of scope we were looking at. We looked into Shopify, Microsoft's Fluent, Trello's Nachos, Google's Material design, Atlassian's design system and many more.
After doing the research and getting an understanding of the scope of the project, we set off on creating plans for architecture, design, development and implementation. I myself partnered with another designer to create the branding and design around Iris.
We carefully crafted each component within Iris so they had a consistent look and feel and made it easy for developers to understand how components worked together to build a page.
There were many sections included in the design system from the basic pages that listed color swatches that the developers could copy and paste from, to the typography and layout pages.
There were also sections we felt added a lot of value to our specific product that maybe weren't in other design systems we looked at. One such example was our "How and When" callouts. I created these sections on how and when to use certain components to alleviate a lot of the pain of having to decide if you should use a checkbox or a radio button. This again, helps fast track development and keeps the experience consistent for end users.
We also wanted to be sure and include a "playground" for developers so they could play with the various states and decorators that came with certain components. This way when referring to a design, they could easily recreate the component and copy the code directly from the playground.
We made it easy for developers to copy/paste code directly out of Iris to ensure the code remained clean and consistent. I know developers like to structure their code differently so this helped code become recognizable and easy to change no matter which developer was viewing it.
We launched Iris at the beginning of this year and have been steadily adding components and refining our voice and tone. Iris has improved our workflows and delivery by a massive margin. It was a big undertaking, but a wonderful project to be a part of.
