For globe-trotters

A website and online portal for globe-trotters. The goal is to create a hub for world travellers, offering resources and community for wanderers. The process of developing a website and service involves combining ideas and utilizing Lean UX methodology. This includes creating High Fidelity Wireframes to incorporate user interface, design, and a Rapid Interactive Prototype, that will serve as front-end pages.

Screenshot Travel web page Prototype Wireframe

Overview

Who:
A retired globe-trotter with an idea of an online service to provide information and deals for fellow solo adventurers. The idea is based on the assumption that it could succeed, and it offers a moderate beginning.

Why:
The service aims to share experiences and provide help for those embarking on solo trips around the world. With a focus on providing value for money, the service is likely to appeal to those looking for new adventures and seeking to make the most of their travel experiences.


The Start

Steps and process

1

A hand-drawn sketch is created to showcase the idea, requirements and functionalities of a project. It serves as a visual representation for the team to communicate and collaborate on, allowing for clear understanding and effective brainstorming.

2

The project is pursuing a Lean UX approach, which means it will be flexible and adaptable in its design and development process. Determine the Minimum Viable Product (MVP) once a clear approach is established. There may be some looseness in the structure, but this approach values iteration and feedback to continuously improve the product.

3

Converting sketch into a low-fidelity HTML wireframe. Test the idea, usability, content. Providing a conceptual representation of website's architecture.

4

Lo-Fi upgrade to high fidelity html/css wireframe. Creation of personas, flows and models.

5

Creation of Interactive Prototype with UI components and design. Fully functional UX & UI front-end. Ready for the final testing and further CMS integration.


Triptych

Clear notifications for page and website elements, along with a definition of their functionality and how they fit into the Design System. A draft user journey for booking a ticket or trip starts with the user searching for available options. A likely user Persona example with relevant content.


UX page elements / components
UX User Journey
UX Persona


Interactive test

Interactive clickable html / css wireframe tested on diferent devices and resolutions to evaluate Proof of Concept, usability, content copy, imagery responsivnes, WCAG accessibility, and in general responsive layout. Through this testing process, issues can be identified and addressed ensuring that the final design meets the desired objectives and offers a user-friendly experience.


High Fidelity html css Wireframe

* Screenshot High Fidelity html / css Wireframe travel page


Small UI Interactions

Testing UI interactions within the high-fidelity prototype to confirm assumptions and their implementation. Upon satisfactory testing and corrections, documentation is prepared for a framework, vanilla html·css·js website, CMS, or backend integration. Testing for this project is conducted with thorough UX Writing.


Ready Interactive page

The Interactive Rapid prototype of the front-end page has been completed, demonstrating all the content and a majority of the functionalities.
Once the prototype has undergone testing and received confirmation, it will be deemed prepared for production as a fully operational front-end.


High Fidelity html css Prototype website High Fidelity html css Prototype website High Fidelity html css Prototype website High Fidelity html css Prototype website High Fidelity html css Prototype website High Fidelity html css Prototype website High Fidelity html css Prototype website High Fidelity html css Prototype website High Fidelity html css Prototype website High Fidelity html css Prototype website High Fidelity html css Prototype website High Fidelity html css Prototype website

* Screenshot High Fidelity html / css Wireframe travel page


Contact

How about your project?

Ready to take your project to the next level?
Fill out the form and let's get started.

Let's talk
*required
*required
*required

Communicatie in volledig Nederlands Nederlandse flagNederlandse flag is ook mogelijk. Sterker nog, het is zelfs gewenst.