STEP 1
City Cycles has a large variety of bikes to choose from. To make the selection process easier for first time riders, each category of bikes lists the bike types and a short description of what each of the bikes are meant for (long distance, short distance, etc)
BIKE TYPES
STEP 2
Once a bike type is selected, the user will be brought to a card list of bikes that are available within their desired category. This page includes a calendar so that the user can see/select the the day of pickup and return (and see if their desired bike is available on the dates they need it). Having the bike type, the pricing model, and the date selection on the same page will allow the user to see all of their options up front and eliminate mistakes.
TYPE SELECTION
STEP 3
Once the user decides on bike type and rental specifics, they will review their decisions. They will be able to go back and edit their selection if necessary or add any items within the horizontal scrolling containers labeled 'Enhance your Experience'.
SELECTION SUMMARY
STEP 4
Once reviewing their order summary, users will be brought to the payment page where they can input their card information to place the order.
PAYMENT
STEP 5
After placing their order, users will be brought to the confirmation screen to ensure that the order has been processed.
CONFIRMATION
%20booking%20confirmation.jpg)
RENT A BIKE IN 5 EASY STEPS
City Cycles
Problem
The current City Cycles Website is not meeting the needs of users. Users are unable to intuitively navigate e site and are quitting part way through the rental bike process after being redirected to their email and given no further instructions.
Role
Figma
Photoshop
Illustrator
Google Analytics
Design Process
UX Designer
Tools
Define
Empathize
Organize
Redesign
Looking through City Cycles' analytics, the data showed that City Cycles had seen a sharp decrease in users making online reservations. Through user interviews, it became clear that users found the website difficult to navigate. Customers described the experience of trying to reserve a bike as “frustrating” and “annoying”. Users had trouble finding where to book a reservation. There was no intuitive call to action or navigation link on the landing page to direct the user to the reservation booking page. In the cases where the user did find the reservation link, they first had to utilize the search bar and then scroll through a long list of information, only to click the "Reserve Now" button and be redirected to their email without any further instructions.
After conducting user interviews and reviewing the City Cycles website analytics, I listed out the top 5 pain points & frustrations and their corresponding proposed design solutions.
Keeping in mind that the user felt frustrated with the general flow of the original site, I wanted to make sure to map out the site and count the steps it would take to confirm a bike rental in the new site.
The original City Cycles site was a mash of text and images without any clear formatting. When approaching the redesign, I wanted the user to easily see their options and make selections accordingly. I decided on a card layout for the redesigned site because it is a layout that most users are familiar with and makes it easy to categorize and display information.
Site Map & Wire Frame
Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that’s aligned with the brand’s values and message: “Revolutionize your commute”. Researching competitor sites I was able to come up with a design that was unique, simple, and revolutionary.
The functionality of the design is centered around the rental process. The site is organized using a card layout system, similar to what users would see on e-commerce sites such as Amazon or Nike. This was done to break up content and display all the necessary information in one place.
Visual Style: Sleek, Modern, Black & White