Image for post
Image for post

How and why we rebuilt YPlan’s Navigation from the bottom up

Ben Dunn
Ben Dunn
Feb 5, 2016 · Unlisted

Observation of customer interaction patterns over the last 8 months and what we did with them.

What were the issues?

1. Ticket discovery

2. Perception that you can’t book on YPlan, just browse

Old iOS ticket flow

Image for post
Image for post
Tickets on iOS

Old Android ticket flow

Image for post
Image for post
Tickets on Android

3. Dude, where is my wishlist?

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

Image for post
Image for post
Wishlist on iOS (at the bottom of the home screen)

What else could be touched?

Search

Sign up rate

Visually coherence between platforms

Design Challenges & Possible Pitfalls

  1. 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.
  2. 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?
  3. Create a clear sense of orientation, making sure each section easily and instantly distinguishable.
  4. Keeping the designs native. Doing this would enable customers to feel at ease on their platform and reduce confusion around app navigation and usability.
  5. 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

“Engagement, user satisfaction and even revenue can be increased by exposing menu options in a more visible way.”

Zoltan Kollin

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.

Image for post
Image for post
Early mock-ups of YPlan iOS and Android Tab Bar design

Proposed design solution

iOS Navigation — Signed out & in states

Image for post
Image for post
iOS Mock-ups

Android Navigation — Signed out & in states

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.

Image for post
Image for post
Android Mock-ups

Testing

We created the prototypes to test and validate our solutions to the original problems-

  1. 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

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

Image for post
Image for post
iOS Nav

Android navigation prototypes

Image for post
Image for post
Image for post
Image for post
Exposing search on Android

Tracking results

  • 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

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.

jobdunn

Process behind the product

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store