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 the next 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.
Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Selected Work