Awwwards
 
 
 
 
 

City Ride App

City Ride App

Project type:

Mobile App

Services:

Mobile Design,
UX/UI

Client:

City Ride is a concept project for a bike-rental service operating in big cities, offering numerous stations with electronic locking across the map in order to provide easy and convenient way of traveling short and long distances. The service brings best experience on mobile phones, but also have an option to start a ride using only station's dashboard and a credit card. That's especially useful for first-time users or people that do not have a smartphone.

Project goals

Before I started this concept I did a small research of the existing solutions and people's needs. I interviewed few people in Sofia, where there's still no such service, but also people in western Europe, living in big countries where bicycle infrastructure is well developed. Some of the most needed features were:
- Fast way to locate closest station relative to your current location. Especially when you don't know your end ride location and need to find fastest way to return bike.
- Easy indication to see how many bikes or free stands there are in a station.
- Safety first! People should be provided with indication that the bike is safe to ride or report damage if it's broken.
After the research I continued with basic wireframing. I used typeface called Signika, which is especially developed for wayfinding, signage, and other media where clarity of information is required. The icon set is also bold, simple and clear. Colors are bright, energetic and youthful.

City Ride App Goals
01

Solutions

1 / 6
  • City Ride Map

    The first screen that user see is map with bike stations. Each station's pin colors are dynamic so that it's easier to see just in a glance how many bikes or parking stands are left free, depending on your needs. One of the most important features that I couldn't see in many of the tested apps is a button that shows you the closest station to your location. I decided to dock most important call-to-action buttons in the bottom so that they can be easily tapped by thumb if using only one hand. User can also tab "list" button to see full list of stations and his favorite ones.

  • City Ride Station Screen

    Closest station functionality shows you route to get to the station and also gives you additional details as address and exact number of bikes/stands. User can add station to favorites list. After tapping "START A RIDE" button, user is prompted to log in or goes to the payment process.

  • City Ride - Ride screen

    During ride, you have additional ribbon on top of the screen that shows details like time elapsed, ride distance and ride cost. Again on the bottom you have the most important buttons, as the right one now is the button for ending the ride. User also have the option to lock the bike from the app in case he/she wants to go in a shop or park it for a short period.

  • City Ride End Journey

    Everytime you end a ride, you are prompted by text and button to report damaged bike, so that this bike is temporarily locked to prevent other users using it until it's fixed by CityRide's support team. (bikes may have light signal for indicating availability for ride).

City Ride Dashboard Screens