Weston Jacey
Role: UX Designer, Webflow Developer
Duration: 200 Hours
Status: Developed
Role: UX Designer, Webflow Developer
Duration: 200 Hours
Status: Developed
Three
Pedals,
LLC.
Overview
My client Three Pedals LLC is a unique business that offers courses on driving a manual transmission car. Cody Whelan, The owner and only employee of Three Pedals, operates his business in the empty parking lots of Dover, New Hampshire. Although driving a stick shift is becoming obsolete, Cody has managed to penetrate a market for customers who are looking to travel, collect old cars, or simply have more fun while driving.
Three Pedals has a goal to expand throughout the New England area, but its old website was a barrier. The mobile version was unresponsive and unnavigable. There was no way to book through the website. Additionally, Cody would spend up to a month locking down a time for a lesson with a potential customer.
Three Pedals has a goal to expand throughout the New England area, but its old website was a barrier. The mobile version was unresponsive and unnavigable. There was no way to book through the website. Additionally, Cody would spend up to a month locking down a time for a lesson with a potential customer.
The Website Before
Booking
Design System
Mobile Layout
Mobile version is unresponsive
Booking System leads to just sending an email to Cody
Inconsistent Design system and use of Buttons and colors.
Mobile Layout
Mobile version is unresponsive
Booking
Booking System leads to just sending an email to Three Pedals
Inconsistent Design System
Inconsistent use of Buttons and colors
Goals
1. Utilize the UX Design Process to redesign and develop a responsive website for desktop and mobile.
2. To create an easy booking system that allows customers to book and pay upfront
3. To Improve SEO and Brand Consistency
2. To create an easy booking system that allows customers to book and pay upfront
3. To Improve SEO and Brand Consistency
Process
I started the process with an initial interview with the owner of the company. I then had him provide me a list of his previous students that would be willing to do an interview.
Discover + Define
User Research
Who Did I Interview?
I interviewed Former students of Three pedals. I had them talk to me about their booking experience and overall experience with the company.
Sydney
31 years old
Three Pedals Student
31 years old
Three Pedals Student
Ayla
31 years old
Three Pedals Student
31 years old
Three Pedals Student
Marshall
28 years old
Three Pedals Student
28 years old
Three Pedals Student
What did I learn from the Interviews?
I took all the information from my interviews and put them on sticky notes. I conducted 6 rounds of Affinity Mapping to narrow my problem statements for my User.
Affinity Mapping
Process
This process lead to generating three main problems for Three Pedals Users.
The Problems
1. The User needs an efficient way to book and view the instructors availability because they have a hectic schedule and feel annoyed with having to go back and forth via email.
2. The User Needs a responsive mobile site because they get frusterated when they can’t naviagate the site and book from their phone.
3. The User needs to know details about lesson because they they are unsure the the lesson will be worth their money.
2. The User Needs a responsive mobile site because they get frusterated when they can’t naviagate the site and book from their phone.
3. The User needs to know details about lesson because they they are unsure the the lesson will be worth their money.
I then generated statements on How I might solve these problems.
How Might We Solve These Problems?
1. HMW utilize a booking system that shows Cody's availability, Allowing users to book and pay securely at once.
2. HMW make the website responsive so Users can access and navigate the site on all devices.
3. HMW provide details about courses to ensure the lessons are worth the money for the user.
2. HMW make the website responsive so Users can access and navigate the site on all devices.
3. HMW provide details about courses to ensure the lessons are worth the money for the user.
The research process gave me the information to define the persona and their retrospective journey navigating the wesbsite.
Persona
Carrie
Needs/Wants
- Wants to learn how to drive a standard
- Needs an efficient way to book
- Wants to see instructors availability
- Wants trustworthy and straight forward copy
Frusterations
- Dislikes taking a long time to book a lesson
- Dislikes unclear copy and when prices aren’t shown
- Dislikes driving in the city
Carrie's journey navigating the current website
Prior to my ideation phase it was important to look at competitors before I began ideating. Likewise, I conducted a CNC Analysis and a feature priortization chart.
CNC Analysis
What competitors did I use?
I used indirect competitors in my CNC Analysis. I didn’t look at direct competitors because most of the websites showed evidence of a lack of UX practices. Likewise, I looked at large companies that showed evidence of a UX Process. I looked at companies that offer lessons such as Guitar Center, Large Driving Schools, and Personal Fitness Chains. I took all their features and put them into a feature Prioritization shown below:
The feature prioritization chart allows me to focus on what is important when generating User Flows.
Ideate+Develop
Flows and Sitemap
I incorporated this feature prioritization into a User Flow. It is quite complex so I simplified it into a prospective site map.
This sitemap lead into my generation of sketches into wireframes into my high fidelity prototype.
Sketches, Wireframes, Prototype
Once I had my high fidelity wireframes mocked up, I was ready to prototype. To save time, I decided it would make sense to prototype and test on Webflow.
Test
Testing Process with Webflow
I repeated this process three times for each User I interviewed. Here are my findings:
Findings
Test 1: “Some sections aren’t aligned in the courses sections, and the Copy could be more clear."
Test 2: “Titles are big and get cut off on my phone”
Test 3: “I felt stuck when I scrolled to the bottom of the page”
These Findings lead to my iterations:
Iterations
- Created a fix nav bar for both mobile and desktop to ensure the User can navigate to any page easily
- Added CTA to pages where users felt “Stuck”. Created a hierarchy of colors and button sizes to make the User want to book.
- Fixed the alignment to make the site more visually appealing and sourced a copy writer to make the wensite more compelling to the User.
Conclusions
Accomplishments
- Featured in Wall Street JournalA few months after the website launched, Threepedals got featured in the wall street journal article "The 20-Somethings Fueling a Stick-Shift Renaissance". View the article here.
- Efficient way to book and view the instructors availabilityUtilized Square free booking system and linked to Three Pedals Website. Users are now able to view his availability, book a lesson, and pay up front in a few clicks saving months of correspondance
- Resposive Web DesignUtilized a grid system and hero splits to create a responsiv view from desktop to mobile.
- In-Depth details about lessonsCreated in depth syllabus’s for each lesson to ensure the User the lesson will be worth the money.
Next Steps
- I set up google analytics for the site. I plan on monitoring metrics for the next month.
- I am looking for KPI's like bounce rate and conversion rates to book to see what can be improved.
- I will repeat the UX process for certain sections and pages that can be improved
