Pintail‘ is an online travel portfolio with the aim of making logging, sharing and flaunting of one’s travel goals and adventures, easy, fun and consumable. This is the first prototype for Web version only, built in my Bootcamp final project in my pre-semester first month at Parsons School of Design.

Discipline: Web Design, UX, Interaction Design
Timeline: 1 week | August 2017
Technology: HTML, CSS, JS, Adobe Photoshop / Illustrator
Association: Parsons School of Design, Bootcamp

Click to view project (only for web)

Problem
There is no single, easy and clear platform today that can serve as a one-stop shop or a single link that one can share with others to showcase one’s travel adventures, all at once. The current precedents are not defined for this particular purpose and are cluttered with an overload of other personal information.

  • When someone asks you “Show me your travels…” what do you do?
  • Do you clammer on your social networks for all the pics,  hashtags, and life events?
  • Are your photos synced on all your social networks?
  • Do you know the dates, the number of cities or countries that you have covered?
  • Does any personal travel journal site come to your mind instantly?

Context
This was my first school project at Parsons School of Design in Bootcamp. This was to be built only within the Web to solve any problem of our choice. As an avid traveler, I am still looking for a platform that I can use to showcase and flaunt all my travel adventures in an easy way, and Pintail is my answer to that problem.

Goal
To build an initial high-fidelity functional prototype only at the client-side by using HTML and CSS and basic JS.

Criteria

  • Every page must afford a summary of the user-content with an option to dive in
  • Consistency in the consumption of content across the site
  • Minimalistic view and information

Precedents: What purpose should this website fulfill?

  • Facebook, Instagram, and other social networks are just social networks are not built for the purpose of a travel portfolio.
  • Instagram is only for photo/video sharing. LinkedIn is also a network, but with a specific purpose.
  • Extracting travel information from these is a cumbersome task and not easily consumable or shareable.
  • I was also inspired by the map view of projektkartan.svenskakyrkan.se that satisfies my criteria.

Precedents: How should the website look and feel?

  • I wanted to make the login page attractive and inviting similar to that of toggl.com
  • To help achieve my criteria, I drew inspiration from largely spaced layouts of greatvaluevacations.com
  • Fitz & Co, in particular, was very inspiring for both the purpose and layouts – to satisfy my criteria.

Conception

In this project, before proceeding to mind maps, I wanted to put a name to my idea and market it, so that I could involve myself more and visualize the purpose and meaning. I did not have any previous ideas and so I tried searching for terms online that led me to Pintail.

The pintail (or northern pintail) is a duck with wide geographic distribution that breeds in the northern areas of Europe, Asia, North America and are one among the topmost migratory birds in the world. Since this website is on travel, there’s no way I could not use the location tag somewhere, and I love that symbol. Therefore, my merging these concepts I developed my logo, as shown below.

Mind Maps
Again, the mind maps also were explored in two ways: look and feel (with user flow) and functionality (or purpose)

Personas

 

How can I preserve my entire travel experience and collection in a structured online portfolio for easy sharing and flaunting? I am looking at this through the lens of an average travel enthusiast and an average ‘netizen’

 

Wireframes

The 2nd and 3rd wireframes above are for the same page and purpose but in different forms. I finally concluded, that as per my criteria, the 2nd frame would suit better to keep it bold and minimal.

 

Please see the working here or on Github.

 

Future Plan

  • Completing basic modules with front and back-end JS.
  • Running user-tests
  • Introducing mobile version and re-designing with mobile in mind.
  • Framing the problem with web and mobile after concept prototype tests.

Credits

  • Thanks to Kris Li and Leah Takele, Grad students and my Bootcamp seniors, Parsons School of Design for guiding me through the entire process.
  • Precedent images taken from respective sites.
  • Pintail duck image borrowed from Wikipedia.
  • Wireframes created with Balsamiq
  • Personas created with userforge.com