Scope
Design Ops
Deliverables
Design Tokens in Flutter, Visual Language, UI Library
Platforms
Web
One of the common problems product teams face is the disparity between design and production. Or in simple terms, “This is not how it was designed!”
At Kippa, I took it upon myself to investigate the underlying issues and test workflows to solve them.
I had my colleagues from the Mobile Engineering team and my dearest designers collaborate to make this a success. Although we haven’t really built a Design System yet, we’re inspired by the results we’re seeing at the moment.
It’s arguably a necessity to include “you should be a detailed and design-led developer” somewhere in a Job Ad page for a Web Frontend Engineer or Flutter Engineer. Why? Most of the time, designs on Figma and AdobeXD aren’t accurately implemented.
When I joined the team, the designs had a lot of inconsistencies. I had to own the visual direction of the app and communicate it to my newly onboarded teammates. This was a problem because features and improvements were shipped quickly so design documentation wasn’t prioritized.
Need I say that the mobile engineers also had a fair share of problems? Duplicate versions of the same components were found in the code base. Imagine seeing two versions of the same Login button when onboarding into an app!
It became apparent to me that we needed to:
I must say, it’s not easy to communicate the need for these solutions to our stockholders. In our case, they didn’t necessarily see it as a priority at the moment, even though they saw the need
for it.
I understood though. We had a lot of customer requests around modifying or adding features which we had to attend to, to keep our customers happy.
I had to make time for it, working with two awesome Mobile Developers — Ebube and Jude — in the weekends. To keep us aligned and motivated, I had to shape the project with boundaries and milestones.