In 2018, KFH bank launched the first digital personal financing app in Kuwait and Bahrain.
We redesigned their retail app, extended the feature set, and created a complete design system that generated close to 375 screens for us within record time.
It was made possible by continuous improvement of processes, passion for learning, and the trust of our management..
KFH Jazeel wanted to be more than a place where people store money and do transactions. They wanted to embed themselves in society in a mutually beneficial way. This desire resulted in a "sub-app" which was named Loyalty.
The core segment of the app was students, shoppers, and personal fitness enthusiasts. It offered guaranteed internships for local youth, amazing discounts on healthcare, and lucrative access to local and small merchants.
The project had tight deadlines from the get-go, we had to make sure that the design was easy to develop and easier to understand. For this, we kept the design as close to native apps as possible. We did lose points for creativity but the gain in usability made it all worth it. The app felt familiar and we did retain core brand elements of Jazeel.
We started with understanding the current visual element of the Jazeel brand in order to generate a style guide.
We weren't following the design system approach as of yet since there was no requirement or need for it but we did start following atomic design methodology for organizing our symbols.
Next Stop, Retail App
Happy with the progress, the bank's team asked for some design directions for the retail app. We presented and in the end, due to a balance of usability and developmental ease, they decided to take the loyalty approach for the complete retail app.
Again, the deadlines were unforgiving to an extent so we got back to work and this is where I started to notice the problems in our processes.
Emails, Calls, Notes, Threads, Chats & CCing
We were communicating through emails and the threads were getting longer. The team was sending over PDFs and then getting the feedback over email. While this worked fine for the loyalty, it wasn't the right for the gigantic retail app.
As you can see above, the information becomes incredibly hard to track and follow. I discussed the matter with my manager and introduced the following solution.
It took us away from long chain of email threads and was much more efficient for managing communication and feedback loops.
Our internal design process also required updation as we needed tight collaboration and work with even tighter deadlines.
I introduced an alternate workflow which took collaboration away from XD+Email+Slack and towards Sketch+Invision+Abstract.
Abstract took care of the versioning. Every designer could have the updated files on any part of the project anytime regardless of who is working on it. We were also aware of what our teammates were working on and I could verify the work without interrupting their flow.
Abstract had a clean way of presenting all the changes that have happened in the file in every commit. Documentation features meant that changes could be easily tracked.
The Cost of Switching
It worth noting that we did ponder over versioning with Adobe XD using google drive but ultimately decided that it was best to simply switch. Sketch was the industry standard and it had a vast community of designers and extremely handy plugins which made our work a lot easier. It wasn't an easy decision to switch as this meant a cost of ~6K USD just to get started. But the productivity difference made it worth the risk.
Making ROI Positive; Design System!
While we were excited about the new hardware and softwares. I mean it when I say that we pushed the throttle to the max when I shifted everyone to the design system. Remember Loyalty app from earlier? I took the components I made earlier and created a small prototype of design system which we started using. I taught the team how to use a design system to generate screens and how to update and extend it. We were making full use of abstract while doing this:
At first, I monitored actively when designers interacted with design system since I didn't want it to mess up while we were pushing deliveries and it would have been way too much of a risk. But I slowly let the reigns go loose and we were flying like a unicorn 🦄. The designers even implemented the arabic version of design system on their own with minimal help from my side.
Documentating Design System!
I started some minor documentation of how to use the system. It is helpful for new designers to get to know the system and get upto speed without having to figure everything out by themselves. Second use is for developers who want to familiarize themselves with the design system being used:
Design : Connected!
The outcome was astonishingly positive. Not only the new processes were better in efficiency, they were also refreshing to use. Apart from issues with Abstract regarding diverging branches, the whole experience was smooth and seemless.