Prototyping

How Travelnaut used prototyping to design a mobile-friendly website

December 13, 2023

Travelnaut is a Cyprus-based travel tech startup, offering one of the largest travel information hubs on the internet. What’s interesting about their product is that almost all of the content presented is generated by AI, before being curated by humans for accuracy and consistency. One may wonder how a company like this could benefit by prototyping – Travelnaut’s design team was happy to share their insights!

Travelnaut's logo

As is the case with many other companies in the wider travel industry, Travelnaut’s website comprises a large variety of images and other visual content. While that works really well on desktop, mobile versions can look busy and crammed if not designed smartly. At the same time, it’s important for the mobile version to contain all necessary information and not look oversimplified.

Travelnaut’s approach

Instead of taking lifeless designs directly to development, the Travelnaut team decided to take a step back and focus on prototyping. That way it became easier to identify UX blind spots and make any necessary changes before committing development resources. The end prototype also served as valuable documentation for the development team, helping them understand the new website’s functionality better and saving everyone from unnecessary back and forths.

You can take a look at an interactive, clickable prototype, kindly provided by the Travelnaut team below. Feel free to play around with it by clicking on its different interaction areas:

The team mentioned that, once design screens were ready to import into the tool, prototyping in Proto.io took just a couple of hours within the same working day. The end prototype is a hybrid between imported designs from Figma alongside ready-made UI components and icons included in Proto.io’s libraries, such as the sandwich menu. The team also worked on slide-in and expand-collapse menus of the website directly inside Proto.io.

Endless prototyping possibilities

Travelnaut worked directly with high-fidelity designs, as the idea to prototype came to them after the design process had started and initial mockups were already approved. As a result, the prototype they produced looked very close to the end result and minimum changes were applied at later design iteration cycles.

However, this is only one way to go about it. Prototyping can start as early as needed, even with low fidelity and hand-drawn designs. An early-stage prototype gives the wider team a sense of how the app is supposed to work and how the user is expected to interact with it from the very beginning of a project. Making business decisions based on an early prototype is much cheaper than actually experimenting while designing and changing things on the go.

Other teams prefer mid-fidelity prototypes, which have some design elements applied for the sake of more accuracy and a better understanding of how the end product is supposed to look and function. There’s no right or wrong way to go about this; the possibilities are endless!

Author