THE CLIENT
City Cycles is a local bike rental company, quaintly nestled in Riverside, California. It is the place for the latest bikes from mountain bikes to hybrid bikes and provides great local ride recommendation. Whatever one's expertise level and however one likes to ride, all are welcome to rent a bike and enjoy the great ride ahead.
THE CHALLENGE
"I love that people are making reservations, but it's the fact they are calling in instead of using our website. It's clogging the phone line."
City Cycles has experienced a significant drop in online reservations over the pas year. The current process requires users to send an email requesting a reservation which in turn requires employees to call patrons to confirm said reservation. My challenge was relatively straightforward: identify the reasoning users pick up the phone instead of using the website and make a high fidelity prototype to address the problem.
"How might we get more City Cycle patrons to reserve bikes online?"
RESEARCH & PLANNING
Combing through City Cycle's data analytics it was apparent they had experienced a sharp decline in online reservations. The starting point was to conduct usability tests to observe any pain points users were experiencing while attempting to book online.
Results revealed that users found the website difficult to navigate and "confusing". There were numerous instances of users desperately clicking anything to reach their goal of an online reservation. This was accompanied by looks of frustration, heavy sighs, and use of works such as "annoying".
UX Data Visualization Word Cloud
The most common words and feelings mentioned by City Cycles' users while making online reservations
Journey Map
To visualize what had been observed and expressed, I created a journey map to pinpoint how users felt during the reservation process and to identify key places where the City Cycles site could be improved in an effort to alleviate frustration.
In-Depth Interviews (IDI)
The next step was to begin in depth interviews. Participants made clear that they expected and desired a quick reservation process as many mentioned they are already busy with work and other obligations.
The mental model of users was not being met with the City Cycles' site as participants note stark contrasts with sites like Open Table, Amazon, and other reservations platforms. Respondents revealed that they found the website difficult to navigate and "misleading".
"...this is supposed to book a reservation, but instead it opened my Outlook email program..." - IDI participant
These interviews shined great light on pain points and desires of the respondents. It lead to some significant key takeaways.
Key Findings:
🔑 - Most patrons are busy individuals who do not want extra work or hassle outside of what they already have on their plates.
🔑 - Participants expressed having trouble locating the button to reserve a bike. Indicating that they expect a reservation button. Lack thereof led to many unintuitive clicks.
🔑 - Once they found the correct area to make a reservation to their surprise it opened their default email application instead of prompted steps to reserve a bike.
🔑 - Most users did not want to send an email as a means of reservation. They felt "uneasy" this way. Thus, to calm the unsettling feeling many expressed they would simply call the number listed to have peace of mind their reservation was complete.
Personas
The data I collected and analyzed helped me craft 3 main personas embodying 3 different archetypes.
Many of my design decisions were made with Samantha in mind. If I could design an engaging and seamless experience for people like Samantha, who are busy working multiple jobs, the experience could traverse to those leading a slower paced lifestyle such as Asher who is vacationing or Sameer who is a retired school teacher.
In other words: making Samantha my primary persona allowed me to address the needs of all three.
DESIGNING THE SOLUTION
User Flow
Based on my research, I hypothesized that short, simple user flows would be key for patrons to make a reservation without getting frustrated along the way.
I believe that creating a reservation system that allows patrons to make reservations and receive immediate confirmation would be helpful to users who get confused or annoyed by the current process. Currently, the system requires users to make a reservation via email and in turn calls for employees to call users to confirm said reservation.
I posit that streamlining this process would increase online reservations and free up phone lines for other purposes which might bring more business to the store. Additionally, there is possibility to increase site retention as users would then go to other pages of the site, ending in more exploration of the page and what City Cycles has to offer.
Early Sketches
I sketched various ideations of City Cycles' navigation, homepage, reservation process, and blog section (which evolved to the about page).
1st ideation of new reservation process
Early homepage concepts with illustration and reservation at forefront
Navigation ideation with hamburger menu and hotdog style menu
Initial blog layouts, which soon became the backbone of the about page
I soon settled on homepage that had one hero photo and multiple reservation buttons. Pain points demonstrated that users did not know how to get to the reservation button or even where it was -- this would eradicate that problem.
Additionally, including breadcrumbs at the top of each page would alleviate confusion that users experienced in regards to where they were in the website.
Final homepage sketch with 2 reservation buttons and sticky contact information footer
Breadcrumb trail at top of page in second step of reservation process
SOLUTIONS
I focused on designing and prototyping the following solutions to simplify the reservation process and alleviate customer frustration:
🧪 - Adding a reservation button directly in the site navigation that stands out and can be accessed from any page.
🧪 - Including a large call to action on the homepage that leads users directly to the reservation process.
🧪 - Ability to select the type of bike, date of pick up, date of drop off, and make direct payment on website.
🧪 - Adding breadcrumbs at the top of the page during the reservation process to relieve any anxiety regarding the amount of steps left.
🧪 - Creating a sticky header and footer so one can always return home, visit another page, make a reservation, or collect contact information at anytime during experience.
🧪 - Decreasing reservation process to 3 steps.
🧪 - Including a confirmation page that provides all the information users expressed they looked for which simultaneously addressed pain points with reference to frustration of "not knowing what to do next".
Hi-Fi Prototype
Homepage
Hero image and nav accompanied with two big call to actions
Preview of bikes with option to click and learn more
Subscription section to continue to keep reservations, news, and deals online instead of via phone.
Reservation Process
Reservation page with fill in the blank sections for users to enter personal information.
Calendars for user to easily select pick up/drop off date along with desired time.
Users can pick desired bike and quantity along with descriptions of each bike to help with decision.
On the left, users can see the bike(s) selected along with details of future reservation. On the right, is all payment information, cancellation policy, and policy details.
Confirmation page with details participants expressed they expected to see at end of reservation process.
CONCLUSION
If I Had More Time...
📍 I would have conducted usability tests post hi-fi prototype creation. Usability tests give great insight on further iterations of a product and keep the users' experience at the forefront of each project.
📍 I would have performed a heuristic evaluation of the original City Cycles website. To be able to gather violations in conjunction with users pain points and desires would have been ideal.