City Cycles
City Cycles
👤About
City Cycles rents bicycles in the downtown area of Riverside, allowing people to enjoy a bike ride, reduce your carbon footprint by biking instead of driving, or take a tour of the downtown area.
Role: UI/UX Designer
Tools Used: Figma, Google Analytics
Responsibilities: User Research, Testing and analysis, Design Improvements, Iterative Design Process, Client Communication, Documentation and deliverables.
🎯Objective
The ultimate goal was to create a more user-friendly and efficient website that would encourage customers to make online reservations easily and have a positive experience while interacting with City Cycles' website.
Deliverables for this project:
A set of recommendations based on user research and testing which included wireframes and prototypes showcasing the proposed design changes, and a new site map that outlined the updated page structure.
📛The Problem
The main problem I aimed to solve was the lack of user-friendliness of City Cycles' online reservation system and the resulting inconvenience for customers. My goal was to streamline the reservation process, making it easy for users to book bicycles online without the need for phone calls or in-person visits. By addressing these issues, I aimed to improve customer satisfaction, reduce the strain on customer service resources, and enhance the overall user experience of City Cycles' website.
📋My Approach
To solve the problem and increase reservations on the City Cycles website, my approach involved several steps based on the information provided and can be summarized into the below:
🔬 Thorough research and problem definition
💻Data collection and analysis
💡Ideation and solution generation
🧪Usability testing and card sorting
📰Wireframing and inclusive design principles
📱High-fidelity digital prototype
🗣️Iterative design based on user testing
Current City Cycles Website
🔬 Thorough research and problem definition
I began by conducting thorough research to understand the problem scope and users' needs. This involved defining the problem using a "how might we" statement, determining the project's scope and requirements, and setting specific and measurable goals. I created an empathy map to gain insights into users' thoughts, feelings, and actions during the reservation process. Additionally, I formulated a hypothesis that a new reservation system allowing users to make and confirm reservations online would be beneficial.
My Hypothesis
We have the belief that creating a reservation system that allows users to make and confirm reservations online would be helpful to users who get frustrated by the current process which requires the store to email them back to confirm their reservation. We believe this would increase online reservations by 80% because users would be able to successfully make reservations on the site.
How might we get more customers to reserve bicycles on the City Cycles website?
City Cycles User Persona
💻Data collection and analysis
Next, I collected both quantitative and qualitative data to support my hypothesis. This included reviewing website analytics data, heatmaps, and user survey results to gain insights into user behavior and preferences. User interviews provided valuable qualitative data, allowing me to understand users' frustrations and expectations as well as to create an accurate and representative user persona for City Cycles.
💡Ideation and solution generation
Based on the research findings, I generated ideas through ideation exercises, focusing on addressing the specific problem statement identified earlier. Using methods like journey mapping to understand the user’s journey and matrix mapping I explored various solutions. The Now, Wow, How method helped me prioritize the best solution, taking into account feasibility and impact
Journey Map for a user visiting City Cycles site
City Cycles User Flow
🧪Usability testing and card sorting
Moving forward, I designed the first iteration of the website, focusing on choosing the appropriate information architecture model and creating a new navigation system. I conducted usability testing and card sorting to ensure the website's structure aligned with user expectations. I also created a user flow and new site map based on the proposed design.
📰Wireframing and inclusive design principles
Wireframing was the next step. I created paper wireframes initially, followed by digital wireframes. I considered inclusive design principles and conducted testing to validate that the wireframes effectively solved the identified problems.
Paper Wireframe for City Cycles Site
City Cycles Prototype
📱High-fidelity digital prototype
After finalizing the wireframes, I built a high-fidelity digital prototype. User testing was conducted on the prototype, gathering feedback and insights to further improve the design. Iterations and updates were made based on the user testing results to ensure the final design met the user needs and expectations.
🔑Key Findings
Based on the extensive research, data collection, and analysis conducted, several key findings emerged. First, users expressed frustration and annoyance with the reservation process on City Cycles' website, leading to a significant 80% decline in online bike rentals over a 12-month period. It was intriguing to observe that despite the difficulties faced, users were still willing to contact the business directly to make reservations.
Furthermore, through competitive analysis, it was revealed that City Cycles was the sole bike rental company in the area offering same-day rentals. However, unlike its competitors, City Cycles lacked an easy-to-use website, which hindered the overall user experience. This finding highlights the potential for City Cycles to gain a competitive edge by improving their online reservation system and addressing the usability issues identified during the research process.
🧩Solutions
During the project, I implemented several solutions to address the problems identified in City Cycles' online reservation system. I redesigned the website and reservation process to make it more user-friendly and intuitive. Users can now easily navigate the website, view available bikes with accompanying images, and make reservations directly online without the need for phone calls or in-person visits.
The new design also includes a comprehensive and user-friendly site navigation menu, addressing the previous confusion users experienced. By improving the clarity and functionality of the navigation, users can easily find the information they need and navigate through the website without any difficulties.
The success of these design solutions is evident in the positive feedback received from users. They appreciate the user-friendly interface, and the ability to easily make reservations online. Overall, the project has achieved its goals of improving the reservation experience, increasing online reservations, and enhancing customer satisfaction for City Cycles.
Reservation Schedule Page on Mobile
Calendar on Confirmation Screen with close & confirm button
🤔Challenges & Lessons Learned
During the design process, I encountered some challenges and learned valuable lessons along the way. Initially, I noticed that the first wireframe for the reservation page seemed cluttered with policy and procedure information, which confused users and distracted them from their main goal of making a reservation. To address this, I decided to remove the unnecessary elements and streamline the user flow.
Another issue I encountered was the lack of confirm or back button within the date selection of the reservation process, which frustrated users during initial testing. Recognizing this oversight, I quickly rectified the situation by incorporating a back button into the design.
After creating a final prototype, it underwent rigorous user testing. Feedback from the users consistently highlighted the need to reduce the number of clicks required during the reservation process and simplify the information presented on the page. Based on this valuable feedback, I made significant improvements, such as streamlining the process to be more efficient and providing a more comprehensive confirmation screen that included important policies.
Subsequent rounds of user testing confirmed that the new prototype addressed users' expectations, resulting in a smoother reservation experience. Users received clear and accurate confirmation information about their reservations, ensuring a higher level of satisfaction.
Overall, these challenges taught me the importance of continuously iterating and refining designs based on user feedback. By actively incorporating user insights, I was able to overcome obstacles and create a more user-friendly and efficient reservation process for City Cycles.
