KOBAJ TRAVEL APP

Small team, big ambitions!

KOBAJ is a 3-year-old crowd-buying platform that has enabled co-buying wines and champagnes at a very reasonable price. I have been with them almost from the beginning, helping them understand their users, conceptualising new features and setting the tone and voice of all design solutions.

As the company grew, so did our ambitions. We set out to create a user-friendly web app that combines wine tasting and travel experiences, integrating the best of both worlds. This extention to the current KOBAJ brand had to strengthen our relationship with our 400+ wineries and the many thousands of users drinking their wine on a daily basis.

As Senior Product Designer for KOBAJ's new travel app it was my job to create and execute a UI/UX process for the newly started project while collaborating with relevant stakeholders such as the CTO, CCO and CEO. The process I followed was based on design thinking principles and looked something like this:

Project Brief

The project brief outlines a clear and ambitious goal: to develop a working prototype within the next three months, and be ready to build it with the developers and get it ready for testing and deployment within a year. This time-sensitive objective requires a focused and efficient approach, prioritizing rapid ideation, prototyping, and user testing to ensure the product's viability. Close collaboration between the UX design and development teams will be essential to meet this tight deadline and deliver a successful and user-friendly solution.

Research

In the research phase, I conducted a comprehensive user survey using Survey Monkey, involving 850 engaged KOBAJ users. To ensure a well-rounded dataset, I additionally arranged 8 in-depth interviews with some of our most devoted customers, who were among the users who had requested the option to visit wineries. In-depth interviews were a goldmine in terms of insights. Google Analytics was another usefull tool to understand the average user persona, and Customer Service was a huge help in gaining insights into customer pain points and areas of satisfaction. Everyone's remarkable enthusiasm and eagerness to contribute were not only inspiring but also pivotal in propelling our next steps forward.

Brain Storming

I was actively involved in the brainstorming sessions, and I can attest to how much they propelled our project forward. Brainstorming brought together diverse perspectives and creative ideas from the team. It helped us explore different design concepts and solutions, ultimately leading to innovative approaches we might not have considered individually. One of many brainstorming sessions The collaborative atmosphere fostered during brainstorming encouraged open communication and problem-solving, which was invaluable in shaping the project and making it more user-centric.

Wireframing & Rapid Prototyping

After creating a comprehensive set of common wireframing design elements, we were ready to organize the valuable insights we had gathered. To streamline the process, I initiated a Rapid Prototyping session involving fellow creatives and stakeholders. In just a matter of days, we had developed a low-fidelity clickable prototype using InVision.

After presenting it to some of our users, we received tremendous feedback. This feedback prompted an iterative session, where we fine-tuned the final details of the flow and structure, ensuring an improved user experience.

During the project, we consistently kept the user journey map up-to-date to ensure a clear understanding of the web app. This not only made it easier to identify new features that could improve the user experience but also proved invaluable in uncovering opportunities to streamline the user flow, potentially reducing the number of clicks needed to navigate from A to B.

The grand design

The introduction or splash screen is designed to immerse you in the mood of visiting a lovely, warm country. You should be able to smell the warm summer air and hear the crickets in the grass. Relaxation, enjoyment, and a stress-free vacation are the key emotions we aim to convey.

Just tap or hover, to enlarge the image

The logo is intended to convey a sense of casual elegance and tranquility, which is why I believe the Arizonia font complements this vibe nicely.
The payoff, "Book your next wine tasting holiday," gets straight to the point and leaves no room for misunderstanding. I prioritized high legibility through contrast and font size, considering that our user base is primarily aged 45 and above, with potential visual impairments.

We've designed an easy-to-navigate menu for your convenience. It avoids loud icons and disproportionate CTAs, offering a clean and clear overview of options. Heading back to browsing is merely a tap away.

The explore page allows the user to search, filter or find inspiration by scrolling down the page. Feeding the explore page a certain country changes the content to that specific country.

During the research phase we discovered that price was one of the key pieces of information, the users required (suprise, suprise). The second were the enterior of the room / apartment. Beds, shower and of course images of the rooms and the soroundings. Also distance from center of the city and how many wines are available.

In the description people wanted a bit of history, but mainly a run down of what to expect from a stay with their chosen winery. Tour of the wine cellar and the vines, wine tastings and what might otherwise be provided during the stay. To make the key selling points more clear we provided the user with a list of accomidations included in the stay.

As for branding and marketing materials, I felt it was important to have custom graphics that could support the new travel brand.

I created a large set of custom vector designs, in the same simplistic style, making it very easy to decipher.

Booking should be easy and fast. That was the montra I went in with, when designing the booking flow.

It was also pretty clear that "hidden prices" was one of the really big pains for our users. In order to ensure complete transparency, I included the price on the booking page, before going to payment.

Development

As development commenced, I maintained close collaboration with both the frontend and backend teams to ensure everyone was aligned with our project goals. I introduced our interactive prototype, featuring the actual design, and shared it with the entire development team. Additionally, I provided access to all relevant Figma pages containing various scenarios and CSS code.

As development advanced, I also played a role in visual coding, drawing upon my experience with Tailwind CSS, which was our preferred CSS framework.

The launch date for KOBAJ Travel has not been determined yet, and the project is still in progress.