Juan Vaamonde
Juan Vaamonde
Leezair-app-preview.png

Leezair iOS App

Leezair iOS App

leezair-ios-app-flow1.png
 
 

The previous version of the iOS app not only offered no extra functionality over the website to warrant the commitment of downloading it, but had a lot of issues with the interface itself. From usage of multiple icon sets, to inconsistent application of colour, to incorrect sizing and spacing of iOS components.

For this version, I studied the iOS documentation around app aesthetics and components in greater depth to ensure that what I provided our engineering team in terms of design specs, was as close to what Apple recommended as possible, whilst improving the execution of our brand's evolved visual language.

The colour scheme was simplified, as the previous version had been utilising our website's colour palette. Blue was now left for specifically components that were interactive, and the brand's main orange gradient being used specifically for backgrounds and containers.

We were building this app using the Ionic framework, and their icon set was based on the Apple iOS icons, so I dumped our convoluted mix of custom made icons as well as multiple sets, for this one unifying set. The interface spacing benefitted greatly from this.

Typography was an area I knew I needed to improve on from the previous version. Once more, I chose to aim to reduce customisation and get as close to the recommended iOS typography as possible, theorising that it would be like starting with a blank slate, and in future versions I'd be able to branch out. Our main font, Sofia Pro, being available through Adobe Typekit, proved problematic to use for the app, and so I chose to use Apple's San Francisco, to continue my new philosophy to streamline the customisation as much as I could.

Whenever I needed to redo a component from the previous version, or create a new component, I discussed with the engineering team which native Ionic component would make sense to use.

Sometimes I encountered surprising responses, like when I discovered that Ionic had no equivalent component for the iOS stepper, and a segment component was the closest thing, but would need tweaking.