Leezair iOS App
Improving on our MVP, with a greater utilisation of native iOS components, a refined UI and improved user flows for dealing with various searching and purchasing scenarios
PLATFORM
iOS
COMPANY
Leezair.com
Creating a more native iOS experience
THE BACKGROUND
Dealing with design debt
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.
The very un-native v2 of the Leezair iOS App
Overhauling the custom components and aesthetics
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.
MY FAVOURITE IOS DOCUMENTATION
PERSONALISATION
Using tech to do work for the customer
- We wanted to introduce an onboarding process that allowed us to learn about the new user's tastes, so we could provide them with suggestions they may actually like, once they entered the app, even if they hadn't signed up.
- If the onboarding was skipped, but they had allowed us access to thier location, we planned to show popular activities in their area.
- We toyed with several layers of data to prompt for and store for recommendations; categories and sub categories, people, budget
CATALOG & SEARCH
Making it easy to find & browse activities
- Structure: We divided the interface visually to match our conceptual structure for search and filtering.
- Search: We considered search to be when the customer was entering "what", "where", and "when" they wanted.
- Filters: Everything else we viewed as how those results could be filtered, and that was put in its own page.
- Call to action: to use the cta label to provide some valuable information, we inserted the real-time information of the next session for that activity. In case people were browsing activities nearby and needed to fit something into their schedule.
ACTIVITY DETAIL & WISHLIST
Making it easy to find & browse activities
Activity Detail Page
- Key info: The page needed to neatly display the key information customers were looking for when deciding to book.
- Next session: We made it easy to see when the next session for the activity would be and how many spots were left.
- Cover the bases: We began to improve on the default fields, to cover more areas important to customers. Whilst presenting it in an easily processable way.
- Cancellation: The cancellation policy was added to the page, due to being requested by customers, since it could be a dealbreaker for them when looking to book.
CHECKOUT
Making it easy to find & browse activities
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
