The Co-operative Bank mobile app is proud to be fully accessible by providing responsive font sizes and screen reader. To ensure the Co-op customised icons look great no matter the font size iOS users are on, I have decided to turn the icons into native iOS symbols with the iOS developer.
The icons in the app do not scale up or down according to the native iOS font size which means that some text on the screen might break into several lines when the text is scaled up or down from the default iOS font size.
To turn the existing icons into SF symbols, I had to use a SF symbol creator plug-in in Figma. But I soon realised each icon has multiple errors when attempted to turn into SF symbols. These errors include: Layers and stroke issue and naming issue. To solve the layering and stroke issue, I had to use another pathway plug-in to adjust each icon's path so that it can bypass the stroke issue in the SF symbol convertor plug-in.
In the end with a little bit of workaround, I have successfully turned all icons in the Co-op banking app into native iOS SF symbols that scale up/ down according to user's font settings. With the icons turned into SF symbols, there are opportunities in the future to even animate them with different layers, which was part of the converted SF symbol benefits! Although not that many customer might benefit from this feature, I am proud to say that we are doing rights by our customers, by keeping our app accessible and inclusive.
