— ether creative

TripMapper

Designing and building a next-generation travel planning platform for the adventurous vacationer

TripMapper

Our Challenge

Alex (Ether's head of design) and his wife Emma, have always been keen adventure travellers. With both of them having a busy work life, they found themselves planning their trips meticulously to make sure they got the most out of the time they were away. They had tried a bunch of different tools, but nothing really stuck – so, with their travel plans grounded due to COVID, they set about building their dream platform so that it'd be ready for when the world opened back up.

The brief was simple; fresh, but classy branding and a web and mobile app that really got people excited about planning their next holiday.

Web App

We knew we wanted the platform to be available on the web as well as via native apps, so we set about deciding on the best infrastructure to build out our MVP. We decided on Craft CMS for the application and API layer as it allowed us to offload a large amount of custom logic, especially CRUD operations on the data and allow us to focus primarily on the client application and UI. We chose Preact, a fast 3kB alternative to React with the same modern API. The frontend connects to Craft via their first-party GraphQL API.

In order to give web users a fast and responsive experience, we focused on developing interactions and experiences that helped the UI feel more native, so users would be able to focus on planning their trip and for it to feel like they were using a desktop app.

Trip Mapper Web 1
View each day as columns and each activity as an interactive card.
Trip Mapper Web 4
Users can also view their itinerary as a simple list.
Trip Mapper Web 3
Clicking an activity shows a detail view with notes, tasks and times all easily accessible.
Trip Mapper Desktop Teaser

Mobile App

We designed and built a cross-platform mobile app.

Trip Mapper App 1
Trip Mapper App 2
Trip Mapper App Teaser

Branding

.

Trip Mapper Branding Exploration
Some early explorations with the branding direction.
Branding Exploration 3
Refining the ideas and seeing how they could look on app icons.
Branding Exploration 2
Final round of exploration before picking a final mark.
Trip Mappr Banner
Trip Mapper Business Card
Trip Mapper T Shirt