Monterey Bay Kayaks
The following is a case study for my first academic project in my Master’s Degree Program (which means I have learned and improved since then, A LOT!)
My Role
Researcher and Designer
Team Members and Stakeholders
Contributing members include members of the TWC540 User Experience class. Michael Madson serves as stakeholder with a supervisory role
Project Duration
The project coincides with the TWC540 User Experience course at Arizona State University
Project duration was from Jan 2023 to Feb 2023
Problem
The tour search and booking system is not optimal, the overall appearance is problematic and not currently Web Compliance Accessibility Guidelines (WCAG) compliant
Goal
To optimize the tour search and booking system, including purchase completion, and updating to meet WCAG compliance
Scope
The current scope is focused on the tour search and booking portion of the site, with possible future iterations applying to the entire site
Background Information
Monterey Bay Kayaks is a small business in the tourism sector that provides education and tours of the Elkhorn Slough and Monterey Bay area. They attract local customers as well as clientele from visitors to the Central California area. Monterey Bay Kayaks offers a variety of tours that differ in location, length, and features; each tour type is typically available a few days each week.
Monterey Bay Kayaks current website
User Research
Who are the users: Proto-Personas
Monterey Bay Kayaks has a wide variety of users encompassing all genders and races, with a large age range of approx 18-60. The users can be people who live locally or semi-locally and are often repeat customers. The users are also tourists who visit the area from more distant locations, are often first time customers, but may also be repeat customers.
Heuristic Markup
A heuristic markup was conducted to understand how a user would experience the current website’s tour search and booking section and to understand the journey map a user takes through the process
Competitive Audit
Direct Competition
Indirect Competition
A competitive audit was performed with specific interest in the search and booking options, as well as the overall appeal of the website. points of interest in the audit include tour calendar options and standard journey from search through purchase confirmation screens.
Preliminary User Research Survey
Design and Prototype
The prototype design begins on the guided tour search page, future iterations may contain the home page, classes, store, and other pages currently on the Monterey Bay Kayaks site.
This iteration is prior to usability testing.
Usability Study
I conducted in person usability testing sessions to see how the users could navigate the first iteration of the prototype. The sessions began with an initial survey for demographics and a little background information. The session continued with a 5 second test. The participants were shown the tour booking page for 5 seconds, and then given a preprinted form with adjectives, and asked to choose the words on the page that they feel match the page they viewed. This test was used to gauge the first impression of the site and gather feedback on the design appeal.
The usability testing session continued with asking the participants to perform three tasks. Data collected during the tasks was click path, time on task, failure rate, as well as qualitative data as the participants were asked to think out loud during the process.
Usability testing participants
5 participants
Between the ages of 18-52
Reported genders were Female, Male, and Non-binary
All participants had reported they have taken a guided tour with Monterey Bay Kayaks previously
Reported experience with online purchases varied from ‘rarely shops online’ to ‘shops online once a week or more’
5 Second Test
The results of the 5 second test showed the term “Easy to Use” was chosen most overall, followed by “simplistic”, “effective”, “clean”, “appealing” and “useful”
Graph of results from the 5 second test
Word cloud depicting results of 5 second test
In Person Usability Test Sessions
During in-person test sessions, participants completed three tasks to assess navigation clarity and identify pain points:
Booking a tour (Primary Task): 100% completion rate with the same click path. Average time: 1 min 13 sec.
Finding the Wednesday special tour time: 40% failure rate, indicating a navigation issue. Successful participants completed it in 8.5 sec on average.
Removing an item from the cart: 100% success. 80% used the circled 'X', while 20% used other methods.
Participants also provided direct feedback on design and functionality, highlighting both positive aspects and areas for improvement.
Black Hat Session
I conducted a black hat sessions with an in-person small group setting to view the prototype and provide critical feedback about the design and function. The group was comprised of five participants, males and females, age ranging from 18-60, all participants have previously taken a guided tour with Monterey Bay Kayaks. As moderator, I informed participants to be as free and open as possible, and not to fear “hurting one’s feelings.” Feedback was provided through an open discussion and qualitative data was recorded. The session was highly successful with participants providing crucial feedback. The following are notes from the session.
Color
The color yellow used is boring, offensive, flat, and “the ugliest color”
The blue buttons do not look good with the other colors
Yellow button for newsletter is not a good color.
Specifics Throughout the Design
More photos, less white space
Would like a “My Reservation” page option to be able to see confirmed reservations
Would like a “print receipt” option from confirmation page
Footer, after find us, there should be a colon
Wed special should be a link
Headings and subheadings could use different alignments than they are now, such as centered, or using bullets for the features section
The photos are of the backs of heads, need more smiling faces
Logos are too large
Font
Maybe the font is odd, the word Tour did not look spelled right, even though it is
Font could be larger in each tour description and in cancellation policy
Font is too big, to blocky
Font is to business like, it should be more fun
On the pop-up, the “choose a different tour” button is too light
Fonts could use some colors
Calendar
The calendar search area looks amateur, pedestrian
The calendar area needs more color, or an image, it’s too empty
Calendar should start from Sunday, not Monday
From the tour search page, the calendar and text are disconnected, the calendar could be bigger
Accessibility
The current website design suffers from significant issues with accessibility and Website Compliance Accessibility Guidelines (WCAG) compliance. The main issue on the current website is the readability of the font. Following guideline standards, the new design will provide necessary updates in accessibility.
Fonts are larger and have improved readability, as well as WCAG compliance
Colors are optimized for accessibility and contrast ratios as well as WCAG compliance
Alt Text has been added to all images to make the site accessible for screen readers
Next Steps
Using the information from the in-person testing, 5 second test, and black hat session the design prototype will be updated. The color palette will be changed to remove the “ugly” yellow color from the design. Fonts will be updated to be less “business-like” and “blocky.”. Both color and font updates will continue to be WCAG compliant. Page headings will be updated to a “line” format, with the addition of a kayaker image along the line to show the user the current page and where that page is in the process. This option gives the page a more fun experience, as per research from both the 5 second test and black hat sessions noted a need for more fun, less “boring” and “dull.” A “print receipt” option will be added to the confirmation page. The calendar will be redesigned and made larger to reduce white space. Where possible, photographs will be updated to include more “smiling faces”
Following a redesign, usability tests will be conducted again, and further updates can be made from the results of the future testing. Once a design is finalized, they will be handed off to a team for implementation.
Graphic of Kayaker for the updated page headings
Updated color palette
Updated font package
Thank You for viewing my project
(My professor made me add that)