Swell helps boaters discover and reserve parking space, and helps marinas spend less time managing assets and more time generating revenue from them. Traditionally done via pen, paper and phone calls, Swell's web application manages the entire booking process. Hook, line and sinker. View live project here.
As the team’s lead designer, I was responsible for overall experience strategy and product design. Leading the UX work, I produced all major deliverables and worked with Swell’s engineers and business team to refine the application’s user experience over a period of 5 months for its launch in the US.
Having already built an MVP and tested it in the Atlantic region, Swell wanted to rapidly expand its service.
“Streamline user on-boarding and listing discovery.”
With its sights set on the US market, Swell had two primary objectives:
- Streamline user on-boarding for expansion into the US.
- Improve listing discovery and management for a more intuitive user experience.
With the end-goal of a streamlined on-boarding and listing discovery experience, I worked in reverse with users in mind as a starting point. From there, I was able to establish a baseline of the application's current performance and where the gaps and opportunities lied.
Conducting several on-boarding tear-downs with team members and new users, we established a baseline on-boarding time of approximately 25 minutes from sign-up to publishing a listing. Note: This baseline time required the help of a Swell Advantage employee to guide new users through the process.
In favour of scalability, we aimed to create a process that:
- Enabled users to sign-up without the help of Swell Advantage employee.
- Reduced on-boarding time in half.
This early goal-setting set the tone for the entire design process.
The assumption became: break the on-boarding process down into bite-sized, linear steps and users will have an easier time on-boarding without assistance.
"Bite-sized chunks. Short feedback cycles."
Given the scale of Swell's application, we started by converting research findings from on-boarding tear-downs and interviews into user flows.
We broke user flows into small groups, starting with the on-boarding experience. After-which, we progressed with listing discovery, reservation and booking, and dashboard management.
Breaking the application into small chunks allowed us to shorten our feedback cycles with existing users. As a result, we created several user flow iterations to refine the overall experience.
Focusing on user on-boarding and improved listing discovery, I performed several stakeholder and customer interviews to uncover qualitative insights for Swell Advantage’s two-sided marketplace (i.e. boaters and hosts).
"Who are we building for?"
Compiling my findings, I created personas for each user-type to reference throughout the design process.
Insights that influenced design decisions:
- “Tech adoption”: Hosts are predominantly of a demographic that do not consider themselves tech savvy.
- “Real-time or no time at all”: Boaters often require real-time docking availability - meaning Swell had to accommodate instantaneous reservations, bookings and payments within their application.
- “Stacks on stacks”: Hosts require varying degrees of listing and marina management. In other words, some hosts may manage multiple listings and marinas at once, making marina management and listing management a quintessential functionality component.
- “TMI”: New users to Swell’s app are often overwhelmed with the many signals presented to them during the on-boarding process. As a result, hosts have difficulty setting up listings effectively, and subsequently boaters have difficulty discovering available listings.
- “Size matters": It may sound obvious to some, but all boats have varying lengths, widths, beams, depths, weight and drafts. All of this needs to be accounted for when displaying listings that suit boater needs. In order to be effective, listing availabilities must dynamically update to accommodate docking space usage. In other words, if a big boat parks in 1 listing - where 2 boats could normally park, the second listing availability must be updated accordingly.
Once a performance baseline was set for Swell’s on-boarding process and primary user-types defined, I investigated the on-boarding process of comparable services; namely, Dockwa, Slipfinder and Airbnb.
"What exists already?"
Conducting on-boarding teardowns of each comparable product, it became clear that users are given limited affordances throughout the on-boarding process to reduce cognitive load and simplify sign-up.
Understanding available alternatives and comparable services, I progressed into building several user flows for Swell’s current and prospective users while referencing research findings in the discovery process.
USER STORIES & USER FLOWS
Gathering feedback from Swell’s team, users and competitors, I created user flow models of known use cases. After several user flow iterations, I successfully mapped out all known action sequences for each pathway.
"What do users expect?"
Emphasizing the importance of this step with the team, we established collective buy-in and product ownership before progressing in the design process.
WRITING SKETCHING & WIREFRAMING
With user flows defined, I drafted rough sketches of each screen, listing all components needed to make them function as intended. Low-fidelity mock-ups of the application’s interface followed shortly thereafter.
Using tools like Pinterest, Dribbble, Instagram and referencing user personas, I created mood boards to take shape of the tone and feel of Swell Advantage’s new web app.
We broke the on-boarding process down to its fundamental components and split it into two distinct funnels (one for each user group).
“Benefits of data-driven design.”
Compartmentalizing on-boarding into smaller steps that dynamically saved user progress, enabled Swell to better measure conversions and target individuals who have dropped off at specific stages during onboarding. As a result, Swell can optimize on-boarding and marketing campaigns based on constraints identified through usage data.
User research indicated users required the ability to create multiple marinas and listings during on-boarding. With this in mind, I simplified navigation cues to reduce cognitive load previously observed in users.
Keeping the primary value proposition for marinas and hosts in mind, I emphasized creating a dashboard experience that accommodated users at both ends of the spectrum (i.e. users managing just 1 listing all the way up to users managing several marinas and listings at once).
Maintaining a focus on the business goals of Swell’s core users allowed me to ask the right questions and identify how the app fits into their lives. Rather than creating fancy aesthetics, I opted for a minimal interface layout with emphasis on orderly navigational components.
With realtime docking and mooring for boaters as the application’s core benefit, I crafted a layout that played to quick, easy discovery and booking.
Respecting users of varying extremes (i.e. recreational, single boat owning users, to frequent, multi-boat owning users) and optimizing for speed, I built a booking experience that, by default, saves a boaters last used boat during checkout. At the same time making new boat selection easy.
On top of that users are granted the ability to set a default boat within their profile for a faster reservation experience.
One of the biggest takeaways was how complex two-sided marketplaces can be. In the case of Swell Advantage, it was accommodating varying levels of information management for both sides of the market (i.e. boaters and hosts). For example, hosts can have multiple marinas with multiple listings, respectively. However, from a boater’s perspective, only listings are of relative importance.
"Keep an open mind."
Accommodating both user groups was only possible with continuous stakeholder feedback and by working closely with existing users.
Keeping an open mind allowed us to identify these challenges early in the design process.