UONYC.COM
I started learning html, css, and javascript in the fall of 2013. This was my first attempt at building a useful website from the ground up. Check out my github repository for the site. It’s … a little rough around the edges.
My mission for uonyc.com (non-existent now) was to create a tool to help 103 University of Oregon advertising students navigate New York City during Creative Week. Additionally, I wanted to provide a comprehensive look at the students and staff on the trip. The agencies we visit can refer to UONYC.COM and find out who we are, where we are going, and our thoughts while in the Big Apple.
INTERACTIVE CALENDAR
Our group visits over 30 agencies in five days, so I built an interactive calendar with the information our students need to be prepared for each tour. Clicking the day buttons reveal what agencies we visit that day, and clicking an agency displays a short bio with links to that agency's twitter, website, and pinned address on Google Maps.
On mobile, the calendar is a vertical list separated by day. Clicking on an agency displays its bio with links to its website. Twitter and Google Maps icons open their respective native apps. The Google Maps feature on mobile proved useful for students to navigate the city on-the-go since each link automatically drops a pin ready to create directions from walking, subway, or taxi.
SOCIAL MEDIA FEED
Our group has a lot to say and show about our time in NYC, and we've taken to Twitter and Instagram with #UONYC2014. The website displays our content. Users can interact on Twitter from within UONYC.COM. Instagram photos lead to that user's account in a new tab. I removed this content from the mobile site because following our hashtag Twitter and Instagram is easier through the phone apps, and it weighed the mobile site down.
STUDENT BIOS
The website provides a photo for each student on the trip. When clicked, each photo displays the student's bio with links to her/his Twitter, Instagram, and portfolio website. This section is useful for agencies to familiarize themselves with the visiting students, acting as a collective business card for our entire entourage.
Each photo is a scanned Polaroid, and with the addition of students writing their own name in Sharpie, the bio pictures convey personality that written bios lack.
On mobile, the bios display a shadowbox when touched. The bio links open Twitter and Instagram's native apps on the phone, and open portfolio sites in a new browser tab.