In-app chat
FREENOW drivers and riders needing to contact each other are required to do so outside their respective apps via phone call or text messages. This was neither convenient nor safe. Phone calls required an expensive phone masking service for privacy reasons. I helped design a chat feature for the driver app to improve user experience and cut costs for the business.
Entry point definition
One of the first tasks was defining potential entry points to introduce this new chat feature. One of the most critical entry points to define was when drivers received incoming messages while picking up passengers.
Our goal was to ensure drivers could easily read and interact with these messages without compromising the core navigation experience. The challenge was determining where this information could be placed on a screen already filled with essential elements.
Positioning incoming messages at the bottom sheet was problematic because it felt cluttered with too many tappable elements right next to each other. The limited available space also constrained us to just a few characters to include from the message.
Including incoming messages in the top banner was quite a visible position, but we wanted to keep this area solely dedicated to turn-by-turn driving instructions. Limited space here didn’t give us much room to adequately include all the contents of a message.
Creating create a chat bubble (akin to what you’d see in an iMessage screen) avoids disrupting other elements on this screen, whilst visually distinguishing the message. This also gave us enough space to potentially include more content of the message (see next video).
Design refinement
Once the general entry points were established, I started to refine the designs such as the message card.
Collaborating with my cross functional team, we decided to add pre-defined messages that could be sent with a single tap. This promoted efficiency and safety. I added a second line of text to include more characters of the message. I also made the UI simpler and cleaner. One way was deciding to lay the message card on top of the bottom sheet, as this information was higher priority.
We still had one problem...
We learned during user testing that the interaction of the incoming message card caused confusion. The card required an up swipe to expand, and down swipe to dismiss. Neither was intuitive, especially the dismiss action. I then created two new variations:
Tapping on the cross to dismiss could ensure the driver consumed the message. Yet this would compromise safety, and might be annoying having to dismiss multiple messages in a ride.
Auto-dismiss ensured safety and allowed space for a chevron, improving affordance of the expand behaviour. Despite concerns about message visibility, we prioritized our design principle (driver safety) and went with this version.
Final design
After launching this feature, we saw an immediate adoption from both drivers and passengers, leading to positive impacts on core business metrics such as ride completion rate and cancellation rate. Phone calls also dropped as a result, leading to lower usage of the costly phone masking service.
Results
8.5%
Ride completion rate
20%
Cancellation rate
180k € annual saving
Avoiding phone masking