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.
The Idea
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.

Wireframes
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.
UI Flow
Logo
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.
Round 1 of initial logo exploration
Round 2 of narrowing down logos
Our Final logo
Webpages
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).
Takeaways
All of my team members were new to hackathons so we had a number of bumps along the way, but it was a great learning experience and we all had a lot of fun. For future hackathons, I'd limit the project's scope and in retrospect would have focused only on the packing list page. I would also want to brush up on my HTML, CSS and Javascript skills in addition to learning some back end (which was the most time consuming portion) to better contribute to the team where it was needed most. 
References
Icons (with some personal tweaking) from Freepik on Flaticon.com
Laptop mockup from Atif Aziz (https://www.behance.net/AtifAziz)
Trippin
3
109
0
Published:

Trippin

A travel planning website for the 2016 Angular Attack Hackathon
3
109
0
Published:

Creative Fields