Project Overview:
As part of a Skillcrush UX course, I was tasked with improving the user experience of an existing website for a client named CityCycles. The goal of the website is to allow users to reserve a bicycle to reach their destinations. CityCycles discovered their reservation process is inefficient, requiring users to call or email CityCyles every time they order and wait for confirmation. It’s hard for CityCycles to keep track of and reply to all the phone calls and emails. My goal was to improve the website’s UX, making the reservation process easier & more convenient for CityCycle customers, thus increasing the number of online reservations.
Problem Statement:
In spite of having a website with a reservation system, CityCycles was receiving many calls and emails regarding bicycle reservations. After a brief research, I found that users find it hard to reserve a bicycle through the website. They find the website frustrating to use, hard to navigate and misleading.
Goal
My goal is to create a clear, user-friendly and affluent reservation system where the customer can book a bicycle online. Thus, increasing online reservation sales and minimizing phone calls & email for stakeholders.
Users & Audience
The website is primarily used by daily commuters, tourists, and youth aged 18 -35. Bicycles are rented primarily for the purpose of commuting to work and/or school, and exploring the neighbourhood.
Roles & Responsibilities
I was tasked with solving the User Experience of CityCycles website. The ultimate goal is to find out why users are not reserving the bicycles through the website and how we can improve the online reservation system. To understand the issue and to solve the problem, the following was accomplished:
- Empathizing with the user and finding their pain points
- Defining a clear problem statement
- Ideating solutions for the users’ problem or pain point
- Creating user personas & user flows
- Creating Information Architecture, models & navigation
- Creating wireframes & prototypes
- Conducting usability testing
My Approach
- UX research methods & collecting data
- Key findings from research
- Create user flows, personas & journey maps
- Create IA & sitemaps
- Create Wireframing & clickable prototypes
- Conduct usability testing
- Implement the results
UX Research Methods & Data Collection
Collecting Quantitative & Qualitative data:
Qualitative Data:
I conducted user interviews on the current website to understand how they find the current reservation process, as well as to understand how users think, what they say, what they feel and what they do.
Users were asked, “How do you reserve a bicycle from this website?”
- One user was unable to complete the task and quit halfway through
- Another user did complete the task but found it hard to navigate and unclear
Quantitative Data:
I created user survey feedback forms in google forms and posted in the class group to collect data. I was provided with analytics data from the curriculum. Since the survey was conducted within a small group I was unable to collect organic data.
Key Findings
- Through user testing, I discovered that most users find our reservation process to be annoying, frustrating, confusing, and misleading. In general, users did not like the website.
- Through Google Analytics, I found that the number of users who visits our website is gradually decreasing. The hypothesis is that the buttons do not lead to appropriate actions, making users feel confused and mislead.
Data Visualization from the feedback form
User Persona
Fictional representation of CityCycles Ideal customer
Based on user interviews and research, I created a user persona to understand the ideal user’s personality, goals, needs and behaviour. This helped narrow down the solution for our target users and improve the user experience.
User Journey Map:
To understand the user journey on the website, I created a journey map to note down the touchpoints and pain points of the user. This gave a clear understanding of where the user felt frustrated and felt pain. The journey map allows me to empathize with the user and walk the journey with them, giving me an idea of where improvements can be made.
Sitemap & User Flow
Sitemap:
The information on the existing website was all mixed up. It was hard for users to see which page they were on, where they came from or what happens next. So I did card sorting and created a sitemap to arrange the content.
Sitemap of CityCycles Website
User Flow:
Once the sitemap is created, I proceeded with the user flow of the website. This, once again, allowed me to put myself into the users’ shoes and think about how they would experience the website when doing specific tasks. In this case, it was the reservation process. The MVP of this project is to create a user-friendly reservation process where users can simply reserve a bicycle online.
User flow of reservation process & signup process
Prototyping:
Lo-fi (Paper) Prototyping
After ideating some potential solutions to the users’ problems and creating sitemaps and user flows, I moved forward with the prototyping process. Sketching out has always been one of my favourite techniques in the design process. When in doubt, sketch it out. Sketching allows me to come up with different solutions and gives me a clear view of the goal. I sketched the prototype on paper and tested it with a user.
Hi-fi Prototyping (Invision)
Based on the paper prototype, I created a high-fidelity screen in Figma and made an interactive digital prototype of my proposed solution using Invision.
Click here or anywhere on the image to experience the prototype.
User Testing & Implementing Results
The MVP for this project — a clear, affluent reservation system — was successfully achieved. Users were able to navigate the reservation process easily.
After performing a usability test on the prototype with three users, I received the following feedback and implemented them.
Usability testing was done on three users (2 remote online & 1 in person).
Users were asked three questions:
- How would you reserve a bicycle online through this website?
- Where could you find tips on taking care of your bicycle?
- If you have full authority to change anything on the website, what would you change?
The testing went well and I received positive feedback from all of them. Users were able to reserve the bicycle smoothly on the website. However, while doing user testing with Lisa, an online user, she shared a real-life problem which she faced while reserving a bicycle.
Lisa’s Feedback:
Problem:
“I’m short and I need bicycles that suit my height. It’s been a problem and height matters”
Solution
The solution for Lisa’s problem
My initial prototype plan was to create a list of bicycles and proceed to payment options (as you may have seen in my paper prototype). Based on Lisa’s feedback, I implemented the above screen in between the bicycle selection and payment screens. This screen gives more information about the bicycles specification and allows users to choose accessories such as helmets.
Erin’s Feedback:
Problem:
The “How It Works” section looks different to what’s on the home page and I wouldn’t need to see the steps laid out.
Solution
Both Lisa and Erin said the “How It Works” section under the banner image is contrary to what’s on the home page. Hence, I replaced it with a testimonials section showing positive reviews of the company and staff.
The solution for Erin’s problem. Testimonials in CityCycles website
Proposed Solution
Based on the results of my usability test, I proposed the following step:
Since the MVP has been achieved and users have been able to make reservations online, I recommended launching the product and gathering data.
Lessons Learned
The biggest challenge I faced during this UX project was finding quantitative data. Limited data was provided to us from our instructor. However, by conducting surveys, I collected additional quantitative data which guided me through the project.
The lessons I learned from this UX project include:
- How to put yourself in the user’s shoes and understand their needs (Empathize with user)
- How to do user research and collect both qualitative and quantitative data
- How to create user personas and user journey maps to understand the pain points
- How to ideate solutions for those pain points
- How to create a lo-fi paper prototype and a clickable prototype
- How to conduct usability testing and the questions to ask
- How to implement user feedback on the existing prototype
Sathya 