I led a team over the past year expanding our existing design system to include our iOS and Android native apps. Primary goal was to focus on utilizing as many native components and patterns defined by Apple's Human Interface Guidelines (HIG) or Google's Material Guidelines. Citi's consumer product line is extensive covering everything from banking and credit cards to mortgage and investments so each part of the system needed to be flexible and incorporate the needs of each lines of business.

The existing size of the Citi app for iOS was getting out of control. We have too many custom components and patterns being introduced by different product teams. The app is no longer cohesive and with over 70% of our customers using an iPhone, we cannot afford to ignore it. The previous style guide is limited and doesn't help the teams use a consistent approach with so little detail.

In some cases, I realized the native iOS approach simply wouldn't serve the needs of every Citi product. As an example, as a bank we create a LOT with forms from making payments, transferring money, setting alerts, you get the picture. Our existing approach to text fields was all over the place and the HIG didn't offer an ideal option. Instead, I chose a custom approach and also provided an in-depth but standardized format to each part of the system spelling out the types, architecture, user interactions, usage, and specs. This standard approach allowed our UX and UI designers to quickly ramp up having no doubt how to take full advantage of the design system.

Going into this endeavor, with the attempt to stay as native as possible, I was surprised when I would discover some native iOS components that did not meet AA WCAG standards. Everything we produce at Citi must meet this level of compliance, so in some cases we had to take a common native component and customize it enough to meet the AA standard. One great example is the switch.

We have finished building out the entire iOS design system including all the components and patterns our design teams need to produce their screens and flows. The dev team is currently coding up the library of common components which will reduce the app size and drive consistency throughout while meeting our required ADA compliance. We had previously just finished doing the same for our Android app which was released early 2019.