Product Design

Boatsetter App Redesign

Boatsetter
Case Study

Boatsetter App Redesign

Role
Collaborative project with a design team of three
Timeline
4 months
While working as a Product Designer on the Boatsetter Creative team, I worked on relaunching the Boatsetter Renters mobile app, a product that lets people find and rent boats anywhere in the world.

What is Boatsetter?

Boatsetter makes it easy for people all over the world to book a boat and spend a day on the water. It’s a peer to peer rental marketplace which allows renters to find and book boats, and allows boat owners to profit off renting their boats out. While working as a product designer on the Boatsetter Creative team, we worked on relaunching the Boatsetter Renters mobile app to help people find and rent boats all over the world. The purpose of the app was to allow users to access the full scope of the Boatsetter experience- finding and renting a boat, managing rentals and leaving reviews.

Goals of the redesign

  • Platform parity between web and app
  • Improve performance
  • Fix usability issues
  • Improve accessibility

UX Audit

I started this project by doing a complete audit of the existing app. From the audit we were able to see the areas which needs most improvement and had the biggest accessibility issues, and note which areas were of the most importance to be updated.

Audit

Design Inspiration

As a designer I found this project so exciting and full of potential. It's not every day that product designers get to reimagine a product from the bottom up. I took some time to gather inspiration, noting design patterns I thought we could take inspiration from, exploring new and more accessible colors, and gathering some great photos. This helped me clarify my vision for the product.

Design Results


Here's a look at the different concepts we presented. We ended up with a combination of the different ideas for the final product. Several of the new UI patterns which I proposed ended up in the final product. Some of those include the global oversize titles for main pages, the bottom navigation, the selector pattern and the back and X pattern.

Once we had our concept solidified, we continued with designing out the rest of the product. I took a lead on several features including the sections where users could track their bookings, message their captain and crew, cancel their booking, and see their account details.

Feature Highlight

One of the features which I took lead on is the bookings feature. It's the part of the app where users could view and manage any trips they had already booked.

Areas of focus:
  • Edit trip feature
  • Improved content hierarchy
  • Edit's pending status
  • Cancel booking feature
  • Placement of key actions to improve experience
  • Redesigning and organizing booking labels

Handoff and Redlines

One of my favorite things about working at Boatsetter was the attention to detail when we handed off designs. We created a page in our final figma file called “redlines” and we carefully documented the spacing, typography and intended animations. The purpose in doing this was in order to have a source of truth for all our designs in case developers had questions, or in order to reference to the Design QA process.

Component Library



As a final step of this project, I created all of our new components in the shared library, and updated our design system documentation. I designed and tested each component and then shared them out with the design team.

Conclusion


We launched this app right before summer, which is boating season. Here are some of the results.

  1. Data showed that after launch, conversion rates on the app went up significantly, with users booking twice as often when using the app vs the website.
  2. We also found that users were searching more when using the app- users on the app viewed 2x more boats then the website.
  3. Once we relaunched, the load time was increased almost 3x as fast on some of the key parts of the expereince like PDP and checkout.

After we launched, we continued iterating on this product as we gathered data. Working on this project was such an inspiring experience, and I was lucky to work alongside my manager Al Morin and my colleague Santiago Bueno. We worked closely with our developer, Alex Lopez, to get the product live on time. Looking back, this project stands out to me because we were able to take time to explore UI options. I think we ended up with a better product then we would have otherwise because we took the time to be creative.

If you're interested in booking a boat near you, I would highly recommend you download the Boatsetter app, and you can see some of this work live! (And also find a really great boat to book.)

Other Projects