Hailo Re-Thunk

We just started to roll out a new Hailo. It’s our first redesign in 3 years and paves the way for some exciting plans we have for the future. We spent time thinking about where Hailo is today, what’s worked well and what could be improved.

If you’re interested in the reasons for redesigning or just curious about our process then read on. Or download it for iOS and have a play. We’re adding a few final touches to the Android version which will follow shortly.

Why redesign?

Early in 2014 we took our first steps into exploring what Hailo would look like if we offered car choices other than taxis. Different choices mean different pricing tiers; as a result, we also had to consider how we could offer complete clarity when communicating pricing to our customers. This is something we were passionate about doing well as we felt it was lacking both in our current product and from others on the market.
After talking to a lot of users and testing early prototypes we learnt some important things.

• People like choice but what they really want is to get from A to B quickly in a hassle free way.
• People like to know how much they are paying but not all want the cheapest option. Promptness is important, but more important is not feeling ripped off.

We wanted to deliver on choice and transparency but shoehorning these new services and features into the current app was not going to be the way to do it. It would not be optimal for usability and would result in a clunky experience and UI. To execute well we needed to re-imagine our app completely.

“To the Bat Cave!”

Many trees were harmed during the making of the new Hailo

Design Goals

We kicked off with some clear goals in mind.

• Build a UI that can deliver multiple service types.
• Create an experience where the user can compare services and make clear decisions based on ETA, pricing and availability.
• Design for flexibility and for future developments and cool features like Pay with Hailo(Currently in Beta).
• And finally don’t break the two tap simple Hailing experience that we have today.

Go Compare!
Our first task was to explore how people would choose their preferred car type. Our initial designs had a car picker on the very first screen. This seemed like a very natural thing to do. It’s how one of our bigger competitors do it so why shouldn’t we. However during testing, it became clear that this design decision was in conflict with one of our goals relating to price transparency. Having the car selector here only allowed people to compare price based on minimum fare or price per mile because at this point the passenger has not yet indicated his or her destination. Moving the car choice to the next screen would allow people to compare the total cost of their journey* which proved very popular and gave us a warm fuzzy feeling inside.

*Fixed prices and estimates rolling out in more cities soon.

Staying Focused
Not wanting to clutter the experience for the majority use case (the standard Tap Tap Taxi route through the app), we hid a few options partially out of sight, hinting to their existence using a peek-a-boo animation during a screen transition. So, below the fold you can find seating options and alternate payment methods. This tested well with users and led to us taking a similar approach to other areas of the app to ensure a clear focussed UI throughout.

Peek-a-boo animation prototype to hint at more options (black panel). User can then swipe up to access them.

Simplifying the UI
One big challenge was — how do we add more value (features) while making the product feel lighter, cleaner and simpler than before.

Simplifying would involve more than just removing visual clutter it also meant (where possible) removing copy and rarely used features. We also removed as much chrome as possible allowing us to go full frame for a more immersive feel.

If any piece of UI or copy felt like a nice to have then it didn’t make the cut.

Process

We like to move quickly so we didn’t want to wait for our new vision of Hailo before offering users the benefits of multiple services and pricing transparency. So we shipped some of these features into the existing app while the redesign process kicked off.

It meant the developers could get a head start in building these services and we could start to get real word data for these new features which would inform the design process.

We didn’t have the luxury of spinning up a separate team to work solely on the redesign. So for our small group of engineers, QA, two designers and one amazing product owner it meant business as usual along side the redesign effort.

Internally the new version was called SunnyD and all Hailo employees where encouraged to use it for taking rides. The real world feedback we received at this stage was extremely valuable and we continued to test and iterate with usability sessions on both sides of the pond.

To enable us to move quick the lines between design and development were somewhat blurred. Developers would start implementing elements before they were completely final from a design standpoint. This meant we could get working prototypes in peoples hands quickly and see how they performed. Something hard to get a real feeling for with non coded prototypes. This way of working felt collaborative and healthy but sometimes felt a bit like this.

Tools

Great tools for mobile design seemed to be very hard to find just a year ago but now we seem spoilt for choice.

Sketch has proved to be a great replacement for Adobe tools for UI specific design and we are now fully converted as a design team.

Flinto was used heavily for testing early prototypes on real users. Plus it’s one of the best designed pieces of software I think I’ve ever used.

In-vision made a late appearance to help with feedback and collaboration and I can see it becoming an integral piece of our teams workflow.

Quartz composer helped with animation and transition design — this was later replaced with the amazing Pixate prototyping tool.

The final result

Over a period of a few months and an intense final two week push Hailo 4 is out in the wild. Not perfect but out in the real world being used by thousands of passengers every day. We will continue to iterate, polish, test and monitor what we have built. We know that our work is never complete, and this first phase of the redesign has only focused on the main Hail flow and the navigation side menu but many more improvements are on the way to other areas of the product — including some great new services and feature improvements. Stay tuned and let me know what you think of the new Hailo so far.. rob@hailocab.com

Thank you

Huge thanks to the amazing team that designed, nurtured, built, broke then fixed and then finally got this massive release out the door.