Every year the integrated digital media (IDM) program has a showcase where current students show off the amazing projects they have made throughout the year. It's a great opportunity to show prospective students, people the students know, members of the NYU community, and potential employers what IDM students create during their tenure.
We had about 2 - 3 months on this project. Everyone on the team was a current student and I was an administrator with other duties, so we were all working on this on our extra time. We began February 15th and had the site active on April 26th to promote our May 17th show.
Here is a link to the website hosted on one of the collaborators github page.
The problem we were trying to solve was, how do we spread the word about the IDM showcase? We chose to build a website. We felt it would cover questions like:
- How can we spread information about the show, ie location, time, what to expect, to students and general people in the Metrotech community?
- How can we create an easy way for people to RSVP to the IDM showcase?
- How can we give people who are interested more information on what the show is and why they should come?
- The show was curated and given a visual theme, so incorporating these into our solution would be great
Being both a digital focused program and understanding the reach potential for the web, we dedicated a team to build out a RSVP website. 
I was inspired by the parsons master of design and technology program's website documenting their student projects from their showcase and I pitched that we should do the same for our showcase. Everyone was on board and excited about it. Since everyone had classes along with the showcase, I took on the challenge of implementing this side of the site. 
We had a team of 7 people. One project manager, a lead designer, and the rest of us were programmers and designers tasked with certain parts for completing the site.
The whole team had a brain storm session of how we wanted the general layout of the site to look and what should be there.
Pencil sketch of a website layout with 2 different designs
Post it notes vertically aligned on a wall with text representing what would be on the screen the post it represents
We decided on the blue layout for a simple one page layout with defined sections to have access to all the information someone coming to the site might need on one page.
The lead designer, Sara, created a high fidelity design of the page. The landing page is picture below, feel free to check out the full adobe xd design.
I kept this style in mind for my project section. Since I was working solo, I decided I would design and code at the same time to speed up my prototyping process. This build out ended up using html, css, react, web scraping, data cleaning, and a lot of patience.
This was the end result.
An image of two iMac desktop screens side by side with a bit of space between them. On the light iMac screen is website with 3 evenly wide columns and images align vertically in each column. On the right there is another website with 3 columns, each with content about the project and the person who's project it is. On the left is a persons name, below that is a photo of that person and below that is snippets of information about the person. In the middle is the project title and below that is text about the project and then below that are images of the project. On the right there are headline text which read Medium and Tags and below those headlines are bullet lists indented to the right.
To get to the above, I started by searching for some code templates. I needed a landing page template with multiple projects in a grid layout and a template that could work as a profile page. I found shuffle.js which both had a grid, search, filter, and shuffle functionality so we could have the page feel dynamic when people reload or land on the page. I found the "holy grail layout" by phillip walton for the profile page which had a great 3 section split.
Two web pages side by side right next to each other. On the left is a the headline "Shuffle with React" and below that is 2 (row) by 3 (column) grid of photos and below that grid is source code for this demo. To the right is a website layout where there are 3 columns the middle column is 3x the width of the columns to the left and right. The middle contains the text "Holy Grail Layout" and below that is a series of text and code.
Along my search I also learned about reactjs. Reactjs was really helpful because each student's project page would use the same template, but I didn't want to do the tedious work of changing the pictures, text, and links for each project manually.
Reactjs offered a coding system that could automate filling the data for each page. I decided that even though I didn't know reactjs, I would learn it because the benefits towards launching the page seemed worth it. Especially since I knew projects would be coming in last minute so having a system to create the webpages automatically would make launching on time more likely.
I used a linkedin learning tutorial to start off, then began reading documentation, and doing little tests.
There is a top and bottom separation with the bottom being about 2x the top. On the top there is javascript code, react to be precise. On the bottom there are digital post it notes in a messy assortment with food items written on them such as "Sausage beef ribs ribeye"
Once I had a foundation on react, I ported over the layout code for the landing page with multiple projects and the 3 section "holy grail layout". The landing page was lacking without many projects, but the "holy grail" was looking good.
There is a picture of bacon in the middle of the screen surrounded by a blue border.
There are 3 columns. The middle is about 2x the left and right it says project name, has some filler text below that, and then an image for a youtube video. To the left is text that reads Animal Name and then below that is Bacon Ipsum placeholder. To the right is just the text category.
At this point I knew that having a good amount of placeholder data would help simulate how the site would look with all the student projects. At this time I was also learning web scraping in python using beautiful soup. So I decided to test using web scraped information in an excel format to populate the images and texts. 
At the time I was helping one of the professors with social media for the Lion Share Fund and so I used scraped information on the Vivacious Vaquita, an endangered whale. 
There is a gif of a whale rising and then splashing on its back into the ocean in the middle of a webpage design. The gif has the logos PBS, BBC and Wild Alaska Live.
There are 3 columns. The middle is about 2x the left and right it says Facts About the Vaquita, has some factual information about a Vaquita below that, such as the eyes of a Vauita are circled with black rings, and then a wallpaper image of the back of a Vaquita poking slightly out of some water. To the left is text that reads Vivacious Vaquita and then below that is information talking about the Vaquita's habitats and that threats it faces from human actions. To the right is the text category and a list of words below that.
With the scraped and excel data confirmed and my project page starting to come along well, I decided to pivot my efforts into the front page grid layout. In addition to that I worked on getting my design to feel close to the look of the main website. I also decided to grab images from tech blogs to simulate project images that would better represent what our students would be making. I scrapped infinigeek and treehugger for some images.
A page of python code with imports, variables, functions, and loops.
A table of information. The columns are Project Title, About Project Project Documentation, Medium, Tags (separate), Cover Image, Project Images &, Project Video
5 columns with tiny space in between them filled with images that are aligned vertically.
At this point though I realized I couldn't web scrape to get the student projects for populating the coming site. However, all I needed was a way to get student data, aka text, images, links, videos, etc, in an excel format to auto populate. 
We had already been collecting student projects using a google form, so I decided I could use that. With a month or so left, I quickly made a form and had one of the showcase members test submit into the form so I could QA test any issues that would come from this process.
A form with 6 field for information and the title Student Profiles. The fields read First Name, Last Name, Portfolio Link, Guthub, Instagram
From this early testing I was able to prep the site to use excel data taken from the form. I also corrected some minor errors like handling optional fields being left completely blank, and showing  a video from a link. At this point I also started making the site responsive.
A GIF of a webpage with 3 columns, each with content about the project and the person who's project it is. On the left is a persons name, below that is a photo of that person and below that is snippets of information about the person. In the middle is the project title and below that is text about the project and then below that are images of the project. On the right there are headline text which read Medium and Tags and below those headlines are bullet lists indented to the right.
A gif of the website above being scaled down to have a smaller width and the items on the webpage flowing into a vertical alignement.
With the QA done I sent out the google form to the students for their project submissions. I was adding on top of the foundational work by finalizing the design and adding little touches here and there.A week before the launch, some student projects started coming in through the google form, so I figured I would do a quick test launch. This was when my 2 biggest problems showed up. 
The first one was, I had no backend to support my reactjs website and I did not know how to create a backend server. I was too low on time to learn this, test it, and make sure it would work as planned. Instead, I saw that I could generate the HTML code for each page using react. The only thing I would need to do was manually change the html file name to match the student who's project the page was referencing. While this solution was tedious, it cost less time and that's what I needed.
A 3 section layout. There is a long rectangle on the left and the right is shared by a top and bottom. On the left is a list of filenames with the .html tag. On the right top is HTML web code and on the bottom is a website with a 3 columns next to each other and images aligned vertically.
The other big problem involved the google form submissions. Students were submitting google drive images and videos. I had not expected this. I emailed the initial people to make their drive folders public so I could work with it. With some research and dedication I was able to find that you can embed an image from drive on to a web page if the image is public view and you convert the link into a "uc=?id". So the link goes from: 
to 
https://drive.google.com/uc?id=1Z-8ayUROKhh6Nu2R6obGn0xpfQYj6u0T.
This could not be done directly in drive, but an open=?id link could be generated and placed in the form. Knowing this I wrote the instructions for generating this in the google form.
A single form field with the title "Img of your face (Link"
While not everyone followed the instructions, it was a helpful bandage to get some projects prepped and ready. In the end I had to do some data cleaning from the google form to make all the files appropriate for reading. This lead to some of the projects not being live on the site during launch. However, the launch itself was a success and we had 10 projects on the page at the very beginning and after the first week of launch added the rest of the projects since the design was done and all that was needed was data cleaning.
A gif of scrolling through a webpage. The gif starts with a NEON Spectra sign and scrolls into a 3 column layout that holds vertically aligned images.
A webpage showing filter functionality as a mouse pointer clicks on buttons and has certain images disappear and certain images appear.
A gif showing a person webpage where there are 3 columns, each with content about the project and the person who's project it is. On the left is a persons name, below that is a photo of that person and below that is snippets of information about the person. In the middle is the project title and below that is text about the project and then below that are images of the project. On the right there are headline text which read Medium and Tags and below those headlines are bullet lists indented to the right.
Once again, here is the final webpage

Other Projects:

CoreConnect Conference
Design assets I created to promote the CoreConnect conference on Instagram, Twitter, Facebook, and Linkedin which reached 500 organic impressions and 2,000+ paid impressions within the span of a week. The assets were designed to work with each platforms best standards and aspect ratio.
2018
Graphic Design, Social Media Marketing
IDM Showcase Lead
As a major-wide school show, the IDM showcase presented works from all the students at NYU's Integrated Digital Media program. I lead 15 dedicated students to run this fantastic showcase of 100+ projects that was attended by 250+ attendees!
2018
Leadership, Organizing
Graphic Design
These are some of the posters, signage, and logos I have created for emails, display boards, and flyers going to 1,000+ / 10,000+ students from 2014 - 2018.
2018
Graphic Design, Flyer
Udacity Digital Marketing Nanodegree
A brief summary of what I learned to reach 19,000+ consumers using a budget of $100, how I created a $50,000 full media plan, and used Moz to perform SEO planning through the Udacity digital marketing nanodegree program.
2019
Marketing, Data Analytics, Content Strategy
Relax in Virtual Reality (VR)
A summary of how I prototyped a meditation virtual reality experience for android phones. In order to prepare people for the virtual experience I had a physical setup with a grass mat. I received positive feedback from 7 people as well as ways to improve on it.
2017
Experiential Design, Environment Building, Virtual Reality
Prototyping A Data Visualization System
My prototype for a design analytics agency that would incorporate their 5 different metrics of data into one visual display. Doing user interviews, competitive analysis, and mockups I was able to deliver a prototype of an interactive mobile and web interface showing 15+ screens of user interaction in adobe XD.
2019
Design, Research, Data Visualization
Handwashing: Positivity Through Marketing
Discovering that 1/3 of Americans skipped washing their hands after using the bathroom, a team and I decided to do a campaign to reduce that number. We created a positive campaign to encourage people to keep their hands clean and spread love through clean hands.
2018
Marketing, Videography, Experiential Advertising