Interactive booking tool

Publicerad av chriistiiaan7

Description of the project: In order to promote Studiefrämjandet’s leadership courses, I designed a web platform to would make it easier to book a leadership course. The platform was also going to contain an advertising film (watch here) telling why the courses were so good to take.

The webpage of the leadership courses:
screenshot

Goal: To design an interactive platform that allows the user to easily book a date to take the leadership course at Studiefrämjandet.

Methods: User research, brainstorming, sketching, prototyping (and animating).

What I did in the project: I did a lot of research by doing interviews, calling people. I also sketched and worked on the concepts. I also made the interactive prototype (the tool that I used for this project was Adobe Flash).

Design process

User research
For this project we did a lot of research. We interviewed people that had taken the course before, people at Studiefrämjandet and the people that was in charge of the courses. We probably spoke to 20 persons in total. We wanted to know what made the courses interesting and what could be the reasons to not take the course.

The process that Studiefrämjandet used was to send invitations by email to the people that hadn’t taken the course yet.There is a problem with this method since people cannot choose a date to take the course based on their own preferences. Some people that had taken the course also expressed that they didn’t think that they were going to like the course as much as they did. Their opinion of the leadership courses changed radically after have taken the course. This was definitely something to work on.

POV
The user needs to be able to book a date based on his/hers own preferences because the user should own his/her own process of booking.

Brainstorming and sketching

modul_1
Place and date. From the first beginning we wanted to do something minimalistic. In our first sketch we used the format ”place and date”. It’s a map showing where the courses are going on and a timer counting down to when the next course its starting. The course is only for a weekend so its not a big deal, ”just go to where the next course starts”

 

 

modul_2
Stories. Now we started to think more marketing here. Our customer, the user, is going to make a journey ending up booking a date to take the course. First, the user sees the film and then the user reads the fantastic stories told by other people that had taken the course, the user see the dates and books one. In this sketch we started to think about the customer journey and about the stories that people had told us about the course, which were actually pretty amazing. We had to use that and work with those stories.

 

 

modul_3
Make impact. In this third sketch, third idea, we wanted to make impact and awake interest. We put quotes from the stories from people that had taken the course and made them create a collage on the top of the page. Clicking on one quote would make the complete story expand and be shown on the top by itself. After reading the story, the user sees the film and there after the user books a day.

 

 

modul_4
Final sketch. We realized that it was not clear that the quotes were clickable in the former sketch. So we put the quotes inside square buttons and chose to only have four quotes visible at a time. A much more organized look and easier to take in. Clicking on one quote would still make the whole story visible. We also worked on a more calendar-alike-booking-system. It gave a better overview and its much more intuitive to click on the marked dates.

 

Hi-fi sketch placed on the original webpage of the courses

 

modul_x

Every quote is clickable and opens an area that expands to the side and shows the full story of a person that talks about the experience the leadership course at Studiefrämjandet. There is also a calendar showing the dates when the course is going on. By hovering over the dates, the user sees the place, the time and the type of course that is going on during that date.

Hi-fi clickable prototype 

I worked on a clickable prototype made in Adobe Flash, that shows the animation of the tool and how the interaction ”feels”. I really recommend to go and see the full prototype by clicking on the link below.

 

See the full prototype

Read the full report (swedish)

 

Hope you enjoyed taking part of this design process. See more interactive projects here.