IDM Website Redesign

Redesigning and Implementing the New Design for Integrated Digital Media (IDM) Program Website

A screenshot of the new IDM website

  • Work Type: Professional - Graduate Assistant Assignment
  • Duration: 7 Months
  • Categories: Website Design and DevelopmentAccessible DesignProcess

The Brief

Design a new look for the IDM website and implement the design. The current website design is an endless running page which is undesirable. Faculty and students all agreed that the current website needs a completely new and fresh look.

Below is a screenshot of the old website. As you can see it is so long that the screen was captured in two images.

New Website Information Architecture

I discussed the contents and information structure for the new website with the IDM program coordinator and after a few meetings and feedback from the faculty we narrowed down the website’s site map. I used site map to determine the post categories that will be used to organize content on the new website. The new categories structure is given below:

People

  • Faculty
  • Staff
  • Affiliate and Adjunct Faculty
  • Alumni
  • Student Projects

Research

  • Publication
  • Lab
  • Research Project

Event
Featured Student
Student showcase

Design Prototype

I designed a UI prototype for the homepage and a post page in Adobe XD. Each page was designed separately for desktop, tablet and phones. The approved designs for the homepage and posts are given below:

Design Implementation

I began the implementation of the new website design by setting up a new WordPress site from wordpress.org and downloading the Roseta theme. I then made a child theme from the Roseta theme. This is the active theme and it contains most of the changes made to the parent theme called Roseta. I then modified the child theme files such as CSS and Javascript files to change the theme according to the approved designs.

I also added some plugins such as Instagram Feed plugin to fetch latest Instagram posts from IDM's account and display the recent two images on the homepage. I then styled the image posts according to the new design.

The homepage of the website has the following sections placed in grid format:

Front Main Header Video Section:
This section contains a custom HTML widget which holds the HTML code for playing the IDM showcase video.

Front News Section:
This section contains an Instagram Widget that has been configured to display two recent posts from IDM's Instagram account.

Front Events Section:
This section contains a widget that has been configured to display the most recent post that has been added to the website under the ‘event’ category.

Front Video Section:
This section contains a video widget that displays a video.

Front Information Section:
This section contains a custom HTML widget that is currently displaying some text about the IDM program and linking to a post with more information about the program through a ‘read more’ link.

Front Featured Student Section:
This section contains a widget that has been configured to display the most recent post that has been added to the website under the ‘featured students’ category.

Accessible Web Design

NYU has a strict policy about accessible websites. All websites operated by NYU should comply with W3C's Web Content Accessibility Guidelines (WCAG). Therefore, I designed the website to be accessible for people with disabilities. Some of these design considerations were:

  • Using high contrast colors. I used black text on a white backgroud for maximum constrast.
  • Using descriptive text for 'Alt' attribute of images so that screen readers can descibe the images to people with visual impairments.
  • Using readable closed captions for videos.

Below is a screenshot of the new website design

Below is a video demonstrating the desktop version of the new website.

Below is a video demonstrating the mobile version of the new website.

I also prepared a documentation for the new website so that the staff can manage the website and keep the content up to date.