This was my first attempt at a hackathon in a team of 4. I wanted to gain experience in UX design and front end web development, so my role was to create wireframes and build the webpages using HTML and CSS.
I came up with the idea of a packing list that contained crowd sourced suggestions for items to pack based on travel destination and duration of stay. Through discussion with the other team members, this idea expanded into a fleshed out travel planning website that allowed users to build a trip itinerary with suggestions for restaurants, events and sightseeing (using the Yelp API) along with a packing list and estimated budget page.
I discussed the webpages and site flow with my team members while also referencing other travel planning sites i.e. triphobo.com, expedia.com. I wanted to keep the interface simple with recognizable elements and clear action buttons. From there, I refined the layout with feedback from team members.
We decided on the name Trippin for our website. I played around with having the name in different typefaces, and I looked on flaticons.com for icons of people in movement. I saw that travel websites tended to pair cool colors (blue, green) with a bright accent color (yellow, orange), so I tried to match that scheme.
I built the webpages from the wireframes in addition to referencing other travel websites (i.e. Airbnb) for the look and feel.
The Final Product
We ended up with 2 interactive webpages consisting of the Homepage and the Itinerary Building page. The user could type in a destination city on the Homepage and submit, which would bring in all the Yelp suggestions for that city in the default order without the nice formatting. Basically we ended up with a less functional, less pretty version of Yelp search (although the homepage looked all right).
Icons (with some personal tweaking) from Freepik on Flaticon.com
Laptop mockup from Atif Aziz (https://www.behance.net/AtifAziz)