The creation of the Design System right from ground zero
Boubyan Bank, one of the emerging banks in Kuwait and GCC, decided to scale their design by setting a Design System that would help them to work better, faster and larger. The Global Product Owner, who I worked with during my years in UniCredit, approached me and asked me to re-do what I previously did in the other project: strategize, create and maintain a DS.
CLIENT
Boubyan Bank
2015-2019
MY ROLE
Design System Lead - Assistant Design Manager
@Boubyan Bank
TEAM
UI Designer - Shailvi Shah
UI Designer - Taha Fakhruddin
Design System Lead
Boubyan Bank had the need, not only to set a DS, but also to harmonize the product across the different channels & platforms, and to speed up the design delivery.
Together with Shailvi Shah and Taha Fakhruddin - UI designers, we mapped, enhanced and created all the components that defined the DS while also setting a new Agile design process.
We went from +300 components down t0 only 50
3 channels, 3 platforms
1 Design System
The work process, creating a design system
Understand the existing design - The very first step consisted in understanding the design that was already done by other colleagues: patterns, interaction design, behaviors, experience, etc. across all the channels and platforms.
Collect and map all the components - Before starting the hard work, I had to hire another designer because the project was bold, that’s when Shailvi came in the picture. Together with her, we mapped all the existing components in one big frame to then discover all the inconsistencies.
Components Entropy - Oil painting on canvas
Give estimation of time and costs: After having set up a nice team and having gathered all the needed material, I drafted what had to be presented to the CEO: how long it would take, how much money it would cost, and most of all why it was important to set up a DS. We got the OK, and that’s when we were finally able to start with the Design System.
Fix the components - During each sprint, we dedicated 20% of the time to fix the components that we previously mapped. To do so, we created a collaboration with the developers, something that didn’t happen much before.
Create new components - The need for new components came together with the creation of new features and flows. We obviously tried to use as much as possible what we already had to avoid an overload of unnecessary components in our DS.
& more, more, more…
Me in Kuwait City at Boubyan Bank’s offices, trying to convince not-convinced developer
Good luck at the squads..
I left Boubyan Bank for a big opportunity in Dubai. As Design team, we delivered a full set of principles, rules, components, processes.
Yesterday 09/07 I discovered on Linkedin that the component library which I helped to develop has been used. Happy to have helped the fantastic people.
Some picture of the bank and of my colleagues