- Work Type: Professional - Graduate Assistant Assignment
- Duration: 7 Months
- Categories: Website Design and DevelopmentAccessible DesignProcess
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:
- Affiliate and Adjunct Faculty
- Student Projects
- Research Project
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:
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.