As the number of products you offer grows so too does the challenge of helping customers discover them. In this project we developed a site-wide search system enabling SwimTrek’s customers to quickly find their ideal trip and any other content relevant to their interests.

Since we built SwimTrek’s site, in 2015, they have significantly increased the number of package holidays they offer, as well as adding hundreds of blog posts and other staff-generated pages as part of their content marketing strategy. By 2020 it was becoming increasingly clear that the site’s existing browsing tools were insufficient to navigate this large body of content. To address this we reviewed various search interfaces with SwimTrek and arrived at a design that incorporated the following features:

• a site-wide, keyword search-box
  • similar to that on popular e-commerce sites, with…
  • clickable search suggestions updated as the user types
  • clickable result previews enabling the full search interface to be skipped
• a Google-inspired search results interface
  • with multiple “verticals”: All, Trips, Dates, Blog and Other
  • thus allowing the user to quickly view keyword matches for records of a particular type
• an AirBnb-inspired filter interface
  • filter buttons that both launch the filter’s menu and display a summary of its current setting
  • result count previews indicating how many results will be shown with the current settings
  • interactive histograms for range-based filters like price and trip duration

To power the search interface we evaluated several technologies before settling on Algolia, a hosted search-as-a-service provider with the indexing and querying features we needed at a reasonable monthly price. The search interface is implemented as a Vue.js Single Page Application (SPA) that is loaded as part of the site’s standard JavaScript bundle, so that it can take over control of the page instantly when search is invoked. When combined with the speed of Algolia’s API this makes the search interface incredibly snappy, providing an excellent user experience.

Since its introduction, the Universal Search interface has proved to be very popular with the site’s visitors, who now routinely use it as their main site-navigation tool. The breadth of content viewed by a typical visitor has increased significantly, demonstrating that the project has been successful in increasing discoverability. Furthermore, search analytics have provided SwimTrek’s marketing and product teams with valuable insights into how customers choose their ideal holiday, highlighting an additional benefit of a fully-featured search interface.

• Date: August 2020
• Client: SwimTrek

In this project we designed an intuitive interface that allows customers to refine the list of trip dates that can meet their requirements, helping them to avoid the frustration of starting a booking only to discover that their chosen date is unsuitable.

SwimTrek give their customers a lot of flexibility in rooming arrangements: single-supplement, roommate matching, additional non-swimming guests, etc. However, because trips have a fixed inventory of reserved rooms, the options that can be offered to a customer must be limited as a trip fills up, in order to ensure that there are sufficient rooms left to accommodate the target number of swimmers, and to satisfy additional business constraints.

Automating this process was a key challenge when we originally built SwimTrek’s site. We developed a custom Room Allocation Engine that quickly determines what rooming arrangements can be offered to a customer given their needs and the current state of the trip. In the original build, the engine was only called during the checkout process, updating the available room offers after each room selection. In this project we exposed the Room Allocation Engine via a private API consumed by our in-page widget and added support for efficient bulk processing of multiple departures.

The in-page widget was developed using Vue.js, and provides a familiar table interface, but with rows that can be expanded to reveal additional details for a given trip date. The call-to-action directs the customer to a form that collects summary-level information about their guests and desired rooming arrangements, whereupon the system issues an API request, and updates the call-to-action buttons with messages indicating the suitability of each departure date.

By allowing customers to better explore availability, this enhancement reduced the number of telephone, chat and email enquiries related to trip capacity, reducing the burden on office staff and improving customer satisfaction.

• Date: July 2018
• Client: SwimTrek

Once a customer has indicated that they wish to make a purchase, it’s generally a good idea to get out of their way and get them to the “PAY NOW” button ASAP. In this project we redesigned the SwimTrek checkout experience to make it as frictionless as possible, especially for returning customers.

As a result of new EU regulations, SwimTrek needed to add 3D Secure support to their card payments which, in turn, necessitated a change of payment processor. After reviewing options with SwimTrek we agreed to go with Stripe. Given that the move to Stripe required significant rework to the checkout interface anyway, SwimTrek opted to go with a full redesign, with the goal of making the time between clicking “BOOK NOW” and “PAY NOW” as short and pain-free as possible.

We reviewed the informational requirements of the booking process, identifying any information that could be gathered after the booking was placed, and thus removed from the checkout. For the remaining information we explored opportunities to pre-fill the checkout form based on:

• availability search settings prior to pressing “BOOK NOW”
• profile information held on record for the logged in user (if returning)
• available options, e.g., pre-selecting room type if there is only one choice remaining

The resultant design was implemented as a Vue.js Single Page Application (SPA) that interacts with a new private API we built on top of the site’s exiting booking system. The checkout is presented as a simple three-step process (Log In → Details → Payment), but is flexible enough to deal with multiple edge cases:

• trips with multiple hotel stays or none at all
• trips with paid or free optional extras to choose from
• customers booking on behalf of others but not attending personally
• customers with account credit to contribute towards the cost of their trip

The same interface doubles up as a self-serve edit interface that customers can use to update their trip after booking (e.g., adding a guest or changing a room) and is also used by staff to create/update bookings on behalf of telephone customers, presenting them with additional staff-only options that customers don’t see.

Since launching the new interface, the average time to complete the checkout process has reduced from three minutes to just one, the number of abandoned bookings has halved and the proportion of bookings completed by customers themselves has increased significantly, reducing pressure on sales staff, especially during busy periods.

• Date: August 2018
• Client: SwimTrek

In this project we built a custom, horizontal calendar interface tailored to the needs of SwimTrek’s operations team.

SwimTrek’s operations team take care of trip logistics, ensuring that personnel and equipment are in the right place at the right time, for hundreds of departures all around the globe. To provide an at-a-glance overview of the year’s trips, they had developed a colour-coded, shared spreadsheet that displayed salient information about each trip in a horizontal timeline.

While very useful, this spreadsheet approach had some significant shortcomings. Chief among these was the fact that the information in the spreadsheet was not linked to that in the website’s database, meaning lots of manual copying back and forth, with the potential for costly human error posing a significant business risk. Consequently, SwimTrek asked us to build a similar interface into the admin area of their site, with the following features:

• intuitive UI
  • the same layout and colour coding as the spreadsheet staff were familiar with
  • drag-and-drop adjustment of trip start and end dates
  • the ability to filter by multiple trip properties
  • a fly-out form allowing the most important information to be set
• issue management
  • automatic detection of resourcing issues, e.g., guides being double-booked or working too many consecutive days
  • the ability to add manual issues
  • the ability to dismiss/restore issues of either type
• data management
  • the website’s database as the “single source of truth”, with all data fetched from and saved to it
  • collaborative editing, with indicators to show which users are working on the same year, and with their edits being instantly visible without page reloads

We built the interface as a Vue.js Single Page Application (SPA) backed by a private API we built on top of the site’s departure management system. We used the FullCalendar library to power the timeline UI, and Pusher to power the collaborative editing, with messages being pushed to all connected clients whenever edits are made to the year they are working on.

The new interface has been a big hit with the operations team who now use it as their main tool for day-to-day activities. They report that it saves them a lot of time over the old spreadsheet approach, and has made the work less stressful thanks to the automatic issue detection. The interface has also proved to be a useful planning tool for the product team, who use it to explore scenarios for future trips.

• Date: April 2019
• Client: SwimTrek

In this project we developed a series of Business Intelligence (BI) dashboards for SwimTrek’s management team, using data already available in their website’s database.

When your website is the primary tool used to operate your business, chances are its database contains a wealth of insights just waiting to be discovered. This was certainly the case for SwimTrek and, in this project, they asked us to help extract those insights into a family of dashboards that senior management and department heads could use to better understand the state of the business.

In close collaboration with SwimTrek’s management team we first mocked up the desired dashboards (over 20 in total), designing the charts and the methodology we would use to generate them, given the available data. We then reviewed available BI tools, finally settling on Tableau owing to its rich feature set and ease of use.

The records in a website’s database are typically split across many tables (for good reason) but this format isn’t well suited to analytics. We therefore built an analytics engine that consolidates the website’s data into a more human-friendly format once every hour, pre-computing any calculations that would be impossible or inefficient to perform within Tableau. We then built the dashboards using this data source, implementing the remaining calculations using Tableau’s (spreadsheet-like) functions.

The resultant dashboards have transformed the way management run the business, with key analyses that previously took days to compile by hand, now available 24/7 in a graphical, interactive and easy to understand format. The countless new analyses added by this project also gave SwimTrek new insights into their customers and their purchasing behaviour, stimulating new ideas on how to grow the business.

• Date: January 2019
• Client: SwimTrek

A custom e-commerce platform, tailored to your business, can incorporate many innovative features that give you an edge over the competition. In this project we built a custom platform for SwimTrek, an adventure travel company with innovation at its heart.

In 2015 when SwimTrek contracted us to replace their website, they were already the world’s leading provider of open-water swimming holidays, with a thriving business and a loyal following of returning customers. However, they had outgrown the capabilities of the off-the-shelf travel software they were using, with staff having to use time-consuming, offline workarounds (often spreadsheet based) to implement many of the novel business functions that had won SwimTrek it’s market-leading position.

We engaged in a comprehensive review process with senior staff, determining what customer-facing and backend features the new site would need in order to automate SwimTrek’s most important business functions, including:

• social features for participants travelling on the same departure (guide and guest profiles, group discussions, private messaging, shared photo gallery, etc.)
• an invite system that enables a booking’s lead customer to invite their other guests to sign up, enter their own social, travel and contact details, and participate in the trip’s social features
• a booking system that can automatically manage room inventory, offering solo-travellers single supplements, or automatic roommate matching, or allowing additional non-swimming guests, only if remaining room inventory can support it
• a self-serve checkout that doubles up as an edit interface, allowing customers to update or cancel their own booking, with a card refund (or an account credit) issued automatically based on their trip’s refund policy
• staggered payments, with automatic reminder emails
• a loyalty point system: “SwimTrek Miles”
• a fully-featured CRM system allowing staff to control the content of customer-facing pages
• a media asset library with image/video upload, editing and optimisation
• a comprehensive admin system allowing staff to manage packages, departures, bookings, payments, etc.
• and much more…

The main application is built using Ruby on Rails, backed by a Postgres database. We built it over the course of eight months, with regular face-to-face meetings with SwimTrek in order to review progress and plan the next phase of the build. The platform we built is now the main tool that SwimTrek staff use to operate the business, and we have continued to engage with SwimTrek over the years, adding new features and additional automation as their business continues to grow.

• Date: August 2015
• Client: SwimTrek