ICoRD’21  


ICoRD’21 Interactive Schedule

Designed and developed an interactive version of the ICoRD '21 (International Conference for Research in Design) schedule. This conference is held every 2 years and was hosted in IDC, IIT Bombay in 2021.



Card image


Prototype link

View prototype LIVE


01

Brief

As a part of volunteer in Design Team of ICoRD’21, I got the opportunity to redesign the entire schedule of the conference in an interactive way which was to be made live on the conference’s website.

The main goal of the schedule page is that any new person who visits the website and wants to have a look at the schedule and events on different days, is able to easily understand the schedule of conference and get the neccessary details at one glance.

The requirements were to design simple and easy to understand format of the conference schedule with all the timelines that also explains how the event has been structured. The constraint was to design this schedule with the same content and in the existing visual language of the website.

Visit ICoRD '21 Website here


02

Non-interactive Schedule

The initial schedule was an excel timetable format which was populated with text and its visual representation was difficult to read as well as there was back and forth required to interpret which color legend represents which section of information.

Non-interactive schedule can be found here
The non-interactive schedule consists of 2 parts. These are explained below.


  01  

Index section

Over here we can see that the types of papers are divided into categories which are color coded. They are also given code to identify them easily in the schedule.




  02  

Schedule section

In this section we can see the day number is on the left and details of each parallel session is listed with their timings, paper ids and Chair names.

Positives:
  1. All data can be viewed in one view with just a scroll
  2. Timings are mentioned in major timezones
  3. Color coding and synonymns are used properly
Negatives:
  1. Difficult to understand what are the papers about
  2. Color codes and synonymns can be remembered
  3. No personalisation of data






03

Design Process

Since it was a redesign project, I focused majorly on the simplicity of interface and the microinteractions that can be utilised to simplify information presentation to new visitors on the website.


#1

Analysis of existing schedule layout and chunks of information


#2

Sketching and Wireframing multiple possible layouts


#3

Deciding upon the microinteractions and one final layout


#4

Converting the final interactive layout into high fidelity prototype


#5

Developing the final design and integrating it within the website




04

Workflow

After identifying the chunks of information, they were paired together in similar sections.
Below you find the image of the same.





05

Information Architecture





06

Sketch of finalised layout



The final layout was designed in a timeline format where the user selects the time zone and respective schedule timeline will be shown.

It is based on some common microinteractions like dropdowns, click based selection, search bar which are already quite common



07

Final design

For the final design and implementation our team designed the prototype of Adobe Xd. We made sure that the schedule is easy to navigate and gives adequate amount of information. Programming of this schedule was again split among the team mates and was completed in 2 weeks of time in HTML, CSS and Javascipt. Some of the features for the final design are shown below.




  01  

Home

This is the home page of the interactive schedule. We can choose our timezones and choose the particular day we wish to attend upon choice of interest. The breaks are clealy segregated by reduction of opacity. In the bottom we also have the links to view all the paper abstracts and the information about keynote speakers and workshops.




  02  

Expanded view

Over here we can see that if we click on a particular heading, in this case, Day 1: Parallel Sessions, the section expands to reveal the parallel sessions. Each parallel session is color coded and displays all the papers being presented and their respective authors.




  03  

Paper abstracts section

In here, we developed an entire page where people can read the abstracts of the papers being presented. They could be seached by inputting the id provided in the previous table.

F

Designed and Developed with by me © 2021