I worked as a product designer for the premium chauffeur service Blacklane and designed screens and flows for iOS & Android apps for passengers and drivers as well as their main website and a business and a partner portal.
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.
Color helps to distinguish between selected and unselected elements and adds depth to the link hierarchy but the screen should already be comprehensible in it's black and white state.
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.
Color scale for bright backgrounds
Color scale for bright backgrounds
Color palette creation
The color palettes I developed for a holistic digital branding
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.
#1 Default state – „One way is selected“, no field is filled
#2 Pickup location, date and time selected
#3 All items selected, search button gets active
#4 Warning if an address could not be found
A dive into limousine booking
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.
The homescreen cards are on the top layer followed by the booking widget. The map lies underneath.
From the first idea ...
... & an animation test ...
... to the final prototype.
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.
I adapted the icons from the shape of the location pin, one of the most iconic brand elements Blacklane had. The first version was too playful and almost childish and it took a couple of variations until I created a style which I liked.
My focus lied on legibility and simple, easy to grasp screens, followed by an uncluttered and comprehensible overview.
While working at Blacklane I worked with four different product teams and designed screens and flows for all of their digital products and this is just a short excerpt. I also worked on the consumer website, the business portal and a driver app (available in the app store and playstore) and the driver website.