The design challenge
This project was part of project WEB, a school project that teaches CMD-students to design and develop seamless multi-device concepts. The goal was to create a concept for an online, interactive travel guide. I made this design during a resit of the project, and had already passed the subjects Front-End Development and Visual Design 2, which were normally part of the project. This gave me the opportunity to really focus on the concept and design. Deliverables: interactive prototype, design rationale and process logbook.
I started off with the question: how do travelers behave? How do they experience traveling? Do they have any frustrations when it comes to traveling? What are the things that travelers do before, during and after a trip? To answer these questions, I interviewed a couple of travelers and collected the answers in a customer journey map.
The most important findings that influenced the digital travel guide were:
- The traveler often searched for activities to do only when having arrived already, or the day before arriving;
- The traveler utilized multiple devices to search for activities;
- The traveler enjoys being able to look back at the activities he/she did on a trip;
- The traveler doesn’t want to be too preoccupied with his/her phone/devices, and has a need to live in the moment.
I created a couple of job stories, based on the needs of a traveler.
When I’m traveling, I want to be able to find fun daily activities of a certain category in my vicinity, so that I would be able to know what to do during a certain day of my trip.
When I’m traveling, I want to be able to save activities, so that I can find them later and add them to my daily planner.
The goal for my online travel guide, thus became: finding activities to do during a trip, and being able to look back on them. The behaviors and needs belong to either of these 3 categories: before the trip, during a trip, and after the trip. I made sure that the 2 job stories would be translated into a design that encompasses the entire trip experience; before the trip, during the trip, and after the trip.
I started sketching, and turned the sketches into the first multi-device wireflow. The following picture shows part of the wireflow.
I received feedback on these sketches and continued to make more high-fi designs. I also fine-tuned the interaction designs, and did more research on design patterns that would be useful for this project.
After receiving more feedback and creating iterations on the design, I created an InVision prototype to use during my presentation. I also created a design rationale, which I uploaded to my Behance (sorry for non-Dutch speaking folks).
What I learned
It was a fun challenge to search for certain design patterns and putting them to use. It was very interesting to think about the entire experience of a certain user as well. It proved so useful to learn about all the wants, needs, emotions and frustrations of a user; it was really an essential step of the process. Creating a wire flow first, without diving into the styling/visual design was also very useful; it makes it easier to create the fundament of the design more quickly, without getting distracted by fonts and colors. In the end I also got to practice some more with Adobe After Effects, which is also a huge plus to me.
For this project, I worked mainly with Sketch, but I also used InVision for prototyping and Adobe After Effects for animating the product video.