how eve was born

it all started while designing the interface of Flow-e

What was eve anyway?

Eve provides basic user interface elements, flexbox based responsive interfaces, pure CSS components with best practice coding and a consistent design system.

A link to eve's homepage

It all started while designing the interface of flow-e. I decided to break the interface into components and add them to a sketch library, so it will be much faster to reuse them for future features, and most importantly more consistent and everything would be on sync. After finishing the basic interface and starting working on other minor features, I showed my partner in crime "the front-end developer of Flow-e", the process I pass through and how I re-use components, and how when I change it in one place "using symbols in sketch" it just changes everywhere. We discussed how this can happen on the front-end side of the product "design systems were a hot topic and everyone was talking about them" he also believed that this would make his work faster, easier and way more consistent.

A WOW! impression gif

The face of my partner talking about design systems // via giphy

We pitched our idea to management and told them that we believe that this is an important matter, doing it now while the product is still in its early stages will pay us a lot in the future, moreover will make the UI Architecture of the product a lot better and easier to scale. At the time management believed that we need to work on other MVP's and that a Design System for the product will not give back the desired outcome and what early adopters were expecting from our product.

Going a little bit back, Flow-e is a part of parent company Kanbanize, a project management software that further revolutionizes the Kanban and Lean concepts so that you can keep an eye on all your projects at once. That how Flow-e was born, out of our desire to apply Lean to the inbox. As students of Lean and power users of email, we couldn’t help but see the connection between the methodology we were using to run our organization and the development of our original product, Kanbanize, and the challenges we faced when it came to our inbox.

I'm mentioning Kanbanize because as a product it's way larger than Flow-e, and while working on it we understood that Design Systems are important and if you try to scale your product without using a consistent system you will end up with what I like to call an SUI "Spaghetti User Interface" from both visual and code basis.

Swimming in spaghetti gif

What SUI looks like // via giphy

Going back to the management and our pitch plus our poor experience in negotiating with them. We decided to take the hard way, build it on our own with our free time. From my side things were clear, I had the components, all that I needed to do is to split them into categories and make sure what are the basis that needs to be done. We were so motivated to work on this one because we believed it will have a great outcome on the product. After working for several weeks on creating and developing the components and testing how they would work together we decided to implement it in flow-e, it was a young product still and if things went bananas it was easy to revert everything without creating any catastrophes, the plan now is to experiment and if we fail to fail as fast as possible.

Oh, God! Where are all the men anymore? My father, Tyler Prentiss, never asked, "Is this okay? Is this okay?" You know what I'm saying, Mark? He just did what needed to be done.

Meryl Streep as Eleanor Shaw

Meryl Streep scene from The Manchurian Candidate gif

Meryl Streep as Eleanor Shaw in The Manchurian Candidate 2004 // via giphy

Oh my!

Things worked as smooth as it should be, that's all because of our understanding of the product and its needs and the quality code that my partner in crime wrote. The code was a damn poetry. You would enjoy looking at the SASS he wrote and the way he orchestrated everything. I learned a lot about breaking SASS files just by looking at his code and trying to figure out what he did, the way he broke down things into variables and the way he mapped them together using loops, the whole thing was a beauty and worked like a charm.

Crying from happiness impression gif

Looking at the beauty he wrote // via giphy

Moment of truth.

We synced with management about what we did, what we created so far and the process of implementing it in flow-e, including how our process for future features would look like and what outcome this brought to the product. They understood, actually, they didn't only understand what we did, they finally understood what a design system is, and decided to implement eve also into Kanbanize.

While implementing Eve into Kanbanize we deleted almost 15,000 lines of code! Are you following? Fifteen thousand lines of code, thousands!

Mind blow impression gif

Oh lele majko! // via giphy

The outcome of eve on Kanbanize was higher than we thought.

Better performance, consistency, faster implementation for new features, easier improvement of the older ones, also an eye opener for the need of better architecture for the front-end base of the product.

I learned a lot while creating and implementing Eve into both products. I now have a better overview of UI Architecture and the importance of Front-end knowledge on my work as a Designer. I was in this phase of improving my Front-end knowledge at the time and this helped me a lot in writing code more fluently, that all thanks for my partner in crime and Kanbanize Family for adopting the idea.

Brad Pitt dropping a kiss gif

Thank you Kanbanize! // via giphy