Blog Javascript Designing a simple search experience for a complex product with a luxurious interfaceDesigning a simple search experience for a complex product with a luxurious interface
Eres Yachting, a luxury boat booking service turned to Boldare to revolutionize their sales system and shift its entire catalogue to a new online booking system for their affluent audience.
Table of contents
Summary
When Eres Yachting approached Boldare they had a successful business as a mediating agency, helping keen sailing enthusiasts rent luxury yachts in the most beautiful locations around the world. They offered over 13,000 luxurious yachts in 475 destinations along with additional amenities needed for their upmarket customers. Boldare provided a team who grasped the problem quickly and created a state-of-the-art booking experience with a simple customer journey and a classy design that would fit the affluent bookers that Eres is targeting.
Problem: too much choice and the criteria can be overwhelming and exhausting for users
Eres saw an opportunity to grow in a new market but first needed to shift their whole booking process online. They needed experts who could transform their entire offer into a premium digital experience. Unlike traditional e-commerce, their booking system was complex and required users to select from over 10 criteria to book a boat. They knew that this could be a potential problem and needed experts who could design a simple customer journey that wouldn’t overwhelm the user with a stylish interface for the upscale target market.
Solution: a team of experts who can analyze the offer and target market, and provide a luxurious yet simple booking experience
Boldare provided a team equipped with UX/UI skills, fluent in building application architecture. Team members had worked together in the past and were experienced in designing complex booking systems and eye-catching websites. They had all the skills necessary to translate the offer online and design a user-centered web experience with a simple booking journey, as well as deliver a stylish design that would fit the product persona.
Step 1: Product Vision Workshops
The Boldare team ran a product canvas workshop with the Client. This allowed Eres Yachting to clarify their vision and share it with the Boldare team. After gathering all the information, the team was able to form user stories which outlined the functionalities of the product.
The workshop also led the team and the Client to create a system story, which later guided the entire design of the product. The elements of the system story included answers to a list of four questions - what, how, who and what for.
Step 2: Moodboards
The Boldare team sent the client a choice of three moodboards - a snapshot of images, colours and fonts that gave a taste of what the design would be. After selecting the winning moodboard, the designers could start the design process.
Step 3: Application architecture
Following that, the Boldare team created the app architecture, a tool necessary to understand and explain the application’s structure with all its complexities. This allowed easy explanation of the relations between almost 50 elements contained in the app.
Step 4: Wireframes
The Boldare team created more than 50 wireframes - a tool used to map out the app features and components (without the graphic elements) as well as the user journey throughout the booking process. It allowed clear explanation of the logic and features of the product.
Step 5: A simple search experience on the homepage
One of the critical features to the sales process was a search bar that allows users to filter through the 13,000 boats available. The new homepage search bar included two main criteria (location and dates) instead of the previously used ten which would overwhelm users.
Step 6: The booking process
The next step was constructing a user-friendly app experience. Based on user stories, Boldare devised a four-step booking flow: Time and location, Advanced filtering (with 10 criteria), Choosing a yacht, and Booking.
Step 7: A premium design for a premium user
Finally, the Boldare designers were ready to create a premium look for the product that would correspond with both the affluent audience targeted by Eres and the client’s brand identity.
From the very beginning, the Boldare team was fully aware of the product target persona. In a nutshell, he was a reasonably rich man, over 40, with family, and a love of traveling, sailing and nature. Knowing that, the team could create something exactly suited to this profile.
To create a premium look, the designers used classy light fonts, toned colours and elegant gold details. Another very important factor was the use of specific language suited to the target user.
Enjoyment of sailing is closely related to feelings and experiences, so Boldare proposed a graphic design reflecting just that. To achieve this, the designers used high quality marine photos and details, and light, sophisticated fonts. They also decided to create a specific color palette, completely different to the client’s competitors. These decisions resulted in a completely fresh and attractive graphic style.
The collaboration: iterative delivery and frequent communication were critical
From the start, the Boldare team and the Eres Product Owner worked in a scrum framework with a dedicated Scrum Master responsible for the process and the project’s transparency. The team met for daily meetings to discuss plans for the day and any obstacles that threatened the weekly sprint goal. Once a week, they held a review and planning meeting along with the Product Owner, where they discussed increments delivered and planned the next sprint. Weekly retrospectives allowed discussion of obstacles, future improvements and good practices.
“Boldare stuck to our budget and timeline. If anything took longer than anticipated, it was immediately communicated to us. They were always transparent.”
The constant communication was critical to the success of the product. The team had over 20 remote meetings with the Product Owner based in Switzerland, held via Skype. They wrote hundreds of Basecamp posts to keep the client up to date with progress and the project’s compatibility with the agreed guidelines. Additionally, team members were in constant contact via Slack.
Results
We believe that the clients should talk about the results for themselves so here is a quote from Eres:
“The feedback from customers and everyone else we’ve shown the website to has been that the site is exceptional… Clients and partners have mainly cited the website as the reason for choosing us. They found it to be professional, beautiful, and elegant.”
Share this article:
