Blacklane

A focus lied on creating a new color scheme which could be used to achieve a consistent look and functionality when using the different Blacklane products.

The most important thing when applying color to a graphical user interface is to create a good greyscale in the first place. Every great UI is comprehensible in it's greyscale wireframe state. Color later helps setting highlights, guiding the eye and to distinguish between selected and unselected elements and it adds depth to the link hierarchy.

In order to create elements which look clickable, without having to apply the main CTA color a million times on the screen, it helped to distinguish between a „dead“ greyscale for copy text and anything inactive and an „alive“ greyscale with a tint of blue, which could be used for clickable elements like tabs or bottom bar icons.

I add the color teal to be used for active or selected elements only. This helped on screens, where selected elements would before be colored in the main interaction color (blue). This led to confusion, because not all blue elements on the screen were actually clickable.

I led the redesign of the Blacklane passenger app. This was one of the first steps in achieving a better brand identity and user experience throughout the products.

To achieve a more playful and easier way to start the booking process, I came up with the idea, to swipe up to drag the booking widget into the visible area. In the former version, as a user I had to click a button which was located on top of the screen. A very uncomfortable way, especially on devices with large screens. The swipe-up gesture is much more convenient. To make the transition period as smooth as possible for people who already know and use the app, I didn't take away the "Book a ride button" completely but attached it to the first card on the homescreen, so it would be displayed in the reachable area (for both right- and left-handed users).

The general idea is that the home screen cards lie on the top layer, while the booking widget lies underneath. When swiping up, the users dive deeper into the app (imagine they fly through the clouds) and reveal the underlying map along with the option to set locations, date and time for a ride.

After designing the homescreen, I redesigned the whole booking flow of the passenger app. My focus lied on legibility and simple, easy to grasp screens, followed by an uncluttered and comprehensible overview. The former version of the app looked like a native iOS or Android settings screen, depending on the device platform. To introduce a better brand identity I applied the color palette which I created, a new bottom bar icon style and used Source Sans, the font which Blacklane uses on their website for titles within the app. Copy text in apps should always follow the native design guidelines and to stick with SF Pro for iOS and Roboto for Android devices is not mandatory but highly recommended. These fonts have been tested and guarantee a smooth behaviour when applying dynamic text options, which give users the possibility to change the font size within their phone settings.