Work

diskovr

UX Design. School project.

Marieke Hepkema

diskovr logo animation

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.

The process

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.

customer journey map

The most important findings that influenced the digital travel guide were:

I created a couple of job stories, based on the needs of a traveler.

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.

wireflow for diskovr web app

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.

diskovr mobile design scrolling animation for diskovr diskovr interaction designs

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.

Tools

For this project, I worked mainly with Sketch, but I also used InVision for prototyping and Adobe After Effects for animating the product video.

sketch invision after effects