Ryde Today — Designing an App

5 min readJul 4, 2019

The premium cab booking experience for Vancouver’s high-end

Summary

Designing a mobile app, concretely redesigning Ride Today, a cab booking app, focusing on a premium and business professional niche. For that purpose, UI and UX worked in the same team from the beginning.

First Steps

Working on this project was, in the beginning, really exciting because it was the first project with a real client that we have. Also, it was the first time working UX and UI together and Ryde Today app was that one in which we can implement some improvements. First, we met the client and he was really open to listening to us and our ideas and proposals. However, this can be a double-edged weapon because we can offer him any change that we think it is going to be good for the app but this can be hard because he doesn’t have any preference. Despite that, our brief was clear: redesign the app and giving it a premium style based on a business professional niche.

The Research

For the research, we focused on Gut Test and I realized that it is a quite useful tool to figure out what the client like. The Gut Test was a success and we got a lot of information in order to define the next steps: moodboard, style tile, and style guide. The Gut Test results were that he liked round shapes, clean designs, gold color or illustrations for the cabs.

Some of the images we used for the Gut Test

Designing

We continued with the inception sheet and moodboard. For these tasks, we created our proposal individually. On my moodboard I wanted to transmit professionalism, modernity and geometric. The result was the following one:

Then, I continued with the inception sheet based on my moodboard:

I followed a different style from my UI workmates and based on that I designed a modern but premium moodboard and style tile. My style tile wanted to be simple, professional, legit, reliable and modern. For that reason, I choose blue and purple as a part of the main color palette. The typeface should be a sans-serif for credibility and the buttons are slightly rounded. For images and patterns, I bet for simple illustrations and gradients, as well as generic images.

Once we had the client feedback, we combined all the aspects he liked about our moodboard and style tile and we created the style guide.

Then, we designed the final style tile which gathers all the feedback from the client and it was quite similar to my style tile proposal but changing the color palette:

Defining the Style Guide

Having all done, we designed the style guide based on the previous steps:

For the color palette, we preserved almost all colors but we added gold and a brighter purple just to highlight some aspects of the app. The reason why we introduced this change was that if not, the app would be very plain.

As a request of our client, we designed a shorter logo ‘Ryde’. We preserved the same typeface but now it is more modern and professional. In addition, we used a light color for rounded parts of the logo and darker for straight parts. We created a logo in different colors thinking about the future of the company. One could be a focus on drivers and another on its personas or media. The blue one is the main one and purple and grey are secondary logos.

The app icon should be simple and recognizable. So, we created a very clean icon: the first letter of Ryde inside the location icon we designed on the icon section.

The typography choose is a sans-serif, concretely Proxima Nova in blue which is clean and professional. Also, we designed three 2D and simple illustrations for the type of cab that the user should book: sedan, SUV and limousine.

For the iconography, we created simple and minimal icons in black and white and some examples in color.

For the UI elements, we designed every section based on the wireframes. However, we finished this part a few days before the presentation because UX team hasn’t finished designing low and medium fidelity wireframes. For this section, we used purple as the main color and for details grey, gold and blue. We created minimal, geometric and slightly rounded shapes and very visual with the usage of icons.