My Girl the Boat

Conceptual Website Redesign

Redesign the visual layout of the existing website and add e-commerce experience to make the booking process easier.

Overview

This project focuses on building an interactive wireframe prototype and creating an e-commerce experience for an existing client’s website. We were given a persona as our target user to generate a narrative around. I chose “My Girl Charter Yacht” as my client. 

See Current Client Website

Some info about my client

My Girl is a local yacht service that is family owned and operated for 19 years in the Northwest that primarily offers private chartering and day cruise tours. For chartering, they have extremely flexible dates, times, and pickup locations, and can be booked for special events, including parties, special events, weddings, rehearsal dinners, corporate events, team building, tours, education programs, and birthdays, with catering available as well.

User Research & Interview Methodology

To start off my research process, I attempted to interview the Captain of the boat/management team through their contact form, phone, and email, but was unable to reach them after a few follow-ups. I specifically wanted to ask their insights regarding their current reservation process, how they feel about the website, and if there are any unfulfilled needs. Due to the inaccessibility of the yacht’s physical location, I shifted my focus to understanding their customers. I looked through and analyzed reviews from past customers posted on Yelp, Facebook, and Google to better grasp the overall experience, business operation, and customer satisfaction. I individually messaged 11 of the more recent customers who left reviews on My Girl’s Facebook page to ask them about their experience, and was able to obtain answers from 4 guests.

Based on their feedback, I created an affinity map to identify the behavioral trends and mental processes of the customers in relation to their experience with the business. All four of the subjects expressed that they had a positive experience with the event, boat, and crew. They also directly contacted the business, primarily through information found on social media, to book their event since currently there is not an online reservation process. 

Aside from past customers, I interviewed a different set of 5 subjects who had prior experience with the booking process for private yacht, cruise tours or similar activities, with the majority of them having used online booking. I particularly aimed to examine the specific information that subjects need to look for before they book the activity, which would then inform my design of the booking process as well as the overall website layout and content.

Competitive & Comparative Analysis

I researched 5 yacht businesses with similar scope as my client that I identified as direct competitors. I analyzed and compared the businesses for both their website and services. I identified key pain points of my client’s current website in terms of what it is lacking that most competitors have, including consistent grid, pricing details, and schedule, which are also information that interviewees stated they need to see before booking. For service, I would be adding online booking as the e-commerce experience for the client.

For my comparative analysis, I focused on businesses that offer the service of activity-based online booking, which is the e-commerce experience I will design. I identified some important features I will implement for my website redesign, including adding booking options, the function to check availability, and a straightforward checkout process.

For my comparative analysis, I focused on businesses that offer the service of activity-based online booking, which is the e-commerce experience I will design. I identified some important features I will implement for my website redesign, including adding booking options, the function to check availability, and a straightforward checkout process.

Persona

For this project, we were provided with a selection of personas to design for. I identified John to be the persona who is most aligned with the business, thus I chose him to be the design target of my client.

John is the single parent of a 12 year old whose interests change regularly. He wants to find activities for her that he can also participate in. As a cost-conscious individual, he seeks fair price and wants his purchases to reflect his taste.

Based on the key words of “family” and “fun” from customer reviews, I feel that John’s needs are most associated with these adjectives, because he’s seeking family friendly activities that he can enjoy with his daughter. A ride on a yacht also embodies quality, exclusivity, and coolness, all of which are factors he cares about. It’s also a rare occasion kind of recreational activity, which is helpful to his case since his daughter’s interests change regularly, meaning he needs to avoid mundane or routinely kind of activities to spark her interest. Going on a yacht trip also reflects good taste and tends to gain social attention.

John needs a family-friendly, fun, and cost-effective activity he can enjoy together with his 12-year-old daughter during her winter break. The activity needs to be unique and exciting due to his daughter’s ever-changing interests.

User Flow

Information Architecture

The sitemap for the current Website is very straightforward. In order to add in the e-commerce, I decided to shuffle and reorganize the content. I conducted 4 card sorts to figure out the labeling for the main navigation and arrived at a new sitemap, with redesigned Information Architecture based on card sorting results and analysis.

Sketches

Paper Prototype

Usability Testing

First Iteration

For my first round of usability testing, I tested my initial prototype with 4 subjects to assess the interface’s efficiency and ease of use. I jotted down notes during each usability test to identify the recurring errors and evaluate what’s the best solution to minimize these errors. 

Second Iteration

I tested with 3 participants for my second round of testing.

Third Iteration

For my third round of usability testing, I tested with 3 participants, two of whom have tested with my paper prototype.

Wireframe Prototype

Next Steps

To proceed with the project, I would continue to create high fidelity mockups and conduct more rounds of usability testing. I would hope to get in touch with the management team of my client to obtain feedback and explore more details about the booking options, such as what the tour would offer and how to prepare for it. I would also want to add a FAQ section to the website to outline logistics details such as cancellation and refund policy.

Reflection + Key Takeaways

Through the course of this project, I was able to better grasp the difference between competitive and comparative analysis. It was also my first time trying the technique of card sorting, which helped me greatly in the process of understanding how users categorize different content to inform my overarching navigation labels as well as nested details. I also strived to weave my problem statement and solution into the narrative of the persona through the storyboard. For usability testing, I learned of the importance of having a thorough script to guide participants so that the testing process can be smooth and consistent.