How and why we rebuilt YPlan’s Navigation from the bottom up
Observation of customer interaction patterns over the last 8 months and what we did with them.
What were the issues?
1. Ticket discovery
Customers were having a hard time finding their tickets. When a customer purchases a ticket in the app it’s printed right in front of them. On first glance this seems clear however if a customer has more than one event coming up it is hidden behind ‘view all’ tap which finally takes them to their full list of tickets. (see flow below) Ticket list discovery is always a topic customer service are having to handle and has been a topic regualry cropping up in store reviews.
2. Perception that you can’t book on YPlan, just browse
Not all users are aware that they can buy tickets directly on YPlan. A significant number of people use the app purely for discovery. Our hypothesis was that if we expose the ‘tickets’ section we could convert active users into customers.
Old iOS ticket flow
Old Android ticket flow
3. Dude, where is my wishlist?
We know that customers who have located and use the ‘Wishlist’ convert very well, so there is a huge potential to increase revenue by better exposing this section of the app.
The Wishlist was located at the very bottom of the home feed on both iOS & Android, we know that only a small percentage of users actually reach the bottom of this list view. Also visually the tile looks like any other uses case, such as ‘Go Today’ or ‘Tomorrow’. Our hypothesis is that exposing the wishlist will increase bookings.
How to find the old iOS Wishlist section
What else could be touched?
During the navigation discovery we had the opportunity to look at other aspects of the app that were indirectly affected by this change.
Search
Search was represented by a small icon in the top right corner of the screen. Knowing from the data that searched events convert extremely well, we wanted to use this opportunity to increase its exposure.
Sign up rate
By exposing all the key sections in the app during the navigation reshuffle we had the opportunity to revisit our ….. screens and use it to emphasise incentives to join the YPlan family. This will enable us to catch users who have skipped sign up during on-boarding.
Visually coherence between platforms
Our iOS and Android platforms have been developing at different rates. We saw this as an opportunity to bring them closer together under the same brand guidelines.
Design Challenges & Possible Pitfalls
It was important to early on and work out what we actually wanted to achieve and how we were going to do this.
- Create a new navigational system with minimal changes to UI on current screens. This was to reduce rework, it was important to remember we weren’t re-designing the app, just the navigation.
- Make sure the design hierarchy is correct for what we are trying to achieve. What sections are we going to expose and how will the design do this?
- Create a clear sense of orientation, making sure each section easily and instantly distinguishable.
- Keeping the designs native. Doing this would enable customers to feel at ease on their platform and reduce confusion around app navigation and usability.
- Optimising for first time users. Educates the new users on what every section of our app does and how they can use it.
Tab Bar Design Pattern
For us this statement couldn’t be more in sync with what we were trying to achieve. Having a relatively small amount of key sections in our app it was apparent the nav bar design could work in our favour. From the data science team and taking into consideration business and customer goals we were able to identify which sections would appear in the navigation bar.
Proposed design solution
iOS Navigation — Signed out & in states
Tab nav pattern is proven on iOS and has been effective with many high profile apps in the App Store today. For YPlan it enabled us to highlight our key sections — Discovery, Favourites, Tickets & Profile.
Android Navigation — Signed out & in states
The Android navigation resulted in many iterations eventually settling on a similar tab design highlighting the key sections of the app. Slightly removed from Material Guidelines we felt this simple approach made each section extremely accessible as opposed to hiding them in a side menu. (Tab bar has now been added to the guidelines!)
For an experiment, we decided to push “Invite Friends” to the navigation with its own dedicated tab only on Android (We often test on Android first as it is possible to make changes and push to the store quickly if something goes wrong.) While YPlan isn’t primarily a social app, we were looking to see growth from this change.
Testing
Having the flows complete it was possible to test how customers interacted with the new navigation.
We created the prototypes to test and validate our solutions to the original problems-
- Ticket discovery
2. Perception that you can’t book on YPlan, just browse
3. Customers cannot find the wishlist
Flows were mocked up and tested using Marvel. For testing we use a screener to locate suitable users using a third party service. The tests took place in the office over a couple of evenings throughout the course of two weeks. Once the tests had taken place the results were evaluated and patterns could be identified.
Interaction design
When we were more confident in our design choices Pixate was used to mock up interactive prototypes to give the customer a near real experience with the new app navigation to gain valuable insights.
Below are a selection of prototypes created during this process which we used for testing and to help express what we were trying to achieve to the developers. Getting eyes on the interaction design early helped to eliminated rework.
The developers at YPlan are very hands on at this stage of the process and provide valuable feedback on native platform UX conventions.
iOS navigation prototype
Android navigation prototypes
Tracking results
What metrics are we looking to shift with this new navigation.
- Increase number of Sign In’s.
- Increase number of wishlisted events.
- Increased conversion rate of wishlisted events.
- Increase in app invites (Android).
Can we reveal the numbers..? Unfortunately not however it can be said that the changes made have dramatically shifted the metrics we were chasing in a very positive direction.
Check it out
The new navigation is live on Android and iOS. If you wish to check out the results of this process please download the app and test it out.
YPlan iOS — https://itunes.apple.com/us/app/yplan-new-york-+-san-francisco/id577193492?mt=8
YPlan Android — https://play.google.com/store/apps/details?id=com.yplanapp&hl=en_GB
Thank you for reading, any feedback would be very welcome. You can find more explorations and experimentations on our YPlan Dribbble page.
