iMedia Capstone Exhibtion Website

Overview


At the end of every academic year, the graduating students of Elon iMedia all present a capstone project to employers, friends, and family at an exhibition. Due to the COVID19 crisis, the 2020 exhibition was canceled and a live event was hosted instead. A website was needed to not only show off the capstone projects of the students but also to provide contact information of 30 students and information about the virtual event.

Goals

Although a website is designed every year for the exhibition, this year's site was going to be the key to a successful virtual capstone event. It was important that the web developers and UI designers worked together to ensure that the site would display all necessary information, such as WebEx room links, student project and portfolio links, and other general information without appearing over-crowded. These were the initial goals for this website:

  • Use web code (HTML/CSS/JS) to build a modern website using mock-ups designed by the UI designer
  • Use proper principles of UX design while using a full page scrolling plug-in
  • Ensure the site is responsive
  • Ensure that all 30+ headshot images and splash images are optimized for the web to prevent slow load time
Client:

Elon iMedia

My roles:

Web Developer | Development Lead

Tools Used:

HTML, CSS, JavaScript, Bootstrap 4, Brackets,
FullPage.js, GitHub, Photoshop

Date Released:

May 15th, 2020

Challenges and Process

  • The COVID19 pandemic prevented the web developers and UI designers from meeting in person. We were able to work around this by meeting on Zoom and utilizing GitHub as a file sharing tool.
  • As the Development team manager, it was difficult to gauge the workload of my team members while not working with each other in person. I was able to negate this issue by checking in individually with each member and as a group regularly to ensure that the workload was delagated in the most effective way.
  • It was difficult to fit so much information and so many headshots into one webpage. We utilized the FullPage.js plugin to allow for horizonal scrolling. By doing so, each person was able to have their own "product page" without overcrowding the site.
  • Ensuring that the site was UX friendly was difficult due to the use of FullPage.js, so we ensured that a navigation bar and a "back to top" button was always present on any of the slides/sections.

Deliverables

After many Zoom calls, the designer mocked up a beautiful website that we all felt would fit the needs of the situation. Myself and the other developer then coded the fully responsive website based off of those mock-ups and launched it for the exhibition.


Check out final product below

The Splash page

Scroll vertically to see splash pages for 5 different project groups

Sscroll horizontally to see a student's product page

Another group splash page

Fully responsive

Responsive navigation with custom icons