Mi Mundo Joven

 

This slideshow requires JavaScript.

An individual project which combines Graphic and Web design.

For my dissertation project, user research was carried in 4 groups from 5 to 11 people which were preparing a trip to see in which points they struggled and how could they be fixed thanks to technology.

Information was collected from individual interviews, and their own chat groups in which all the group members took part.

Different “roles” in the travel planning process were identified according to the way each individual communicated with the other group members, and different “travel planning stages” were found according to the direction that the conversation took part across all the 4 groups.

The research process took 3 months and once the pain points and the roles and stages were identified, a functional prototype was developed to help young travelers prepare their trips through a travel planning agency.

Along with the functional website, a non-functional prototype of an App was developed to help travelers communicate with each other and change and update information about their trips.

About the project development

The website was implemented using pure HTML, CSS, JS and jQuery, and PHP. One
of the challenges that I wanted to face was developing the website without the use
of any libraries, in order to not be influenced by the styles and functionalities given. This choice had it’s pros, and it’s cons. One of the benefits was that I had to learn howeverything works by myself, and the biggest disadvantages was that it took more time for me to build everything.

Mi Mundo Joven is an online travel agency and, as all the travel agencies and most of the businesses, it should provide some information about as well as different travelpackages (including pictures, the price, the description…) To make it more special than just a simple trip provider, I decided to include a way for the users to contact the agency asking for a more personalized trip, specially for those young travelers that would like to do an Eurotrip or an Asiatrip with multiple destinations instead ofjust one country or city.

It provides an special form in “Personaliza” where they would fill different information divided in four sections: 1. Dates and Destination, 2. Passengers and Lodging, 3.Anything Else?, and 4.Contact. Sections 1,2 and 3 are optional, but the Contact
form is compulsory. The section 4 of the Personaliza section and the contact form from the section Contacto are the same, and both need to be validated in order to be sent, otherwise it will display different error messages to inform the users about what is the problem.

For choosing from the different travel packages in the section “Destinos”, different filters according to the information obtained from interviews for the IA research were provided. The two main categories that we can find are: “by season” and “by continent”.

The colors and typefaces used in the website are the corporative colors of Mi Mundo Joven. The images are all copyright free, and carefully selected to match the aesthetics of the website.

 

To enhance the user experience, I used styles to see the status of the website. Thanksto css animations (@keyframes) and JS, a loading animation can be seen until thewhole content is fully charged, and when hovering over the contents that have a
link, the items change their style. Apart from using “:hover”, some animations where implemented with an aesthetically purpose, for example, the progression bar in the Personaliza section.

 

All the transitions used were implemented for all the different browsers (-webkit-,-moz-,-o-) and,

in order to make the website as much responsive as possible, all the measures were introduced as % so that they would adapt to the different screens without having to scroll over the x axis.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s