Dockshare UX/UI Redesign

Dockshare mockup

Overview:

Dockshare is a startup in the outdoor recreation space and has been called “AirBnB for docks”. Dockshare allows dock owners to safely list and rent their docks to boaters who want to explore new areas and avoid crowded boat ramps. Dockshare is building a community of boaters and dock owners who “want to make the waterfront accessible to all who love it.”

The Challenge:

Dockshare launched a website in 2021 that allowed dock owners to list their docks and boaters to rent docks. As of March 2023, they had successfully recruited over 300 dock owners to list their docks on the platform. They were also starting to receive some bookings from boaters, but not yet at the scale they had hoped to reach.

The Dockshare team knew that there were many issues with the user experience from both the dock owner and boater perspectives. They had analytics that showed that dock owners were starting but not completing the process of listing their docks, as well as data that showed that boaters were searching for docks but not booking.

Dockshare hired me as a UX/UI consultant to review the issues with both the dock owner and boater user flows. I created visual solutions that made the processes of both listing and booking docks easier, more intuitive, and fun; with the goals of supporting the scale of both dock listings and bookings/revenue.

Client:

Dockshare

Skills:

  • UX Consulting
  • UX/UI Design
  • Custom Icon Design

Tools:

  • Figma
  • Illustrator

The Process:

I started by reviewing both main user flows before doing a deep dive into the issues with the team. I wanted to examine the steps of each flow with a fresh, unbiased perspective, so that I could identify issues that the team might not see because of their close proximity to the development of the platform. I created extensive documentation of my findings, from minor branding inconsistencies to major problems with the dock listing process. I included screenshots of the issues and preliminary written suggestions for making improvements to the user experience and interface.

After my initial review, the team and I met to share what we each believed to be significant pain points in the dock owner and boater experiences. We discussed Dockshare’s ideal customer avatars for both user types and how to make each experience more user-friendly to each of these avatars. We also identified which elements to prioritize.

In this case study, I am highlighting a few of the key areas I redesigned for the Dockshare user experience:

  • Book a Dock – Search Bar/Function
  • Book a Dock – Search Results
  • List Your Dock – Set Your Standard/Default Rates
  • List Your Dock – Set Your Property’s Default Availability
  • Availability & Pricing Calculator (a brand new feature)

However, there are many additional UX elements and features that I redesigned, such as the individual dock listing page, booking process, and other steps in the List a Dock process.

UX Element Redesign #1: Search Bar

The first element I redesigned was the search bar, which is the first step of the booking process for boaters.

Search Bar – BEFORE:

The existing search bar was overly simplistic and it wasn’t immediately clear to users what they should put into the search bar. It also wasn’t obvious what to do with the “filter by” buttons and some key features were missing, such as the ability to choose an hourly or daily booking. Additionally, the styling felt dated and some of it was off brand:

Dockshare search bar before

Search Bar – AFTER:

The redesigned search bar includes a more obvious location field, a rental type field in which the user can choose to book by the hour or day, date fields, and an area to enter their boat details. These fields help the user find the type of dock they are looking for much more quickly, efficiently, and intuitively. The “distance from location” field was relocated to the filters on the search results page (which is covered later in this case study).

Dockshare Search Bar after<br />
Dockshare search bar with calendar

When the “hourly” rental type is selected, the fields dynamically shift to include a “time period” field so that uses can select the exact window of time they’d like to book a dock:

Dockshare search bar time selection
Boaters can optionally add their boat’s dimensions/details so that they can filter out docks that aren’t the right fit for their boat:
Dockshare search bar time selection

UX Element Redesign #2: Search Results

Search Results – BEFORE:

The listings were text heavy and not particularly readable, making it difficult for boaters to quickly scan the results to find what they were looking for. They also lacked uniformity, especially when dock listings did not have photos, making the layout feel scattered and unprofessional. There was also no way to filter by dock type, price, or amenities:

Search Results before

Search Results – AFTER:

My main goal was to make the results easily scannable so that boaters can quickly identify docks they are interested in. I did this by placing the listings in a grid layout, reducing text to a simplified title format (dock type and location), showcasing amenities in small icon format (instead of text), and adding the price on its own line. Listing photos are a uniform size, and listings without photos have a “photo coming soon” placeholder image.

I also added an icon-based dock type filter at the top of the page, as well as a “filters” button that opens a pop-up with even more ways to filter results, including by distance, price, and amenities.

Dockshare Search Results page - AFTER
Dockshare Search Results page with Filters pop-up - AFTER

UX Element Redesign #3: List Your Dock – Property Availability & Standard/Default Rates

There were originally 5 steps in the “List Your Dock” process for dock owners. The Dockshare team and I identified step #5, the Property Availability & Standard/Default Rate Setup page, as the biggest problem area in the listing process. While I did make some UX/UI improvements to the first 4 steps as well, I focused most of my time on this fifth and final step.

List Your Dock Step #5 – BEFORE:

List Your Dock Step #5 - BEFORE

List Your Dock Step #5 – AFTER:

List Your Dock Step #5 - AFTER
I also relocated the dock owner’s earning potential to a more prominent location above the fold and added a fun icon that stirs excitement in the user.

List Your Dock Step #5(b) – BEFORE:

The process to set up the property’s availability was the most confusing, unintuitive step of the entire List a Dock user flow. Although there were written instructions that explain the dock owner should click on the months to set availability and set specific dates, the process was confusing:

List Your Dock Availability - BEFORE
List Your Dock Availability Popup BEFORE
After clicking on a specific month, a pop-up window opened with a full calendar of that particular month. However, it was not clear what the dock owner was supposed to do next. Additionally, the orange color choice for available dates was not standard for bookable availability calendars, and added to the confusion (typically unavailable dates are grayed or darkened, and available dates are left white or a light color).

It also wasn’t clear if the dock owner’s calendar would be open indefinitely, and there wasn’t any option to choose how far in the future a boater could or couldn’t rent their dock.

List Your Dock Step #6 – AFTER:

Dockshare List a Dock AFTER
In the newly created Step #6 of the List a Dock process, I added an option for dock owners to set up a rolling timeframe in the future in which they accept bookings:
Dockshare List a Dock booking acceptance window
I replaced the check boxes for the months that property is available with icon-based buttons, and more clearly delineated between available and unavailable months, making available months green and unavailable months grayed out with X’s through them.
Dockshare List a Dock available months

I also removed the confusing pop-up and let users know in the language at the top of the page that they will be able to set up date-specific overrides (I added a new, separate, robust calendar that dock owners can use to fine-tune their availability and pricing after the initial setup process – scroll down to the next section to check it out!).

Redesigning the Days/Times Availability Set up on Step #6

The final major issue was the confusing nature of the days/times availability set up. When clicking on a time field, a calendar window popped up, which was completely illogical:

Days/Times Availability BEFORE
I swapped the datepicker for a drop-down box with time options instead, making the task of selecting available times much simpler and easier to complete:
Dockshare day/time selection AFTER

UX Element NEW Feature – Availability/Pricing Calendar

Another major pain point for dock owners was that after completing the initial listing process, it was difficult to change their dock’s availability and pricing. The only way to accomplish this was returning to the same confusing interface from the initial setup process.

The Dockshare team and I collaborated on a solution, and decided to design a separate area with a large editable calendar:

Dockshare dock owner dock availability and pricing calendar
Dock owners can quickly toggle the availability for each month on and off, as well as set availability for regular, recurring days of the week, but can also fine tune their availability and pricing by selecting specific date ranges:
Dockshare dock owner dock availability and pricing calendar with options
After selecting a specific date range, dock owners can quickly edit their dock’s availability, pricing and the types of bookings that are accepted (hourly, daily, weekly, month). They can also easily set up discounts, see a preview of what boaters will pay and their net earnings, plus set up minimum booking lengths as well.

The Result

The overhaul of both main user flows – the List a Dock and the Book a Dock processes – has created signicant improvements in the usability and readability of both dock owners’ and boaters’ experiences. The interface is also cleaner, more modern, and more consistent with the Dockshare brand.

The Dockshare team has been very pleased with the improvements. They are awaiting their next round of investment funding and are eager to have their development team implement the changes very soon. We look forward to optimizing the user flows for mobile devices, and conducting more in-depth user research and testing to continually improve the Dockshare platform.

We expect the improvements to help more dock owners complete their listings, and more boaters to book docks – resulting in increased revenue and growth.

“Julia was amazing to work with! I was impressed by how quickly she picked up everything we were trying to achieve but more importantly I was impressed by the results (the designs). Julia took the time to understand our brand from a current state and what we ultimately wanted for our brand as well. When there were questions she asked them and that always led to a great discussion. She took the time to really think about the experience for each persona and what that user would want to see, be inspired by, need to understand at a glance, etc. I appreciated how much thought went into the changes but as a startup I really appreciated how rapidly she designed and iterated. At this point we are just anxious to get the funding we need to take the next steps and dive deeper with Julia and start to actually implement her amazing designs!”

Lauren Pearlowitz

Product Manager, Dockshare