CityCycles — UX Case Study & Website Redesign
--
Project Overview:
As part of my Skillcrush UX class, 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 and reply to all the phone calls and emails of clients.
- I was tasked to improve the website’s UX, making the reservation process easier & more convenient for CityCyles, thus increasing the number of the online reservation process.
Problem Statement:
In spite of having a website with a reservation system, CityCycles was getting many calls and emails about the bicycle reservations. After a brief research, I found that users find it hard to reserve a bicycle through the website. They find the website as frustrating to use, hard to navigate, annoying and felt mislead.
Goal
My goal is to create a clear, user-friendly and affluent reservation system where the customer can book bicycle online. Thus increasing online reservation sales and minimizing phone calls & email for stakeholders.
Users & Audience
The website is mostly used by daily commuters, tourists, and most youngsters aged between 18 -35. They use it for work, 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 and guide users to book bicycles online. To understand the issue and to solve the problem I did the following.
- Empathizing with the user and finding their pain points
- Defining a clear problem statement
- Ideating solutions for the users’ problem or pain point
- Create user personas & User flows
- Create Information Architecture, models & navigation
- Create wireframes & prototypes
- Conduct usability testing & understanding of user needs.
Scope & Constraints
The Scope of the project is to have a clear and user-friendly reservation process where users can reserve a bicycle through the website without any confusion. Since its a school project I just had limited data to work with.
My Approach
My approach to this UX project started by taking the following steps:
1. UX research methods & collecting data
2. Key findings from research
3. Create user flows, personas & journey maps
4. Create IA & sitemaps
5. Create Wireframing & clickable prototypes
6. Conduct usability testing
7. Implement the results
UX research methods & collecting data
Collecting Quantitative & Qualitative data:
Qualitative Data:
I conducted user interview on the current website with a couple of users to find out how they feel about the reservation process and to understand how users think, what they say, what they feel and what they do.
The task is “how do you reserve a bicycle from this website”
- One of the users couldn’t complete the task and called it quits halfway through
- Other 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 couldn’t collect organic data.
Key Findings
- As a result of user testing, we found that most users feel our reservation process as annoying, frustrating, confused, mislead, struggling and doesn’t like our website.
- From the google analytics data of our website, we found that the number of users who visits our website is gradually decreasing. Maybe the reason might be the buttons which don’t lead to its actions, hence making users confused & misled
User Personas & Journey map
Based on the user interview and research I created a user persona to understand more about the user personality, their goals, needs and their behaviour. This helped me to narrow down the solution for our target users and improve the user experience.
User journey map:-
To understand users journey on the website, I created this journey map to note down the touchpoints and pain points of the user. Touchpoints are where the user interacts with the product like clicking a button. A pain point is when a button or a link which didn’t work. This gave a clear understanding of where the user felt frustrated, felt pain and how I can improve the process and the website. The journey map allows me to empathise with the user and walk the journey with them and gave an idea of where improvements can be made.
Sitemap & User flow
Sitemap:-
The content/ information in the existing website were all mixed up. It was hard for users to see which page they were in, where they came from or what happens next. So I did card sorting by myself and created a sitemap to arrange the content. This was an informative exercise where I took all the content, broke into different groups and sorted it out so it’s easy for users to understand.
User flow:-
Once the sitemap is created. I proceed with the user flow of the website. It once again allowed me to put myself into users shoe and think about how they would experience the website when they want to do a specific task. In this case, it is the “Reservation process”. The main goal MVP of this project is to create a user-friendly reservation process where users can simply reserve bicycle online.
Prototyping:-
Lo-fi (paper) prototyping
After ideating some potential solutions to the users’ problems and creating sitemaps & user flows, I decided to move forward with the prototyping process. Sketching out has always been one of my favourite techniques in the design process from my graphic design years. If I’ve doubts or if I’m stuck in anything I always sketch it out. Most of my projects I start with sketching it out. It allows me to come up with different solutions and gives me a clear view of the goal. So I sketched out the prototype on a paper and tested with a user.
Tip: Did you know companies like google always start their products with paper prototyping before taking it digital?
Hi-fi prototyping (Invision)
Based on my paper prototype, I created a high-fidelity screen in Figma and made Interactive digital prototype of my proposed solution using Invision.
Click here to experience my prototype.
Click here to experience my prototype.
User testing & Implementing results
My main goal (MVP) for this project is making a clear affluent reservation system which has been successfully achieved. Users were able to navigate the reservation process easy.
After performing a usability test on my prototype with three users, I received the following feedback and implemented those in the above prototype as well.
I did usability testing on three users (2 remote online & 1 in person)
I gave them three tasks to perform which are
- How would you reserve a bicycle online through this website?
- Where could you possibly find the tips about taking care of your bicycle
- If you have full authority to change anything on the website. What would you change?
The testing went well. 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, a user, shared a real-life problem which she faced while reserving a bicycle.
User 1, Lisa’s Feedback:
Problem 1:-
“I’m short & I need to look at bicycles for my height. It’s been a problem & height matters”
Solution
My initial prototype plan was to just create a list of bicycles and proceed to payment option (as you may see in my paper prototyping) From Lisa’s feedback I Implemented the above screen in between when the customer chooses bicycle and proceeds with the payment. This screen gives more information about the bicycles specification and allows users to choose accessories such as helmets.
User 2, Erin’s Feedback:-
Problem:-
The “How it works” section looks contrary in home page and I wouldn’t need to see the steps laid out.
Solution
Both Lisa & Erin said that the section under the banner image is contrary. Previously in paper prototyping, you can see that I had a section under the CTA banner which says “How it works”. Since both, the users said it was contrary and unnecessary, I replaced it with a testimonials section. This shows a positive review of the company and the staff.
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 a reservation online. I’d recommend to launch the product and gather data.
Lessons Learned
The biggest challenge or obstacle I faced during this UX project was finding out quantitative data. Since it was a school project I only had fewer data on hand. However, by doing user interviews and feedback, I collected many quantitative data which guided me through the project.
The lessons I learned from this UX project includes:
1. How to put yourself in the user’s shoes and understand their needs (Empathize with user)
2. How to do user research and collect both qualitative and quantitative data
3. How to create user personas and user journey map to understand the pain points
4. How to ideate solutions for those pain points
5. How to create a lo-fi paper prototype and a clickable prototype
6. How to conduct usability testing and the questions to ask.
7. How to implement user feedback on the existing prototype.
This is my first case study in UX. I’ve learned the basics of how to approach a project and how to solve the user needs and achieve business goals. Even though its a school project I truly enjoyed the process. It has been a great experience for me. Thank you for reading and please feel free to share your thoughts about this case study and please let me know where I can Improve.
Thanks for the read!
