Redesigning InstiApp by Kiran Prasanth Rajan

Redesigning InstiApp

Redesigning InstiApp Project 2 Guide

Prof. Jayesh S Pillai Kiran Prasanth Rajan 176330008 | Interaction Design M.Des (2017 - 2019)

IDC School of Design Indian Institute of Technology, Bombay

Declaration

I hereby declare that this written document represents my ideas in my own words and where othersâ&#x20AC;&#x2122; ideas or words have been included, I have adequately cited and referenced the original sources. I also declare that I have adhered to all principles of academic honesty and integrity and have not misrepresented or fabricated or falsified any data/ idea/fact/ source in my submission. I understand that any violation of above will be cause for disciplinary action by the institute and can also evoke penal action from the sources which have thus not been properly cited or from whom proper permission has not been taken when needed. Kiran Prasanth R 176330008 Interaction Design | M. Des IDC IIT B Date :

Approval Sheet

The Report Committee for Interaction Design, Industrial Design Centre, IIT Bombay certifies that this is the approved version of the following report on Redesigning InstiApp by Kiran Prasanth Rajan Approved by :

Project Guide :

Chairperson :

Internal Examiner :

External Examiner :

Date : Place :

Acknowledgment

This project as, a part of my Project 2 presentation, was a great learning curve for me. From getting industry level guidance to insights into much larger fields, this helped in a personal as well as in a professional growth for me. Words cannot express how grateful I am to my guide Prof. Jayesh Pillai, who has not only guided me through and through but also pushed me to venture out beyond my comfort zone and get a glimpse into what the rest of my life would look like. I am extremely thankful to Prof. Ravi Poovaiah, Prof. Venkatesh Rajamanickam, Prof. Aniruddha Joshi, Prof. Girish Dalvi, Prof. Vivek Kanth and Prof. Pramod Khambete, who have also guided me and set me on the right path every time I lost sight of my destination. Of course, no acknowledgment is complete without thanking my close peers, friends and family members, who have supported me through and through in this extremely difficult journey and have been there to receive me on the other side. Kiran Prasanth Rajan 176330008 | Interaction Design | M. Des IDC IIT B

Table of Contents

Abstract........................................................................................................................................................15 Introduction..........................................................................................................................................17 - 19 Motivation | Background | Problem | Target Users |Objective

Research Works...................................................................................................................................20 - 36 Primary Research | Secondary Research

Observation & Insights..........................................................................................................................37 Concepts & Exploration.........................................................................................................................39 Redefined Information Architecture.........................................................................................39 - 40 Visual Identity......................................................................................................................................41 - 47 Icons | Typeface | Colour | Theme

Evaluation...................................................................................................................................................49 User | Task | Time |Protocol | Method

Redefined InstiApp.................................................................................................................................50 Design & Development..............................................................................................................................51 Low Fidelity Prototypes | High Fidelity Prototypes

Redefined InstiApp Screens..........................................................................................................52 - 102 Conclusion.................................................................................................................................................103 References.................................................................................................................................................105

Abstract

The project focuses on redesigning a web & mobile application called- the ‘InstiApp’. This application is made for the people to help them navigate the IIT Bombay Campus. The target users of this platform are students, staff members and someone new to the campus. The application is designed and developed by students from various departments and disciplines of IIT Bombay as an initiative from ‘The Web & Coding Club’. The InstiApp provides a service where the users are notified and updated about all the different departments, portals and other major bodies in the campus on a single platform. The app is currently using default application development templates for its present version.

A case study conducted including interviews of the users. This helped in problem identification, through exploration of current design and recreating the information architecture. Problem areas were identified, issues with user interaction, navigation. visual identity etc were brought forth and taken into consideration for redesigning. Fixing existing problems, user discomforts, introducing a new brand of identity with a unique visual language, allotting a new personality to the app and providing the user with a better experience are the prime motives in this redesigning project.

The InstiApp had a need for a redesign, because the content and the information provided are not organized according to the priority and requirements for its users. Another reason being, the templates used for developing the application are not properly optimised. This is resulting in many users facing discomforts and hurdles while interacting with the app.

Introduction

Motivation | Background | Problem | Target Users |Objective

Motivation People have difficulty in way-finding in IIT Bombay campus. Whether it is someone new to the campus or a resident, he/she faces way-finding difficulty in one way or the other. Bad signage system inside the campus is also a major reason. Finding a building, department, cabin or desk, conference room, contact details or to reach a specific person etc. are difficult tasks inside the campus. Another motivation for this project was that, most of the students and staff are not aware of what activities are happening in the campus, whether it is an event, workshop, festival, conference etc. They are not notified or updated properly. The community is notified through emails, but the problem is that every day, enormous number of emails reach an individual from different departments and other bodies. Most of the time these information are carried by word of mouth.

During the initial stages of the research, a mobile application which was developed in the campus, came in to notice. The application was called the InstiAPP. This application brought these scattered information and data together. The instiAPP had most of the contents in it. Being a web & mobile application, it was very easy for the users to access it. The major problem with the InstiApp was that the available information was scattered and was not categorized and arranged properly according to how its user wanted.

founded in 1958. Today, IIT Bombay has 15 departments, 20 multi-disciplinary centres. Each department has its own servers and other platforms for data sharing & transferring. Whenever the people of these departments need access to the portals such as complaints, academic calendar, registrations, updates & notifications, emergency etc., they have to access through different doors. The primary goal of InstiApp is that, it is a platform where we can find all these portals in a single platform.

During the primary and secondary research, many problems were identified regarding interface design, navigation and other discomforts. Also the current InstiApp was using a default application development template which was not appropriate for its content. These were the motivations for redesigning InstApp.

This application has gathered and brought the associations, organizations, services, updates and notifications from respective departments and also other major bodies in the campus, together.

Background - InstiApp The Indian Institute of Technology, Bombay is a public engineering institution located at Powai, Mumbai, India. IIT Bombay was

InstiApp[1][2] was developed by the students of Web & Coding Club of IIT Bombay, as a part of their club activity. The app was started in the year 2017 and published in 2018. For the design and development of this application, the template is Progressive Web Applications (PWAs) tool provided by Google.

The Problem The intended purpose of the InstiApp is fulfilled quite positively but there are a few major problems. Most visitors and staff are unaware about the app and abandon the use because of the confusing interface. Even a lot of students are unaware of the full potential of the app. During the primary and secondary research, the disorganized arrangement of information rose prominently as a major issue. Here, the issues with InsiApp are highlighted regarding some prominent aspects. The content is not organized and categorized according to priority and requirement. While the same content is accessible for students, staff and visitors, raising a huge question of privacy. In case of its unique identity, the InstiApp does not have its own branding and a proper visual language. Currently the application is using the default template of PWAs tool from Google. For editing and updation of the personal data, the user needs to choose an external link, which could have been resolved in the application itself. Proper transitions and micro-interactions could have been used which can reduce the current discomforts

in user navigation. Most of the people in the campus are not aware of this platform and also, some phones do not support this application.

Target Users The InstiApp is accessible to download and use for campus residents as well as visitors and outsiders. The students form the major group of users of the app. While the staff and guests, whose purpose of visits vary from workshops, conferences and events, form the remnant user group of the app. The target users thus will be students, staff and visitors. Among this, the students will be the primary users. Also, the information provided on the app has to differ for all the three users. Thus sorting and categorizing of the information is one of the focal points for redesign. Dividing the user into these three categories helps to segregate the collected data.

The Objective The objective of the project is to redesign InstiApp. Redesigning includes various aspects like prioritizing, user interface, organization of information and attention to user experience through a unique identity of the app. Rearranging and organizing the content according to the requirement, priority and with proper categorizing of the available data. Noting down the issues with the interface and the difficulties with user interaction and provision of a proper solution accordingly. Segregation and provision of the information according to the kind of user is also in focus. For example, the content which is required for a student is not the same for a staff member, visitor or a guest. Bring InstiAppâ&#x20AC;&#x2122;s own branding and identity with a new visual language and personality, give the user a feasible and seamless experience throughout the app.

Fig.1 The Existing InstiApp Screens 19

Research Works Primary Research | Secondary Research

Primary Research

Existing Design The primary research began by exploring the existing design and its background. As it concerns redesigning, the available content, the application was studied in detail (See Fig.1 for a few sample screens). Thus, a process of reverse engineering was adopted. An information architecture of the existing application was recreated to know the flow of information and figure out the problem areas (See Fig. 2 & 3. for current Information Architecture). Interviews were conducted with the people who are frequent users of the InstiApp and also a small evaluation was carried out with people who have never used the app. This helped to know the difficulty and the confusion of a firsttime user and resulted in getting a useful set of observations and feedback. Some user feedback points were taken from the feedback section of the Complaint

& Suggestion portal in the InstiApp itself. This data helped in knowing not only the pros and cons of each and every feature individually, but also brought to the notice about the needs, changes to be done, requirements and the problem areas from the user.

Primary Research

Current Content The InstiAPP was initiated and developed by the students from Web & Coding Club of IIT Bombay, starting in the year 2017 and published in 2018. The club is a gateway for students and others in the institute to join different coding communities inside and outside the campus, conduct sessions and workshops, lectures and talks and even host coding competitions and hackathons. For the design and development of the app, Progressive Web Applications (PWAs) [3] tool is used. Progressive web applications (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device

hardware access traditionally available only to native applications. PWAs combine the flexibility of the web with the experience of a native application. Currently, the features included in the InstiApp are a comprehensive feed of all the events happening in the campus, and a portal to view the mess menu of all the hostels in campus, updates and notifications from placement cell, news, complaint & suggestion portal, quick links & emergency contacts, etc. (See Fig. 2 for current Information Architecture). The application has gathered and brought the associations, Fig. 1 Screens from the InstiApp organizations, services, updates and notification from most of the respective departments and the other major bodies in the campus, together.

Fig. 2 InstiApp Screens : The Existing Information Architecture

InstiApp Login SSO

Notiﬁcation

Organisations Following Events

Name Roll Number Mail ID Contact Details

Proﬁle Feed

Poster / Photo Description Other Options

News

Feeds

Explore

Heading Sub Heading External Link Hostel No. Day Breakfast Lunch Tiﬃn / Snacks Dinner

Mess Menu Placement Blog

Internship Blog

Heading Date Discribtion

Calendar Search Image Keypad

Heading Sub Heading

Month Date Event

InstiMap Vent the issues

Heading List Fig. 3 InstiApp : The Existing Information Architecture (Recreated)

Quick Links Settings

Proﬁle Update Proﬁle Feedback About Logout

Home Me Name Date Location Complaint Suggestion Location Details Upvote + Comment Photo Name Date Location Complaint Suggestion Location Details Map Comment (No.)

Primary Research

InstiApp Portals & Services

The Identified Problems

Following are the list of portals and services currently available in the InstiApp:

Identifying problems was more of a reverse engineering process. The current problems and needs of the InstiApp were found through exploring the application throughout, analyzing the existing information architecture and interviewing the current and first time users of the app.

Identified Problems (Discomforts, Ambiguity, Cognitive load, Software Bugs)

Inadequate, improper transitions and lack of micro interactions are the major reasons for the discomfort in user navigation was an important finding. For example, there is no back button in the app, so every first-time user and some of the frequent users (most of them being staff members) struggled to go back to the previous screen, even if there was a back button option in the device itself.

Design Intervention (New design ideas/concepts, possibilities and opportunities)

• Profile • Notification • Feed / Events • News • Explore • Mess Menu • Placement & Internship Blog • Calendar • Map • Complaints / Suggestion Portal • Quick Links • Settings • About Us

Feedbacks and Observations (What the user expressed, experienced and underwent)

The existing design was evaluated through a think-aloud protocol. The first time users were interviewed after the evaluation. The observations and insights collected during these stages are categorized into three broad categories being:

• Logout, Login/ Sign up

InstiApp - Overall Feedback

Fig. 4 Screens From InstiApp

InstiApp

75%

Identified Problems

Feedbacks and Observations

•

• • • • • •

• • • • •

Logging in using LDAP ID and as a guest, do not have much differences in the InstiApp. No ‘Back button’ provided in the application. Icons visible in the app screens are not satisfying the purpose. For example, the search button is not consistent in all screens. The interface is more flexible in the desktop version than in mobile. Web and the mobile versions of the InstiApp have a big difference in its layout and composition. Some features offered in the phone work only in the desktop version and are deactivated in the smartphones.

Design Intervention

• • • •

Home page and Home Button are not provided. More flexibility and choices in the desktop version. No prioritization of the options. The Feed/ Events is acting as the homepage for the app. Bad visual design with bad font selection Text which is clickable can hardly be differentiated from the displayed one.

Should include and introduce a portal for IIT B Hospital. The mails in the GPO inbox. should be accessible through the InstiApp too. This will be more useful for all its users. Screens for outsiders, just for viewing, should be provided. Students’ work showcase can be introduced in the application.

Notification Panel

My Profile / User Profile

Fig. 5 InstiApp : Notification Panel Identified Problems

• • •

The notification icon indicating the updates is not properly visible. Path of a particular notification is difficult to locate sometimes. Date and time are not provided.

Feedbacks and Observations

• •

No indication of the number of notifications or whether updated. Some notifications include deadlines, which is vital information of priority and need to be brought to the notice of the user.

Fig. 6 InstiApp : User Profile Identified Problems

• •

Can’t locate where to edit or update the profile. Tedious process and multiple steps to reach edit profile option.

Feedbacks and Observations

• • • • •

Design Intervention

Number of subscribed associations, following, and events by user, no notification for all of these. How to go back once the profile picture is enlarged? Multiple times feeding in the information after logging in. In profile, other details such as department, designation etc should be also provided other than a roll number. Attended events need to be removed automatically from profile, now we have to unfollow each of them individually.

Design Intervention

• • •

The number of new notifications should be introduced. Notification should be accessible from the home screen. Calendar could be used for faster navigation.

• • •

Enable the option of changing the profile picture easier. The information should be updated automatically. Cover photo option should be introduced.

Feed / Events

News Identified Problems

• •

Cannot decipher which data can be clicked, tapped or is for display only. Improper categorization.

Feedbacks and Observations

• • Fig. 7 InstiApp : Feed / Event Identified Problems

• • • •

Not following a set or fixed resolution for uploading images. Loss of continuity while navigating through the events. Back button is a need to be prioritized. Separate space for notifying deadlines or reminders isn’t provided.

Feedbacks and Observations

• • • •

Number of the users, people or organizations following and followed, related associations and events, not mentioned. Providing icons instead of ‘going’/’Interested’ would be better. Viewing only one photo of the poster for an event is insufficient. The number of links provided for the event can be shown separately, instead of displaying with the description.

Design Intervention

• • •

Should not be the landing page Participant data should be included too. Option to add more photos of the event should be included along with the profile picture.

Fig. 8 InstiApp : News

•

Font size of ‘heading’ varies according to the length of the text. Categorization based on date, alphabetical order or according to the department is needed. No Index Scroll option provided. Unable to recognize ‘new’ and ‘already read’ items in the feed.

Design Intervention

• • • •

A provision of separate links is needed. Up-vote and comment functionalities are required. Pin/Save option is required. A separate space for subheading should be allotted.

Explore

Mess Menu

Fig. 9 InstiApp : Explore Fig. 10 InstiApp : Mess Menu Identified Problems

Identified Problems

•

Events, associations, organizers, profiles etc. are placed, jumbled in a single category. An improved categorization is required. No Index scroll option or a slider to know the number of events.

Feedbacks and Observations

• • •

Proper chunking of data is needed. Information is placed without proper sorting or prioritization . The use of the same logo/poster for more than one event or club, leads to confusion.

Design Intervention

• • •

Search for quick links should be incorporated. Events, which are over/done should be removed from the display list . Most of the events which are seen in the app are got over. Pin/Save option should be introduced.

•

The user has to update the hostel No. every time they need to see the Mess Menu. Updates regarding pest control, mess holiday, Gala dinner or any other functions should be indicated in the page.

Feedbacks and Observations

• • • •

Date is not provided/displayed. Name and Location of the hostel is not provided. Timings for the food availability (Breakfast, Lunch etc) should also need to be shown. The special food item should be written separately.

Design Intervention

• • •

Incorporation of a calendar would increase efficiency. Photograph of the food item/(s) should be shown (In case of students unfamiliar with the cuisine). Feedback options for the Mess and the catering, should be incorporated here.

Placement & Internship Blog

Calendar

Fig. 11 InstiApp: Placement & Internship Blog Identified Problems

• •

User is unclear about clickable or non-clickable text. Different kinds of information or data are not working in the same interface template

Feedbacks and Observations

• • •

Improper categorization of data. Placement and internship portals could be in the same space instead of keeping them as two different portals. Deadlines should be also shown in the information container/ tab.

Design Intervention

• • •

Placement and internship blog could have been combined together. Pin/ save option should be introduced. FAQ should be added along with each and every information container.

Fig. 12 InstiApp: Calendar Identified Problems

• •

No functionality for custom reminders or tagging events. Need of a search button.

Feedbacks and Observations

• •

Taking too much display area of the phone screen. Calendar overlaps with other portals in InstiApp.

Design Intervention

• • • • •

Indication of which days events are scheduled, should be included. Academic data can be also included. Addition of timetable, assignments, deadlines, attendance, holidays etc. Switching of different calendars like academic calendar, reminder etc. Number of events per date should be provided.

Map

Complaints / Suggestions

Fig. 13 InstiApp : InstiMap

Fig. 14 InstiApp : Complaints / Suggestions

Identified Problems

• • •

•

Google Maps is not utilized in the app. All tags create a chaotic clutter in the Map’ user interface. Elaborated view of the title card is not intuitive.

•

Ambiguity for first time users- Difficult to figure out registering a new complaint. ‘Complaints’ portal has a different UI design compared to other portals.

Feedbacks and Observations

• •

• • • •

•

Seeing specific tags is also not provided. Tagging places is not a consistent functionality. The tags disappear once the application is closed and opened again. Difficulty in seeing specific locations because the existing map in InstiApp is set to default in isometric view.

• Design Intervention

• • • •

Sharing the map/location should be included. Events can be incorporated with the map. Parking spaces should be visible for vehicle users. Explore and Map portal could be incorporated.

Icons are not giving affordances, whether they are clickable or not. Not the same as the support portal provided in the IIT B website. Complaint history/ My complaints could be moved to My Profile. Too many options are crammed in a single screen. Instead, different screens can be opted for, with some proper organizing of data. Unfamiliarity with some of the terminologies, especially acronyms. Short descriptions should be provided.

Design Intervention

• •

My History tab could be incorporated in my profile. Upvotes and comments could be included.

Quick Links

Settings

Fig. 15 InstiApp : Quick Links Fig. 16 InstiApp : Settings Identified Problems

Identified Problems

• •

•

User is unclear about clickable or non-clickable link/text. Ambiguity regarding the purpose of the portal.

Edit profile should be shifted to settings option.

Feedbacks and Observations Feedbacks and Observations

• • •

Quick Links placement should be easily accessible for the users. Should give the user an idea about the number of external links and determine the purpose of each link. No feedback after tapping a clickable link.

• • • •

Feedback should be combined with the complaints portal. ‘About Us’ needs to be a separate option. Logout option should not be in the settings. Settings icon is required.

Design Intervention Design Intervention

• •

Small description about the link could be beneficial for the user.

Description of the InstiApp should be provided in settings.

Kinds of People

Primary Research

Activities on Campus

Students After going through the existing application, the primary research also took a different direction. A detailed study was conducted along with the user interviews regarding different activities in campus, how people navigate, what are people looking for on campus, and the kinds of people reside and visits the campus. The data collected during the study is as follows: • • • • • • • • • • •

Classes/ Lectures Meetings Commuting Gatherings Marriage Functions Alumni meetings Conferences Presentations Workshops Club Activities Strike

• • • • • • • • • • •

Accidents Maintenance Emergency Power Shut-Down Talks Festivities Cultural activities Sports Public holidays Vacation Constructions

How People Navigate inside campus • • • •

Walking Two Wheeler Cycle, Bike Auto Rickshaw •

• • • •

Four Wheelers Cabs Mini Bus Buggy

• • • • • • • • • •

Graduation Students PG Students Exchange Students PhD Students From other collage Classmates Friends Alumni Couples Day Scholars

Family • • • • • •

Parents Grand Parents Spouse Relatives Residents Employees

Visitors • • • •

Consultants Recruitment Team Friends Sponsor

• • • • • • • •

Visiting Doctors Visiting Faculties Celebraties Parents Marriage Functions Drivers Competition Students Festivities & Events

Staff Members • • • • • • • •

Faculties Office Staffs Security Janitors Doctors Permanent Staff Temporary Staff Warden

What are people looking for ?

Outdoor

Indoor

Building

Specific Person

Department

Meeting Rooms

Hostel

Meetings

Washroom

Gym

Event Spots

Books in Library

Auto Rickshaw

Dustbins

Parking Space

Elevators

Eatery

Students

Library

Faculty

Pick - up Point

Doctors

Entrants

Washroom

Dustbin

Lecture Hall

Shortcuts

Cabin / Desk

Main Gate

Shortcuts

Cycles

Events

Shops

Workshops

Barber Shops

Food Availability

Faculty Residence

Water Cooler

Childrens Park

Empty Space

Water Cooler

Storage

Smoking Zones

Keys

Security Office

Security Desk

Parcel Service

Courier

Other Services

Screenings

Fig. 17 Activities & Visitors of the campus

Secondary Research

and Android uses Java. Meanwhile, PWA is using HTML, CSS, Java Script as its programming language.

Secondary Research

The advantage here for a designer or a developer is that, once a PWA is developed (can be a website or an application), it maintains the same behavior when it opens in IOS, Android or in windows. Thus, the designer or the developer does not have to develop another version. Hence, PWA saves time as well as cost. Thus it becomes easy for a developer to maintain and update PWA prototypes.

PWA | Adobe XD |Garretts Model

Progressive Web Apps (PWA) Progressive Web Applications(PWA) is a kind of responsive website, which is a very light weight platform compared to other applications or browsers. PWA is responsive enough to run on any devices. This is the technology which introduced the system of a website enabled to be personalized and customized in the form of an app for the user. When a developer develops an application, he/she has to make different versions of the same prototype. This is to enable the app to function on different platforms (IOS, Android, Windows). In the case of PWA, this is not a problem, as PWA is basically an HTML based web app which will open in any browser or platform. PWA functions in the background in devices and is also able to function off-line. If we take a look at other programming languages, IOS applications use Objective-C,

From the userâ&#x20AC;&#x2122;s perspective, PWA application proves to be beneficial. PWA allows the user to get the same experience of a particular website as an application. Users can use the application off-line too. For an instance, when any data is fed in by the user, and the device has no access to the internet, once it gets connected the fed data will get updated automatically by the Progressive Web Application. The constraints in the PWA is that it functions only in HTML5 supporting devices. One cannot find PWA in playstore, forums or other websites and it canâ&#x20AC;&#x2122;t be found in any

other resources. The availability of the data regarding the development, fixing issues, clearing doubts etc. is very limited today since PWA is still an emerging technology. For the development and fixing issues of the InstiApp, the Web & Coding Club had taken the required codes from the GitHub Libraries [4] . Progressive Web Application is just a responsive website, but the problem is that it is not able to communicate or cannot be embedded with installed applications or any native application in a device. For example one cannot login to an account in PWA using Google credentials or Facebook credentials and such. This is the reason one has to type the user-name and password each and every time to open any external link in the InstiApp (example: when clicked on edit profile option, the page is diverted to the IIT Bombay ASC portal). PWA works on and supports Google Chrome, firefox, Opera and Samsung browser, but can be problematic when accessed via Internet Explorer, Edge and Safari.

Fig. 18 Screens of InstiApp Lowfidelity Prototype done on Adobe XD 34

Secondary Research

Prototyping Tools

Fig. 19 Adobe XD Icon

Adobe XD[6][7] was chosen as the prototyping tool, a software developed by Adobe. XD expands to Experience Design and is used majorly for designing, prototyping and sharing UI/UX concepts. Interface designs can be executed with Adobe XD as well as exported from other softwares (Adobe Photoshop, illustrator etc.). This software facilitates producing an interactive working prototype without coding or using scripts. A person who is not comfortable with coding can begin prototyping a working model of an application or a website with ease. Linking the elements to each other or jumping from one screen to another is feasible.

After completing the prototype, one can send a working model to anyone by sharing the provided link. The link allows viewing and interacting with the working model. Also, the working file is stored in the creative cloud. This enables the user to work on the same file from any device, anywhere, and share their work with others, to work collaboratively on the project. Compared to other visual design softwares, Adobe XD[7] is very smooth and fast to work with. Many useful shortcuts and techniques are introduced in this software. It includes features like Auto- Animate, Voice prototyping, Linking/wiring screens etc. makinge the job extremely easy for a user to produce a responsive design. The files from other visual design softwares such as Adobe Photoshop, illustrator etc. are converted to lightweight files after being imported in to Adobe XD. Today, Adobe XD [7] can be downloaded and installed by any user, as Adobe has put it our as a free software. This really helped designers, developers and others to view the prototype, visualize & experience it and later transfer it to the publishing softwares such as Android Studio or PWA platforms.

Secondary Research

Garrett’s Model

(Literature Review)

the contents of the book are referred to, in Industrial design, Software Development etc. In the book, Garrett introduced the five layers of user experience, later this was known as the Garrett’s Model [10]. The five layers of the Garrets Model (Fig 17.) are :

Surface

Visual Design, Visual Identity (Colour, Theme, Typography, Icons, Logo), Photographs, Video, Sound, Animations etc.

Skeleton

Wire-frames, Layouts, Placement, Arrangement, Interface, Navigation, Look & Feel

Structure

Interaction Design, Information Architecture, Categorized Content, Hierarchy Fig. 20 Garrett’s Model

Jesse James Garrett [8] is a User Experience Designer first, and later, founder of the strategy and design management firm called Adaptive Path. In 2002 Jesse James Garrett wrote a book called “The Elements of User Experience” [9]. The book was supposed to cater for web design. Today, 36

Scope

Features, functions, services, facilities, content

Strategy

Interviews, User Needs, Objective, Goals

The model is supposed to be approached from bottom to top.

Observation and Insights After conducting the primary and secondary research, major problems, requirements, issues regarding the UI and UX were identified. Following are the observations and insights from the above research: • The content is not organized and arranged according to the requirements. • InstiApp uses the default templates provided from PWA tools. The template is not approporiate for the usage of the app and the content. InstiApp needs its own branding and identity with a new visual language. • Calendar is an invisible base for many portals like events, news, mess menu, complaint portal and notifications. • The Map is indirectly linked to all these portals. • Use of proper Micro-Interactions and transitions can make the current interface more intuitive to the user.

• Complaint portal has the more number of options than other portals. Following a step by step process for adding complaints would make the job easier for the user. Currently, a clutter of information is presented to the user at once. • The new concept should be designed in such a way that it will be supported in Progressive Web Application and can be prototyped easily. • Some of the options or features could be iconified (Example: absence of in-app back button is creating discomforts in user navigation) • Software like Adobe XD, Sketch, Marvel App etc. are very helpful to visualize, interact and create low-fidelity working prototypes for heuristic evaluation before executing the final application. • The target users for the InstiApp are students (primary users), staff members

and visitors. The visitors include people who come to attend workshops, conferences, events and also as guests. • Any person who installs InstiApp is able to go through the content, only after he/she logs in. A separate homepage should be introduced in the app which acts as a showcase of students’ works, events, workshops, conferences and other activities conducted on campus. • The InstiMap is used only in maps portal, but in other instances where the map is required, Google map is used. • Links which are displayed along with events, notifications, news etc. should be provided with a separate space, so that the user will be able to access it properly and be redirected. This pattern should be followed through-out the InstiApp. These observations and insights led to the conclusion that there is a need for redesigning the InstiApp. The same content of the InstiApp was taken and then re-arranged and organized according to the requirements. A new Information Architecture was formed (Fig. 21 / 22 & 23.).

Concepts and Exploration Redefined Information Architecture

List InstiApp - Redefined

Information Architecture The primary and secondary research provided a proper idea about the user needs and the changes required. New features are also included in the InstiApp. The redesigning process began by segregating the available data according to the categories and requirement. Thus, the list of contents of InstiApp was divided into four categories: My Profile, Home, Notifications and the list of the features. Later, an Information Architecture (Fig 21/22.) based on this classification was developed. An elaborated version of the redefined Information Architecture is depicted in Fig. 22. The information architecture was made for all portals separately and later, combined together. Also, a separate information architecture was also created which shows the permissions, provided to a user who logs in as ‘Guest‘ (Fig. 23).

InstiApp

Proﬁle

Home

Notiﬁcation

My Proﬁle

Calendar

Notiﬁcation

Search Info.

Events

Placement

Quick Links Pin / Saved Settings

Mess Menu Complaints

News Explore

Maps

About Us Logout

Fig. 21 InstiApp : Redefined Information Architecture

InstiApp - Redefined

Information Architecture

List

My Proﬁle

Quick Links

Notiﬁcations

Events

Mess Menu

Calendar

Maps

Complaints

InstiApp

Proﬁle

Home Notiﬁcation Events

Pictures

Search Info.

Share Button External Link Follow

Proﬁles

Quick Links

Contact Info.

Attended Attending

Programme

Organisation

Location

Pin / Saved Settings

Date & Time

Breakfast

Roll No.

Phone

Designation Stream

Add Stream Department Address Hostel Address Room No.

Graduation Year (Expected) Degree

Upload Image Location Details Description

Placement Internship

Lunch

New Complaint

Explore Location

Date & Time

Complaint

Yes

Continue as user

Comment

Map

Complaint Priority Complaint Title

Venue

EMD

Date & Time

Share Links

Date & Time

Pin/ Save

External Links

Location

Attending

Departments Hostel Clubs Events

Yes No Proﬁle

Attended Attending Organisations Proﬁles

Building Details

Contact Details

Description

Email ID

Extra Links

Phone

PHO Telephone

Other Details

Deadline

Events

Current Location

Previous Complaints Estate

Description

Organisation

Up Vote Down Vote

Title Venue

Proﬁles

Complaints

On Behalf of

News

Venue

Snacks

Complaint Type Date & Time

External Links

Attending

Department Joined Year

Notiﬁcation

Quick Links

Dinner

About Us Logout / Login

Email ID

Description

Details

Events

Pictures

Mess Menu

Calendar

Year

Horticulture Month Week Day

Fig. 22 InstiApp Redefined Information Architecture:Detailed View

InstiApp - Redefined

Guest have Access

Information Architecture

List

Guest dont have Access

Access Provided by the User

My Proﬁle

Quick Links

Notiﬁcations

Events

Mess Menu

Calendar

Maps

Complaints

InstiApp

Proﬁle

Home Notiﬁcation Events

Pictures

Search Info.

Share Button External Link Follow

Proﬁles

Quick Links

Contact Info.

Attended Attending

Programme

Organisation

Location

Pin / Saved Settings

Date & Time

Breakfast

Roll No.

Phone

Designation Stream

Add Stream Department Address Hostel Address Room No.

Graduation Year (Expected) Degree

Upload Image Location Details Description

Placement Internship

Lunch

New Complaint

Explore Location

Date & Time

Complaint

Yes

Continue as user

Comment

Map

Complaint Priority Complaint Title

Venue

EMD

Date & Time

Share Links

Date & Time

Pin/ Save

External Links

Location

Attending

Departments Hostel Clubs Events

Yes No Proﬁle

Attended Attending Organisations Proﬁles

Building Details

Contact Details

Description

Email ID

Extra Links

Phone

PHO Telephone

Other Details

Deadline

Events

Current Location

Previous Complaints Estate

Description

Organisation

Up Vote Down Vote

Title Venue

Proﬁles

Complaints

On Behalf of

News

Venue

Snacks

Complaint Type Date & Time

External Links

Attending

Department Joined Year

Notiﬁcation

Quick Links

Dinner

About Us Logout / Login

Email ID

Description

Details

Events

Pictures

Mess Menu

Calendar

Year

Horticulture Month Week Day

Fig. 23 InstiApp Redefined Information Architecture : Permissions

Visual Identity Icons | Typeface | Colour | Theme

Visual Identity plays an important role helping to solidify a unique personality to the prototype. Visual identity comes in the top most layer (Surface) of Garrettâ&#x20AC;&#x2122;s Model. A conscious process of choosing Icons, Colour, Typefaces and creating a theme comes under the creation of a visual identity.

Fig. 24 Icon family for the new design

Icons As part of creating a visual identity, it was decided to introduce new icons in the app. Many icon families were considered and tried, and an open source family was finalized upon. This particular Icon family was borrowed from an open source website called www.feathericons.com. The icons were available in different sizes, and in varying file formats like png, Jpeg and SVG (Fig. 24 & 25).

Fig. 25 Icon family for the new design in Dark Mode

Call

Location

Mail

Call

Location

Mail

Fig. 26 Icons layout from the high fidelity prototype screen

Visual Identity

Elaborate

Troubleshoot

Camera

Settings

Alert

Links

Add More

Component View

Alert

Explore

Map

Back Buton

Favourite

Gallery

Call

Check Box Tick

Ham Burger Menu

Delete

No Permission

Toggle Button

Notification

Flag Post

Reload

Alert

Add

About Us

Server

Note PAd

Crop

Expand

Details

Mail

Complaint

Comments

Add Comment

Calendar

Folder

Profile

Save

Send /Post

Attached File

List of Icons chosen

Download & Upload

Hamburger Menu

Reminder

Quick Links

Like / Favourite

Attach File

Visual Identity

Typeface

Leelawadee Bold 24pt Leelawadee Bold 24pt

The Font selected is Leelawadee UI. Leelawadee UI Bold, Regular and Semilight which are to be throughout the app. A decision was taken to use only one typeface rather than mixing different ones.

Used for Carousel Tabs

Many other font families were taken into account. Some of them are : • Montserrat • Roboto • San Francisco • Open Sans • Segoe • D-Din • Mukta

Leelawadee Bold 16pt

Montserrat and Roboto were used in the low fidelity prototype.

Used for main headings

Leelawadee Bold 18pt Leelawadee Regular 18pt

Leelawadee Regular 16pt Functions as Subheading

Leelawadee Regular 13pt Functions as Body Text

Leelawadee Semilight 13pt Used for the explanations placed beneath the main Heading

Leelawadee UI Bold, 24pt functions as main headings. Leelawadee 18pt, both Bold and Regular functions on carousel tabs. The selected tab will be in bold letters and the tabs which are not selected will be in Leelawadee regular. Leelawadee UI 16pt, Bold and Regular are used as subheading in the prototype. Leelawadee Semilight, 13pt is for the explanations provided beneath the main headings. Leelawadee Regular, 13pt functions as the body text in the instiApp. 45

Visual Identity

Colours

#005FDC

#FFEA0F

#CCCCCC

Used for Carousel selection tabs and sub headings. Used for the font Leelawadee UI Bold, 16pt.

Alternate colour for #36FAB8

Functions as outline.

#36FAB8

#FF5722

#F5F5F5

Used as screen background and for fonts with backgrounds other than the colour white.

Used for alert and other notifications and also for the highest priority messages.

Used in containters and selection mode.

#4500BB

#005FDC

#FFFFFF

Mostly used for calendar portal. Also in cases where both #36FAB8 & #005FDC donâ&#x20AC;&#x2122;t work.

Is a lighter version of #FF5722, which is used for the wireframes of the InstiApp.

Used in containers and sometimes on fonts.

#222222

#707070

Used for the typefaces in the InstiApp.

Used for fonts which functions as explanations under the main heading or titles.

Visual Identity

Theme

Many options were taken into consideration for theme selection. While creating a theme for the new responsive and interactive application, it was kept in mind that it should be scalable enough to work in different portals with different objectives and usability. The theme chosen for the new design is based on scalable circles. It was observed that this theme enables maintaining the same visual language throughout the different portals. The circle can work as a container in the app and can emphasize the important data. The circle can also act as a floating active button, to show a list, pop-up menu etc. (Fig. 27). In the new design of the InstiApp the circular container can be used in login screen, profiles, list view and also will be very useful in the calendar since it is a popup screen which overlaps with many other portals in the app.

Fig. 27 The chosen Visual Language for the Theme.

Evaluation

User | Task | Time |Protocol | Method

Users The user groups included students who are a frequent user of the InstiApp and visitors who are very new to the application. Around 18 to 26 users participated in the evaluation process. Some people were given the new prototype in the initial stage to study and decide which protocol should be followed and check whether the evaluation protocol chosen was appropriate. Also, the attention to things to be taken care of during the product evaluation was focussed on. In the initial stage it was also a question to get the design evaluated by a group of people or individually. Later, the prototype was evaluated individually because it helped to observe in detail the specific discomforts and other issues faced by the individual user. Students from various departments in IIT-B Campus, working staff, visitors, other college students and people of different age groups were the user groups chosen to evaluate the application.

Task

Protocol

The user has to navigate through the app exploring various portals, locate a specific department/person and gather details. The user also will have to register a complaint and comment beneath an existing one. Lastly the user has to opt for the calendar and try and locate some specific detail they always were curious about, on campus, through the app.

A â&#x20AC;&#x2DC;Think aloudâ&#x20AC;&#x2122; protocol was followed for the evaluation. It is a method used for gathering information, user discomforts, navigation issues, technical bugs etc. in usability testing. The user has to speak out loud using the prototype which provides the evaluators to know which difficulties and discomforts are experienced by the users.

Time

The Think Aloud Protocol was the one among the others, which was most easy and faster to reach the evaluation purpose. Additional elements and steps was also included to satisfy the scope of the project

Time allotted to each user was 30 minutes but most users took more than 45 minutes for navigating through the entire application. It was observed that users, while they are in groups, can navigate faster and complete the tasks with more ease. The low fidelity working prototype was given to the user holistically and also as individual portals. Both the time periods were noted. Also the time taken to navigate from one portal to the other was recorded too in the back end.

Method The full application will be provided for evaluation and later followed by the interfaces of individual portals. The finger point movements of the user will be tracked and the audio will be recorded in the background. Time taken will be noted down from the recordings itself. Parallel other observations or insights from the user will be recorded and used as data to analyse.

Redefined InstiApp Design & Development | Conclusion | Reference

The following high fidelity prototype is the result of the evaluation conducted on the low fidelity prototype. All the feedback and the list of changes received from the people from the evaluation were considered and were executed on the high fidelity prototype. This is made in Adobe XD which helped in making the process easier, faster to get a working prototype. After the product was completed, it was very easy to handover the prototype for further development to the Web and Coding Club of IIT Bombay. The fonts, color, guidelines etc. are provided as supplementary details by the software itself.

Fig. 28 InstiApp Low Fidelity Prototype screens linked each other to make its an interactive prototype. 50

Design & Development

Redefined Infromation Architecture | Low Fidelity Prototype | High Fidelity Prototype

For the redesign & development of the application, each portal was created separately and later combined together. This was the same method which was followed while creating the redefined information architecture. The design and development began from sketching initial ideas by hand with pen and paper, rough screens in the beginning and later the sketches were converted into digital form. From the low fidelity wireframe to low fidelity prototype, it was a trial and error method. Later the low fidelity prototype was made into a working prototype. This step helped to know the interactive part of the prototype through a working model. Also it was helpful for product evaluation in the initial stage itself. This helped to improve the quality of work, cutting down the processes and time, also allowing the realization of a number of user discomforts in the earlier stage itself. It was also decided to cut down the number of screens as much as possible,

considering the number of portals. Simplifying the application to its maximum limit was the purpose of such a step. That is the main reason for choosing the drop down template. In the new visual language used, the drop down menu feature, helps to categorize and organize the information for users to navigate and figure out options with ease. There are 9 major portals in the InstiApp : • Home • User Profile • Events Portal • Explore Portal • Mess Menu • Notification Panel • Calendar • Complaint Portal • Maps

The objectives and functions of each portal are different. Some portals such as notification and calendar overlaps with other portals. The challenge was to maintain the same visual identity throughout the portals. So, a separate template was created for each portal without losing their functions and usability and following one visual language or theme for the upcoming interface design. The following pages are showing the design & development from low fidelity prototype to high fidelity working prototype. Since the product evaluation was conducted in the low fidelity working prototype itself, the high fidelity prototype is created taking into consideration the feedback from the evaluation. All the changes and manipulation were done on the high fidelity prototype after the evaluation. The low fidelity prototype majorly focused on user navigation, availability of information according to the user needs, arrangement and categorization of the collected data, and other user discomforts in all screens. Layout and composition, typesetting, iconography and visual design etc. were focused on later, after the evaluation of the low fidelity prototype. 51

InstiApp

Fig. 29 The new loading Screen, the circles animate as a ripple

Loading Screen

adhering to a sense of uniformity and continuity, and also keeping in mind the scope for animated interactions in the later prototypes to be designed (Fig. 31).

The loading screen is the first screen that every user sees and begins within an application. Since every user- a first timer or a frequent one, has to experience the visuals of the loading screen, the main motive was to engage the user and still amaze them enough with a â&#x20AC;&#x2DC;wowâ&#x20AC;&#x2122; effect. Since the screen will have such a tremendous amount of exposure to the user, the challenge was to maintain the engagement as much as possible since the further interactions in the app are affected with this particular screen too.

A new loading screen has been introduced in the new design. Instead of continuing with the loading slider as per the existing design and even in the low fidelity prototype, a new innovative and interactive concept was opted for. After an extensive idea generation process, a ripple effect animation was chosen as the loading animation (Fig.29)

Another issue that has to be carefully tackled is the timing of the loading screenthe duration the user will have to view the screen each time. It has to be as minimum as possible since a fast and easy access is a vital motive in this redesign project. The newer Visual Design was introduced only in the later stages when designing the high-fidelity prototype. The InstiApp logo was placed on a circular container, continuing with the circular theme,

Loading Screen

High Fidelity Prototype

9:41

InstiApp

Fig. 30 Loadind Screen Low Fidelity Prototype

9:41

InstiApp

100%

75%

Fig. 31 Loadind Screen High Fidelity Prototype

The content of the Login Screen remains the same, with the introduction of a new visual language as a part of redesign. Using a new template of the scalable circle, it became easy to choose between the LDAP Users or the Guest options (Fig. 34). If the user logs in as a guest, they can enter the InstiApp, but some portals wonâ&#x20AC;&#x2122;t be accessible for obvious security reasons as shown in the redefined Information Architecture for the Guest User (Fig. 23).

InstiApp

LDAP User

176330008

Password

.........

Guest

Fig. 32 Login Screen (Left)

High Fidelity Prototype

Fig. 33 Login Screen with Keyboard (Right) 4G

9:41

LDAP User

LDAP User Login as

LDAP ID / Email

LDAP User

kiranprasanthr@gmail.com

Guest ***************

Password Keep me signed in

Keep me signed in

Forgot password ?

Fig. 34 Login : LDAP User/Guest High Fidelity Wireframe

Fig. 35 Login : LDAP User/Guest High Fidelity Prototype

Fig. 36 Login : LDAP User High Fidelity Wireframe

Fig. 37 Login : LDAP User High Fidelity Prototype

Forgot password ?

Fig. 38 Login : Add Credentials High Fidelity Wireframe

Fig. 39 Login : Add Credentials High Fidelity Prototype

Home Screen

Home Screen is the landing page the user first reaches after logging in. In the high fidelity prototype of the InstiApp, the home screen is a gateway to all the portals. The User can visit their own profile, search, navigate through all portals, change settings and logout from the app (Fig. 43). The User can navigate back to home screen from any other screens and also reach any screens with extreme ease, seamlessly.

Home

Home Screen

High Fidelity Prototype

Calendar Notiﬁcation Events

Paneer Bhurji

InstiApp 12

Paneer Butter Ma...

Pancharatna Dal

Banana InstiApp Omelet

Curd Rice

Bread, Butter, Jam

Methi Paratha

Omelet

My Proﬁle

Mess Menu

Notiﬁcation

Events

Breakfast Calendar Breakfast

Mess Menu

Events

Gongura Chutney

Complaints Lunch

Maps

Explore

Notiﬁcations

4 Days to Go

9:41

Enlin Quental

S Sn

Interaction Design, M. Des Student IDC School of Design, IIT Bombay, Powai

13 Items

STUDENT GYMKHANA AWARDS 2018 - 19

Settings

Gymkhana IIT B

Complaints About Us

Logout Explore

have shown exemplary performances in a sphere of their institute life.

Mood Indigo All Team Meet

Thurai Moong Dry

Masa

Paneer Bhurji

Paneer Butter Ma...

Banana

Pancharatna Dal

Omelet

Curd Rice

Bread, Butter, Jam

Methi Paratha

Omelet

Gongura Chutney

Breakfast

Explore

Map

Complaints Maps Events

Lunch Lunch

Breakfast

S S About Us

13 Items

Quick Links

Time

Date

Venue

15 : 16

09/04/2019

Old Gymkhana

The Student Gymkhana Awards for the Academic Year 2018-19 were held at the Convocation Hall yesterday. The awards were given to students who

Fig. 41 InstiApp Home 2nd Fidelity April 2019 Low Wireframe

have shown exemplary performances in a sphere of their institute life.

We would like to congratulate all the winners and wish them the best of luck

in their future endeavors. [...]

2nd April 2019 Today

Egg Bhurji

Deadline

Mess Menu

in their future endeavors. [...] Deadline

Gymkhana IIT B

Fig. 40 Home Screen : Redefined Information Architecture

Quick Links

the Convocation Hall yesterday. The awards were given to students who

STUDENT GYMKHANA AWARDS 2018 - 19

Proﬁle

Venue

Old Gymkhana

We would like to congratulate all the winners and wish them the best of luck

Notiﬁcations

Date

09/04/2019

The Student Gymkhana Awards for the Academic Year 2018-19 were held at

Mess Menu

Maps

Time

15 : 16

Settings

Academic Calendar

ASC

Webm

Academic Timetable

ASC (External)

GPO

Holiday List

Moodle

CAMP

Circulars

Internship Login

Micro

Course List

Placement Login

BigHo

Central Library

Calendar

Academics

Fig. 42 InstiApp Home High Fidelity Wireframe

Logout

Fig. 43 InstiApp Home High Fidelity Prototype

Map

User Profile

Fig. 44 User Profile : Redefined Information Architecture

Proﬁle Pictures

Profile is a portal which displays the information about the native user, group of users or an event in any application. The profile majorly consists of the personal information, contact details, activities, current status etc. The low fidelity prototype is built on the basis of the redefined information architecture (Fig. 44). In the users profile portal the information is majorly divided into three, namely- contact details, program/designation details, and activity log. Editing the profile information as an option is provided in the settings portal. If the user is a student or an employee, they can alter any details, only with the permission and knowledge of IIT’s administrative department. One major feedback received during the evaluation was about the drop down template, taking up user’s reading time and a lot of space. Considering this, use of a carousel template instead of the dropdown template was applied.

Share Button External Link Follow

Proﬁles Events

Contact Info.

Attended Attending

Programme

Organisation

Roll No.

Email ID

Designation

Phone

Stream

Add

Department

Stream

Joined Year

Department Address

Graduation Year (Expected) Degree

Hostel Address Room No.

User Profile

Low Fidelity Prototype

My Proﬁle

Proﬁle

Enlin Quental

KiranPrasanth Rajan

IDC School of Design | 176330008@iitb.ac.in

IDC School of Design

Quick Links Pin / Saved Settings About Us

Call

Location

Mail

Quick Links

Program

Mail

Quick Links

Call

Location

Mail

Quick Links

Program Contact

Roll No.

Designation Email

kiranprasanthr@gmail.com

Discipline

Interaction Design

7022604056

Department

Events

Organisations

People

Location

Mail

Quick Links

Call

Location

Program

Contact

Mail

Quick Links

Mobile

Events

Organisations

People

Events

Organisations

People

IIT Bombay

Red Bull Paper Wings

http://www.idc.iitb.ac.in/

World Championship

IDC School of Design Year of Joining

Graduation Year (Expected)

2019

Degree

Department Address

www.redbull.com

IDC School of Design

1:00pm

IIT Bombay Campus Powai, Mumbai Maharashtra - 695043

www.idc.iitb.ac.in 1:00pm

17/03/2019

Jonathan Mathews

Student | Interaction Design | IDC School of Design

IIT Bombay

Organized by Roots

1:00pm

Student | Interaction Design | IDC School of Design

http://www.idc.iitb.ac.in/

www.roots.iitb.ac.in/

KiranPrasanth Rajan Supriya Dutta

IIT Bombay

Tech @ IITB Batminton Court

Bansuri Classes

IIT Bombay Campus Powai, Mumbai Maharashtra - 695043

Annu Verma

Student | Interaction Design | IDC School of Design

Sustainability Cell Batminton Court

IIT Bombay

Following

http://www.idc.iitb.ac.in/

Room Number

Attending

C- 522

Events

Organisations

People

Events

Organisations

People

Design. Develip. Deliver

World Championship

http://www.idc.iitb.ac.in/

www.roots.in 1:00pm

17/03/2019

Open Mike

Batminton Court

Fourth Wall

Fig. 47 My Profile - Contact Details Low Fidelity Prototype

Kuldeep Singh Rathod

Student | Interaction Design | IDC School of Design

InstiApp Orientation

Roots

Fig. 46 My Profile - Program Low Fidelity Prototype

Aeromodelling Club

ITC Convener Brieﬁng Session

Hostel 14

Contact

Batminton Court

Yeh Convener Kya Hota Hai ?

Hostel Address

M.Des | Master of Design

17/03/2019

Followers

Maths & Physics Club

Attended

Phone

2017

Call

IDC School of Design

Contact

Post Graduate Student

Fig. 45 My Profile Low Fidelity Prototype

Location

Program

176330008 Logout

Call

IDC School of Design

Fig. 48 My Profile - Following Events List Low Fidelity Prototype

Cultural Affairs

Fig. 49 My Profile - Organizations List Low Fidelity Prototype

Shikha Varma

Student | Interaction Design | IDC School of Design

Th li N Chi hi

Fig. 50 My Profile - Friends List Low Fidelity Prototype

Contact details, program details, the events and organizations followed by the user are converted to carousel template. The list of departments and organizations are placed last because those templates are in a card format which require a list view template. (Fig.52)

User Profile

High Fidelity Prototype 4G

9:41

Enlin Quental

(11)

People

Add

Enlin Quental

Interaction Design, M. Des Student IDC School of Design, IIT Bombay, Powai

Once the user touches the heading or the template itself, it will navigate the user towards the detailed view screen. Separate screens are provided for the events, organizations, and the people the user follows on the InstiApp (Fig.56, Fig.58 and Fig.60).

Call

Location

Mail

Parth

Sandra

Maria

Dav

Program

LDAP ID

Decipline & Degree

Depatrment

176330008

Interaction Design

IDC School of Design

IDC Schoo

M.Des Student

IIT Bombay, Powai

IIT Bombay, P

Hi there! I am a designer by degree, now specializing in Interaction Design at IDC school of Design. I enjoy taking complex problems and turning them in to simple and beautiful interface designs. I also love the logic and structure of

Contact

coding and always strive to write elegant and efficient code. Whether it is

HTML, CSS or jQuery [...]

kiranprasanthr@gmail.com

Phone No.

+91 7022604056

(11)

People

Department Address

Room No.

Hostel

IDC School of Design

C - 522

Hoste

IIT Bombay Campus, Powai Mumbai, Maharashtra

5th Floor C- Block

IIT Bom Mumb

Events

Add

Parth

Sandra

Maria

Dav

Program LDAP ID

Decipline & Degree

Depatrment

176330008

Interaction Design

IDC School of Design

IDC Schoo

M.Des Student

IIT Bombay, Powai

IIT Bombay, P

Contact

Eureka 2019

The Gen-Z Spark

Aakaar 19 Edit

Mood Indigo 2019

E-Summit 2019

Tetris 35th Anniversary

Lets Run as On

Organisations

kiranprasanthr@gmail.com

Fig.52 and Fig.54, are the same screens. Fig.52 is the one before scrolling and the other one is during scrolling down.

Red Bull PaperWings

Phone No.

+91 7022604056

Department Address

Room No.

Hostel

IDC School of Design

C - 522

Hoste

IIT Bombay Campus, Powai Mumbai, Maharashtra

5th Floor C- Block

IIT Bom Mumb

(17)

Aerospace Engineering World Championship

Events

wwwaseiitb.com

Biosciences & Bioengin... Red Bull PaperWings

Eureka 2019

The Gen-Z Spark

World Championship

Aakaar 19 Edit

www.bioscienceiitb.com

C Mood Indigo 2019

E-Summit 2019

Tetris 35th Anniversary

Lets Run as On

Chemical Engineering World Championship

Organisations

(17) www.chemicalengineering.com

Aerospace Engineering

World Championship

World Championship wwwaseiitb.com

Chemistry Department www.chemistrydeptiitb.com

Biosciences & Bioengin... World Championship www.bioscienceiitb.com

Chemical Engineering World Championship www.chemicalengineering.com

Fig. 53 User Profile - While Scrolling High Fidelity Wireframe

Fig. 54 User Profile - While Scrolling High Fidelity Prototype

Chemistry Department World Championship www.chemistrydeptiitb.com

Fig. 51 User Profile High Fidelity Wireframe

Fig. 52 User Profile High Fidelity Prototype

9:41

Enlin Quental

People

Enlin Quental

Add

Profile

9:41

Add

Events

Profile

Organisations

Events

People

Profile

Organisations

People

Events

Organisations

A A

Aerospace Engineering Aaisha

Aaron Hank

Abhilash

World Championship

Abhirami

wwwaseiitb.com

Music Night 2019 Music Club

Aditya

Alex

Angela

B Betty

Biosciences & Bioengin... World Championship

Yes

Maybe

Date March 30,2019

Bernard

March 30,2019

Are you Attending?

Appani

Time 4:30pm to 6:00

www.bioscienceiitb.com

Chemical Engineering

Mood Indigo

Bhanu Priya

Venue Convocation Hall

World Championship

All Team Meet

www.chemicalengineering.com

Chemistry Department

World Championship Candy

Chandini

Chandra Ghosh

Chandradeep

www.chemistrydeptiitb.com

Let's Run as One Health Club

Chiranjeevi

Christopher

World Championship

March 30,2019

April 1, 2019

Charu Hari

Civil Engineering www.civilstudents.com

April 30, 2019

Chitra

Computer Science & En... World Championship

www.ctara.com

Elizaveth

Emma

Enlin

Eureka! 2019 All Team Meet

Earth Sciences

March 30,2019

World Championship

F ll

Fig. 55 User Profile - People High Fidelity Wireframe

Fig. 56 User Profile - People High Fidelity Prototype

Fig. 57 User Profile - Events High Fidelity Wireframe

Fig. 58 User Profile - Events High Fidelity Prototype

Fig. 59 User Profile - Organizations High Fidelity Wireframe

Fig. 60 User Profile - Organizations High Fidelity Prototype

Quick Links

Network Maintenance CMS

Quick Links

Network Maintenance CMS (External) ASC Central Library Placement login Internship Login Moodle Academics

Academics

Quick Links, Saved Items and Notification Screen are brough together on one screen in the high fidelity prototype and user can switch between these three easily (Fig. 68).

ASC ASC (External) Moodle Internship Login Placement login Central Library

Quick Link portal brings closer the portals in the academics of IIT Bombay to the user. Thus the user can easitly get access to things such as academic calendar, Internet services, ASC Services etc.. (Fig. 68)

Course List Circulars Holiday List Academic Timetable Calendar Calendar BigHome Microsoft Store CAMP GPO Webmail Services Cloud

Fig. 63 Quick Links - Academics Low Fielity Prototype

Calendar Academic Calendar Academic Timetable Holiday List Circulars Course List

Quick Links

BigHome Microsoft Store CAMP GPO Webmail Services Cloud

High Fidelity Prototype

VPN Guide Hospital Intercon Extensions Miscellaneous 4G

9:41

Fig. 64 Quick Links - Calendar Low Fielity Prototype

Quick Links

Saved

Notification

CMS Maintenance

Quick Links

Network

Quick Links Academics

Network Maintenance CMS (External) ASC Central Library Placement login Internship Login Moodle Academics Course List Circulars Holiday List Academic Timetable Calendar Calendar

CMS Maintenance Network

Network Maintenance CMS

(External) ASC Central Library Placement login Internship Login Moodle Academics

Academics (External) ASC Central Library Placement login Internship Login Moodle

Course List Circulars Holiday List Academic Timetable Calendar Calendar

ASC

VPN Guide Hospital Intercon Extensions Miscellaneous

(External) ASC Central Library Placement login Internship Login Moodle Academics

Inte L

Academic Timetable

Holiday List

Circulars

Cou

GPO

CAMP

Microsoft Store

Big C

Hospitals

VPN Guide

Services Webmail

VPN Guide Hospital Intercon Extensions Miscellaneous

People

BigHome Microsoft Store CAMP GPO Webmail Services Cloud

Course List Circulars Holiday List Academic Timetable Calendar Calendar BigHome Microsoft Store CAMP GPO Webmail Services Cloud

Moodle

Calendar Academic Calendar

BigHome Microsoft Store CAMP GPO Webmail Services Cloud

ASC (External)

GPO CAMP Microsoft Store

Services

Miscellaneous

Webmail

Intercon Extensions Hospital

Miscellaneous Intercon Extensions

VPN Guide

BigHome Cloud

VPN Guide Hospital Intercon Extensions Miscellaneous

Fig. 61 Quick Links - Home Low Fielity Prototype

Fig. 62 Quick Links - CMS Low Fielity Prototype

Fig. 65 Quick Links - Services Low Fielity Prototype

Fig. 66 Quick Links - Miscellaneous Low Fielity Prototype

Fig. 67 Quick Links Portal High Fielity WIreframe

Fig. 68 Quick Links Portal High Fielity Prototype

Pin / Saved

High Fidelity Prototype

This is a new feature added to the InstiApp. User have to turn ON the pin / save icon on every events or organization needed, Then he can access it from the provided space later when he/she have to. The number of screens are reduced to the maximum limit in the high fidelity prototype (Fig. 74). Pin / Saved

Pin / Saved

9:41

Quick Links

Events

Pin / Saved

Events

( 08 )

Mood Indigo 2019

E-Summit 2019

Tetris 35th Anniversary

Red Bull PaperWings

Eureka 2019

The Gen-Z Spark

Explore

News

( 13 ) Mood Indigo 2019

Fees Structure 2019

News

THE SPOILED SUPPER

The Student Gymkhana Awards for the Academic Year 2018-19 were held at the Convocation Hall yesterday. The awards were given to students who have shown exemplary performances in a sphere of their institute life. We would like to congratulate all the winners and wish them the best of luck

wwwaseiitb.com

http://www.idc.iitb.ac.in/

World Championship www.bioscienceiitb.com

Chemical Engineering

Aeromodelling Club IIT Bombay

World Championship

http://www.idc.iitb.ac.in/

www.chemicalengineering.com

Fig. 71 Pin / Saved - News Low Fidelity Prototype

Chemistry Department World Championship

IIT Bombay

Fig. 69 Pin / Saved - Home Low Fidelity Prototype

Tech @ IITB

Biosciences & Bioengin...

MCDONALD’S AT IITB

Explore

( 16 )

http://www.idc.iitb.ac.in/

and subsidised eatery in the campus have ﬁnally been heard by the powers

Movie Screenin

World Championship

Feel the freshness Inside

All Team Meet

The perennial cries of the residents of our institute for a premium, hygienic

Campuse Placement Importan

COVID-19 Campus Shutdown

Aerospace Engineering InstiApp

All Team meet Association

that be. A long-standing and unfulﬁlled initiative of many a GSHA, IIT ]

VMCC Conference Room Booking

Insight- The Campus Magazine

in their future endeavors. [...]

Gymkhana IIT B

Student Gymkhana 2018-19

Departments & Other Organisations

Explore

An Update on the Food Poisoning in Hostel 10

Mood Indigo 2018 -19 IIt Bombay

Job opening at Linckup

E-Summit Important Dates

Holi Celebration at IIT & Campus Rules

Lets Run as On

Aakaar 19 Edit

Notifications

COVID-19 Live Updates

News

Notification

Events

InstiApp Updation

Events

Saved

www.chemistrydeptiitb.com

http://www.idc.iitb.ac.in/

Civil Engineering World Championship

Fig. 72 Pin / Saved - Explore Low Fidelity Prototype

www.civilstudents.com

Computer Science & En... World Championship www.ctara.com

Earth Sciences World Championship

News Explore

www.earthsciencedept.com

World Championship www.eeiitb.com

Fig. 70 Pin / Saved - Events Low Fidelity Prototype

Electrical Engineering

Fig. 73 Pin / Saved Portal High Fidelity Wireframe

Fig. 74 Pin / Saved Portal High Fidelity Prototype

Settings

High Fidelity Prototype

In the redesigned version, ‘settings’ leads to four other portals which are handled by external bodies from InstiApp. The application functions as a bridge between the user and the authorities. Through settings portal, a user can edit their profile, decide which information can be displayed in their profile, change theme and send feedback or suggestions regarding the instiApp. (Fig. 77)

9:41

Settings

Edit Profile Edit and Update your personal details.

Show Contact Details Show my Contact Details.

Edit Proﬁle

Edit and Update your personal details.

Dark Theme

Show Contact Details

This Feature is only available in Beta Version.

Show my Contact Details.

Dark Theme

This Feature is only available in Beta Version.

Send Feedback Report any technichal issues or any other suggestions.

Send Feedback

Report any technichal issues or any other suggestions.

Fig. 75 Settings Screen Low Fidelity Prototype

Fig. 76 Settings Screen High Fidelity Wireframe

Fig. 77 Settings Screen High Fidelity Prototype

About Us

High Fidelity Prototype

The content in the â&#x20AC;&#x153;About Usâ&#x20AC;? portal is carried forward while creating the new visual identity. The in app screens which consist of information regarding the owner or the information with permission to edit are displayed with a dark screen background. (Fig. 77 & Fig.81) 4G

9:41

Core Developers

Freddy Exchange Student | Industrial Design | IDC School of Design

About Us

About Us Johnson

Core Developers

Enlin Quental

PhD Student | Computer Science | CTARA

Enlin Quental

Student | Interaction Design | IDC School of Design

Nirpun

Supriya Dutta

Student | Interaction Design | IDC School of Design

Developers

Thuli N Chishi

Student | Interaction Design | IDC School of Design

Vishnu Kurupath

Student | Interaction Design | IDC School of Design

Ridhima Tapia

Student | Interaction Design | IDC School of Design

Student | Digital Integration | Mathematics Dept.

Supriya Dutta

Student | Interaction Design | IDC School of Design

Developers

Ron Job Jay Student | Computer Science | CTARA

Thuli N Chishi Student | Interaction Design | IDC School of Design Pin / Save Thuli N Chishi

Vishnu Kurupath Location Student | Interaction Design | IDC School of Design Call

M.Des Student | Interaction Design | IDC School of Design

Developers

Ridhima Tapia

Student | Interaction Design | IDC School of Design

Parth Kapadia

Angela Simon

Quick Links

Student | Interaction Design | IDC School of Design

Parth Kapadia

Vishnu Kurupath

Student | Interaction Design | IDC School of Design

Shikha Varma

Fig. 78 About Us - List Low Fidelity Prototype

Student | Chemical Engineering | Chemistry Dept.

Angela Simon

Student | Interaction Design | IDC School of Design

Shikha Varma

Fig. 79 About Us - Ellipsis Icon Low Fidelity Prototype

Fig. 80 About Us - List High Fidelity Prototype

Fig. 81 About Us - List High Fidelity Prototype

Notification Panel

Notiﬁcation

Title

Notiﬁcation

Venue Date & Time

Placement

Description

News

Deadline Explore

Proﬁle

Yes No

Placement Blog Time

Date

15:30

March 30, 2018

Venue

Old Gymkhana

April 5, 2018

Fig. 83 Notification - Card Template showing the arrangements of the provided Informations

Moodi - All Team Meet The All Teem Meet will be held for Student

• General Notification • Placement & Internship

Internship

Attending

Student Gymkhana Awards 2018-19

All Team Meet

Location

Pin/ Save

Notification Portal overlaps with multiple other portals and displays their contents too. It can be an update, a forwarded mail from different departments, upcoming events, placement and internship cell prompt etc. Most of the notifications come from placement and internship portals, news etc. Hence, in the redefined information architecture the notifications were slotted in four major categories. (Fig. 82)

Other Details External Links Share Links

Fig. 82 Notifications : Redefined Information Architecture

• News

Year 2018-19 were held at the Convocation to students who have shown [...]

Fig. 84 Notification - New feature in the card template, swipe the card left or right to see more options. Pin / Save, Share, Location and Delete Notification are available in this new feature.

• Explore what’s happening in campus Display card containers were designed with the necessary information allowing each and every update to be displayed properly. (Fig. 83, 84 and 85) Also, Tapping the Notification Icon, the user can also access the Notification Screen through Quick Links. All its notifications are displayed according to the date, combining both News and Notification from other portals. (Fig. 68)

Today's Medioa Reports News Desk IIT Bombay

Fig. 85 Notification - More than one image can be uploaded and displayed on the card template.

Notification Panel

Since the calendar is overlapping with this portal, it’s easy for the user to check the notifications by date too.

Low Fidelity Prototype Notiﬁcations

After conducting an affinity mapping exercise, the four categories are:

Notiﬁcations

Notiﬁcation

9 / 04 / 2019

Organiser : Women Cell IIT B

• Notification Panel

Internship Blog

Time

Date

Venue

1:00pm

17/03/2019

Women Cell

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu

• Placement Panel

Deadline

30th April 2019

• Internship Panel Fig.83, Fig.84 and Fig.85 the new card templates and the features in the new design. Fig.83 is a template which shows the notification for an event, competition or any data regarding placement or internship. When the user puts in the data in the portal, the contents of notification is segregated automatically by the new InstiApp and displays accordingly on the card template.

Placement Blog

STUDENT GYMKHANA AWARDS 2018 - 19 Date

Venue

09/04/2019

Old Gymkhana

News

Time

Date

Venue

1:00pm

17/03/2019

Women Cell

STUDENT GYMKHANA AWARDS 2018 - 19 Time

Date

Venue

15 : 16

09/04/2019

Old Gymkhana

have shown exemplary performances in a sphere of their institute life. We would like to congratulate all the winners and wish them the best of luck in their future endeavors. [...]

THE SPOILED SUPPER An Update on the Food Poisoning in Hostel 10

have shown exemplary performances in a sphere of their institute life.

in their future endeavors. [...]

2nd April 2019

THE SPOILED SUPPER An Update on the Food Poisoning in Hostel 10 The Student Gymkhana Awards for the Academic Year 2018-19 were held at the Convocation Hall yesterday. The awards were given to students who have shown exemplary performances in a sphere of their institute life. in their future endeavors. [...]

THE SPOILED SUPPER An Update on the Food Poisoning in Hostel 10

have shown exemplary performances in a sphere of their institute life.

Overall Dance Champions

We would like to congratulate all the winners and wish them the best of luck in their future endeavors. [...]

Overall Dance Champions InSync Dance Club IIT Bombay The competition this time was tougher than the previous year and the team is very happy to remain in top 2 since last three years. The crowd cheers is already making us feel like #winners (no offence intended) Kudos to the team for putting up such a great performance. InSync congratulates you on your achievement. Cheers!!

The competition this time was tougher than the previous year and the team is very happy to remain in top 2 since last three years. The crowd cheers is

Quick Link

already making us feel like #winners (no offence intended)

https://www.youtube.com/watch?v=L5DI40B6ueI

Kudos to the team for putting up such a great performance. InSync congratulates you on your achievement. Cheers!!

Overall Dance Champions InSync Dance Club IIT Bombay

Quick Link

The competition this time was tougher than the previous year and the team

https://www.youtube.com/watch?v=L5DI40B6ueI

is very happy to remain in top 2 since last three years. The crowd cheers is already making us feel like #winners (no offence intended) Kudos to the team for putting up such a great performance. InSync congratulates you on your achievement. Cheers!!

Placement Blog

8 / 04 / 2019

MCDONALD’S AT IITB Gymkhana IIT B The perennial cries of the residents of our institute for a premium, hygienic

Quick Link

Fig. 85 is another template which appears, if there are photos to display, due to a feature in the new design, the user can upload and view more than one picture.

Venue

Old Gymkhana

We would like to congratulate all the winners and wish them the best of luck

The Student Gymkhana Awards for the Academic Year 2018-19 were held at

InSync Dance Club IIT Bombay

News

Date

09/04/2019

2nd April 2019

the Convocation Hall yesterday. The awards were given to students who

Internship Blog

Time

15 : 16

the Convocation Hall yesterday. The awards were given to students who We would like to congratulate all the winners and wish them the best of luck

Placement Blog

Gymkhana IIT B

Deadline

The Student Gymkhana Awards for the Academic Year 2018-19 were held at

STUDENT GYMKHANA AWARDS 2018 - 19

Deadline

Gymkhana IIT B

the Convocation Hall yesterday. The awards were given to students who

2nd April 2019

9 / 04 / 2019

The Student Gymkhana Awards for the Academic Year 2018-19 were held at

Deadline

Notiﬁcation

Organiser : Women Cell IIT B

30th March 2019

Time

15 : 16

Women of IIT Bombay

Deadline

Gymkhana IIT B

Notiﬁcations

Placement Blog

Women of IIT Bombay

• News Panel

https://www.youtube.com/watch?v=L5DI40B6ueI

and subsidised eatery in the campus have finally been heard by the powers that be. A long-standing and unfulfilled initiative of many a GSHA, IIT Bombay will finally witness the establishment of a new McDonald’s outlet on the campus. The new outlet is set to replace The Campus Hub with effect

Internship Blog

from the 1st of August this year. [...]

Internship Blog News

STUDENT GYMKHANA AWARDS 2018 - 19

News

Fig. 86 Notification - Home Low Fidelity Prototype

Fig. 87 Notification - Notifications Low Fidelity Prototype

Fig. 88 Notification - Placement Blog Low Fidelity Prototype

Gymkhana IIT B Time

Date

Venue

15 : 16

09/04/2019

Old Gymkhana

Fig. 89 Notification - News Low Fidelity Prototype

Placement and internship panels : are handled by the placement cell of IIT Bombay. Whichever new information and offers released by the cell, it is updated on InstiApp. The criteria required, as specified by the placement cell are:

Notification Panel

High Fidelity Prototype

• Deadlines Fig. 84 shows a feature which is introduced instead of the ellipsis icon. During the evaluation, users experienced discomforts to tap on the ellipsis icon and also the icon was not eye-catching for the users to pay attention. Thus, the options in the ellipsis icon was changed to a card sliding feature with options placed alongside their respective icons. News Panel : is accessible to all the departments and organizations, most of the emails from the IIT Bombay’s LDAP email ID are forwarded here. (Fig. 91) Notification panel : is a space where updates and reminders are displayed. Once a user subscribes to a particular event or an organization. the notifications from that particular body will be shown in the notification panel. (Fig.93)

9:41

News

• Quick links

Notification

Placement Blog

Internship Bl March 29, 2019

COVID-19 PPE TRACKER INSTITUTE’S INNOVATIONS

• Job/Internship description

The content on this website is strictly the property of Insight and the Students’ Gymkhana IIT Bombay. If you wish to reproduce any content herein, please contact us - Chief Editors: Saman Siddiqui and Varun Sule Read

www.insightiitb.org/covid-19-ppe-tracker-institutes-innovations/

• Time Period

Mail to

insight@iitb.ac.in

• Salary / Stipend • Qualification The new card template is able to accommodate all the above specified criteria (Fig. 95 & Fig. 97).

Today's Medioa Reports News Desk IIT Bombay

IIT's convocation dates are out Only for Students from IIT Bombay Gordrej India is looking for designers, interested people please check the link below All interested candidates to share One-page CVs with a cover letter detailing which profile do they wish to apply for and why on the above Website www.gordrejindia.com Contact us

There is no limit for the user to submit a writeup on the new notification card since the word limit is not assigned. Also the new card template will expand automatically, accommodating the text being fed in. (Fig. 97)

www.gordrejplacements@iitb,com

Fig. 90 Notification - News High Fidelity Wireframe

Fig. 91 Notification - News High Fidelity Prototype

9:41

News

Notification

Placement Blog

9:41

Internship B

News

Notification

Placement Blog

Student Gymkhana Awards 2018-19

Notification

Internship Blog

Internship & FTE opportunities

Full time job in Pune, Mumbai, Delhi and Bangalore Date

Internship and FTE opportunities for IIT Bombay students

Hi everyone, Please find the details of the opening below

Venue

March 30, 2018

Placement Blog

March 29, 2019

Job opening at Linckup

Placement Blog

15:30

Internship B March 29, 2019

March 29, 2019

Time

9:41

Time

Old Gymkhana

Date

15:30

March 30, 2018

Venue

Old Gymkhana

Linckup is a networking platform where MSME businesses can find, connect and The Student Gymkhana Awards for the Academic Year 2018-19 were held at the Convocation Hall yesterday. The awards were given to students who have

transact online. Having launched the platform, the startup is currently

Hope you are all safe from the pandemic and coping up well with the current

expanding the core-team and looking to hire for Tech role.

circumstances. We have put in our best efforts to provide you with

shown exemplary performances in a sphere of their institute life. [...]

opportunities available in the market from time to time. We need the help of

Deadline

April 5, 2018

Position

our widespread Alumni network to cope up with these desperate times in front

Software Engineer

of us. The Institute has decided to pause the current semester on 31-03-2020 to deal with the challenges posed by the lock-down due to covid-19 pandemic,

About Full Time Role

and reopen on 01-06-2020 to continue with the remaining academic program

At Linckup, you will be developing web and mobile-based applications as per the product road map. The individual should be flexible enough to learn and implement solutions on any tech stack on the go.

Moodi - All Tea All Team Meet

Salary

Convocation Hall yesterday. T

Equity + Compensation as per Market Standards

shown exemplary performan

of the year 19-20. Accordingly, the summer vacation has been preponed to begin on 01-04-2020, which will last till 31-05-2020. Considering the situation arised due to lockdown, everyone is forced to work from home. We are reaching out to you for available opportunities as per your knowledge. Right now we are

The All Teem Meet will be he

focused on opportunities primarily for internships. Students are keen on utilizing their time and improving their skills by working from home. Looking forward to a helping hand from all of you with in your reach.

Experience required Minimum 2 years, however, If you believe you can learn new stack faster and develop solutions, thatâ&#x20AC;&#x2122;s good enough.

RE: Student Gymkhana Awards 2018-19 Gymkhana Students Union

Links

The Student Gymkhana Awards for the Academic Year 2018-19 were held at the

ankit@linckup.com

Deadline

April 5, 2018 March 29, 2019

Convocation Hall yesterday. The awards were given to students who have shown exemplary performances in a sphere of their institute life. [...]

Internship oppertunity at Gordrej

Opening at GIST Advisory India

Only for Design Students

Please find the details of the opening below

Link https://www.youtube.com/watch?v=L5DI40B6ueI

Gordrej India is looking for designers, interested people please check the link

About the company

below All interested candidates to share One-page CVs with a cover letter

www.gistimpact.com/about-us.php

InstiApp new Version

detailing which profile do they wish to apply for and why on the above

Job Description

Updated version for instiapp available from end of june 2019

Website

The Student Gymkhana Awards for the Academic Year 2018-19 were held at the Convocation Hall yesterday. The awards were given to students who have

www.gordrejindia.com Contact us

shown exemplary performances in a sphere of their institute life. [...]

www.gordrejplacements@iitb,com

1. Job Profiles - Developer We are starting our in-house tech team and are looking for developers (freshers and experienced) who can help manage our current PHP platforms and transition them to better languages. Total vacancies: 3 (2 juniors + 1 senior)

March 29, 2019

Mood Indigo 2019 Registration Opened

Internship opening at GIST Advisory India Please find the details of the opening below

2. Job Profiles - Analysts

MoodIndigo2019 Team The Moodi Team Awards for the Academic Year 2018-19 were held at the

Minimum 2 years, however, If you believe you can learn new stack faster and develop solutions, thatâ&#x20AC;&#x2122;s good enough.

About the company

Location

1. Internship Profiles - Developer

These will be working out of the Mumbai office i.e. Boomerang, Chandivali.

www.gistimpact.com/about-us.php

Convocation Hall yesterday. The awards were given to students who have shown exemplary performances in a sphere of their institute life. [...] Link Contact

https://www youtube com/watch?v=L5DI40B6ueI

Fig. 92 Notification - Notifications High Fidelity Wireframe

Fig. 93 Notification - Notifications High Fidelity Prototype

Fig. 94 Notification - Placement Blog High Fidelity Wireframe

Fig. 95 Notification - Placement Blog High Fidelity Prototype

Fig. 96 Notification - Internship Blog High Fidelity Wireframe

Fig. 97 Notification - Internship Blog High Fidelity Prototype

Calendar

How it works: For the portal which uses the Calendar, an active button appears on the bottom right of the screen (Fig.104). When the user touches the button, the calendar emerges from the bottom. (Fig. 107)

Calendar

Year Month Week

The Calendar is available in three different colour themes. Since the calendar overlaps with other portals, depending up on the background, the calendar switches the colour theme. This is for the ease of readability. (Fig.106)

Calendar

Low Fidelity Prototype

Day Fig. 98 Calendar : Redefined Information Architecture

Calendar is a feature which plays an important role in the new InstiApp. It overlaps with most of the other portals and thus it is made easily accessible for the user by placing it in a floating container in the new design. The information changes on the screen which is behind the calendar according to the dates (Fig.107 & Fig. 108). Intensity of the cognitive load put on the user was also taken care of. This new feature is mostly useful in notification and events portal and not in Maps or Home.

Calendar

Mood Indigo 2018-19

Bansuri Classes

All Team Meet

Organized by Roots

www.moodindigo.com 10:00pm

06/04/2019

www.roots.iitb.ac.in/ Convocation Hall

1:00pm

17/03/2019

Sustainability

E - Cell

An Engineering & Everyday Perspective

Part of Tech Fest www.ecell.iitb.ac.in

www.iitb.ac.in 1:00pm

Batminton Court

17/03/2019

1:00pm

Batminton Court

17/03/2019

Batminton Court

E- Art

The Silhouette Squad

A First of its kind Computer Art Competition

Tech Fest, All Team Meet www.techfest.iitb.ac.in

www.wac.in 1:00pm

17/03/2019

1:00pm

Batminton Court

www.segreta.iitb.ac.in

www.rujuta Diwekar.in

Mon

Tue

4 5 Yoga Pratiyogita Presents 12 10Yogastha11

171:00pm 18

Meet 27 24Coordinators 25 26

Fri 17/03/2019

Batminton Court

The Biggest Online Crypt Hunt 8th May 2019

Fitness Beyond Number 12th April 2019 Wed Thu 1:00pm

17/03/2019

Segreta

Rujuta Diwekar

Sat Sun Batminton Court

Mon

Tue

15 22 29

Wed Thu 1:00pm

Fri 17/03/2019

Sat Sun Batminton Court

www.yogastha.iitb.ac.in

12th April 2019 12th April 2019

Fig. 99 Calendar - Minimized Low Fidelity Prototype

Mon

Tue

Wed

Thu

Fri

Sat

Sun

15 1

16 2

17 3

Fig. 100 Calendar - Restore Low Fidelity Prototype

19 17/03/2019

20 Batminton21 Court 28

Heros are ordinary people, who choose not ... www.iitb.ac.in

1:00pm

17/03/2019

Fig. 101 Calendar - Maximized Low Fidelity Prototype

Batminton Court

Fig. 102 Calendar - Date Changed Low Fidelity Prototype

16th April 2019 Mon

Tue

Wed

Thu

Fri

Sat

Sun 7

el 13

Hostel 14

of Titans

Host el 13

The Silicon Ship

Trid

of Titans

Location

Loca

ation

Hostel 14

Host

The Silicon Ship

Trid

Location

Loca

16th April 2019 Break Fast Sat

Fig. 105 Calendar - Template High Fidelity Wireframe

Dinner

Snacks

Break Fast

7:30pm - 10:00pm

Lunch

Snacks

Dinner

7:30pm - 10:00pm

Paneer Corn Masala

Thurai Moong Dry

Curd Rice

Paneer Butter Masala

Methi Paratha

Pancharatna Dal

Gongura Chutney

Omelet

Chapati / Roti

Regular

15 22

12th April 2019

Fig. 103 Fig. 104 Calendar - Floating Active Button Calendar - Floating Active Button High Fidelity Wireframe High Fidelity Prototype

Lunch

Sun

Special

Fri

Steamed Rice Sambar

16th April 2019

Channa Dal Chutny

Panee

Veg kofta

Lemon Rice

Roti S

Tomato Masala Rice

Dal Palak

Chapati / Roti

Onion, Cucumber, Carrot

Steamed Rice

Boiled Egg 1st May 2019 Banana

Rasam

Tue

Wed

Thu

Fri

Sat

Sun

Mon

Thu

Fri

Sat

Sun

Mon

Tue

Wed

Thu

Fri

Sat

3 2 Fruit Custurd

Sweet Lassi 9 Butter Milk

Tomato Soup 10 9

Beverages

Wed

French Fries

Mon

Beverages

Tue

Chicken Dum Biriyani

Main Course

Thu

Regular

Wed

Special

Tue

Main Course

Mon

Sun

Fig. 106 Calendar - Template Options High Fidelity Prototype

Fig. 107 Calendar - on Mess Menu High Fidelity Prototype

Fig. 108 Calendar - Change the date to see the food menu on that date.

Events & Explore Events and the Explore portal share the same template. This is because, list of Events, Organisations / Departments and users are common in these portals in these two portals. In the low fidelity prototype, Events, organizations / departments are provided with their own profile template. During the redesign, a new template was created which can be used for all these bodies. Drop down template from the low fidelity prototype was flexible enough to accommodate the variations of information and data in these bodies. Events, organizations/ Departments and list of users in the InstiApp follow the same templates throughout the new application (High Fidelity Prototype). Also at the same time, all the three have their own display templates which allows the user to recognize them very easily. Other than that the cards and profiles are arranged according to the alphabetical order. An Add button is provided which stays constant in the three screens, also instead of the notification icon, it is the search icon which is placed. All the panels are placed as floating tabs, this makes it easy for the

user to switch from one panel to the other seamlessly. The cognitive load is very less here compared to the drop down template in the low fidelity prototype. Events

Pictures Share External Links Description Quick Links Venue Location Date & Time

Events Portal

After launching InstiApp, users could keep a track of events happening in the campus like workshops, summits, music or art events. It became easier to track the date, venue, time, and other details regarding the Events. Events Portal has two aspects- the opening screen, containing a list of events (Fig. 128 & Fig.130) and the other is the events profile (Fig. 115). The card template used for the list of events is followed throughout the application. Also the use of carousel sliders made it easy to save more space and allows user to find the required data easily.

Attending Yes No ProďŹ les Organisation Events

Fig. 109 Events : Redefined Information Architecture

Events

Events Profile

Profile

Low Fidelity Prototype

Profile of the Event is very similar to a Users Profile in terms of data and data segregation. The event can follow other related events, organizations and people. Users can share a profile of an event with others, find location, timing and other details regarding a particular event.

Events

Mood Indigo

All Team Meet

Date

Venue

Time

Date

Venue

Time

Date

Venue

1:00pm

17 / 03 / 2019

Convocation Hall

1:00pm

17 / 03 / 2019

Convocation Hall

1:00pm

17 / 03 / 2019

Convocation Hall

Location

Quick Links

Location

Are You Attending ?

Once the user reaches the Events Profile, they are provided with attendance options. (Fig.115) In the events profile, a separate panel is provided with the links. Each and every event has their own website, forums etc. these links can be viewed at the separate space provided which is called the Quick Links Panel. (Fig. 119)

Quick Links

Location

Quick Links

Are You Attending ?

Yes

Maybe

Yes

Maybe

Yes

Maybe

112

Moodindigo along with Aeromodelling Club, IIT Bombay” in association with “Red Bull” and “Aavhan, IIT Bombay” brings to you the “Red Bull Paper Wings” World Championship!

“Aeromodelling Club, IIT Bombay” in association with “Red Bull” and “Aavhan, IIT Bombay” brings to you the “Red Bull Paper Wings” World Championship!

Moodindigo along with Aeromodelling Club, IIT Bombay” in association with “Red Bull” and “Aavhan, IIT Bombay” brings to you the “Red Bull Paper Wings” World Championship!

“Red Bull Paper Wings” is a world paper airplane championship which is held by Red Bull every year with massive participation from over 100 countries! Here you get a chance to test your creativity, imagination and technical paper plane skills in Longest Distance or Longest Airtime competitions (or both) - and you could be battling it out on the international stage!

Quick Links

National winners compete against the world's paper plane elite in the World Finals at Salzburg's iconic Hangar-7. The world champion of each category will win a Red Bull Air Race weekend experience!

No Servos. No Brushless DC motors. What is needed is just a paper plane folded from a sheet of A4 paper and the skills to throw it further than anyone else!.

https://paperwings.redbull.com/in-en/event/444 Post video on Aeromodelling Club Page

https://www.facebook.com/aeromodellingiitb/ Post video on Aeromodelling Club Page

https://insti.app/org/aeromodelling-club

Events

Organisations

People

Events

Organisations

People

Events

Organisations

People

Following

Related Events Maths & Physics Club

Star Party

Here is a video to get you started!

http://www.idc.iitb.ac.in/

https://paperwings.redbull.com/in-en/

1:00pm

Here are the Rules

https://paperwings.redbull.com/in-en/rules

17/03/2019

Aeromodelling Club IIT Bombay

http://www.idc.iitb.ac.in/

Tech @ IITB

A First of its kind Computer Art Competition

IIT Bombay

http://www.idc.iitb.ac.in/

1:00pm

17/03/2019

E - Cell

Fig. 111 Events Profile - Events Low Fidelity Prototype

Supriya Dutta

Student | IDC School of Design

Batminton Court

E- Art

Fig. 110 Events Profile - Quick Links Low Fidelity Prototype

An Engineering & Everyday Perspective

17/03/2019

Student | IDC School of Design

http://www.idc.iitb.ac.in/ Batminton Court

Sustainability

1:00pm

Enlin Quental

IIT Bombay

KRITTIKA- The Astronomy Club

All Team Meet

Time

Thuli N Chishi

Student | IDC School of Design

Vishnu Kurupath Student | IDC School of Design

Batminton Court

Sustainability Cell IIT B

Fig. 112 Events Profile - Organisations Low Fidelity Prototype

Ridhima Tapia Student | IDC School of Design

Fig. 113 Events Profile - People Low Fidelity Prototype

Events Profile

High Fidelity Prototype

9:41

Date March 30,2019

About

Time 4:30pm to 6:00

Quick Links

Venue Convocation Hall

Events

Organisation

Date March 30,2019

About

Peo

Quick Links

Mood Indigo

Venue Convocation Hall

Events

Organisation

Peo

About

“Red Bull” and “Aavhan, IIT Bombay” brings to you the “Red Bull Paper Wings”

World Championship!

“Red Bull Paper Wings” is a world paper airplane championship which is held by

Red Bull every year with massive participation from over 100 countries! Here

you get a chance to test your creativity, imagination and technical paper plane

skills in Longest Distance or Longest Airtime competitions (or both) - and you

could be battling it out on the international stage!

Are you Attending?

Maybe

23 06 48 National winners compete against the world's paper plane elite in the World

National winners compete against the world's paper plane elite in the World

Finals at Salzburg's iconic Hangar-7. The world champion of each category will

win a Red Bull Air Race weekend experience!

No Servos No Brushless DC motors What is needed is just a paper plane folded

Fig. 115 Events Profile - Attendance High Fidelity Prototype

Fig. 116 Events Profile - About Event High Fidelity Wireframe

Fig. 117 Events Profile - About Event High Fidelity Prototype

Time 4:30pm to 6:00

Quick Links

Venue Convocation Hall

Events

Organisation

Peo

https://paperwings.redbull.com/in-en/event/444

All Team Meet Moodindigo along with Aeromodelling Club, IIT Bombay” in association with

Date March 30,2019

Mood Indigo

All Team Meet

Fig. 114 Events Profile - Attendance High Fidelity Wireframe

Time 4:30pm to 6:00

Moodindigo along with Aeromodelling Club, IIT Bombay” in association with

Yes

9:41

Post video on Aeromodelling Club Page

https://www.facebook.com/aeromodellingiitb/ Here is a video to get you started!

https://paperwings.redbull.com/in-en/ Register for the competition

https://paperwings.redbull.com/in-en/event/444

Fig. 118 Events Profile - Quick Links High Fidelity Wireframe

Fig. 119 Events Profile - Quick Links High Fidelity Prototype

9:41

Date March 30,2019

About

Time 4:30pm to 6:00

Quick Links

Venue Convocation Hall

Events

Organisation

Date March 30,2019

out

Related Organisations

Quick Links

Time 4:30pm to 6:00

Events

Venue Convocation Hall

Organisation

Following

People Followed

A A

ASC Application Software Centre www.asc@iitb.com

Aaisha

Aaron Hank

Abhilash

Abhirami

Angela

Appani

CRNTS Centre for Research in Nanotechnology & Science www.crnts.com

Aditya

CASDE

Fig. 120 Events Profile - Organization High Fidelity Wireframe

Centre for Aerospace Systems Design & Engineeri..

Follow Fig. 121 Events ProfileCRNTS - organization High Fidelity Prototype www.casdeiitb.com

Centre for Research in Nanotechnology & Science www.crnts.in

Alex

Fig. 122 Events Profile - People High Fidelity Wireframe

Fig. 123 Events Profile - People C High Fidelity Prototype Bernard

Candy

CC-Computer Centre

Betty

Chandini

Bhanu Priya

Chandra Ghosh

Chandradeep

Computer Centre www.ccd@iitb.com

DSCE

Charu Hari

Chiranjeevi

David

Dino John

Elizaveth

Emma

Christopher

Desai Sethi Centre for Entrepreneurship www.dsceiitb.com

NCAIR National Centre for Aerospace Innovation & Rese... www.ncair.co.in

NCM National Centre for Mathematics www.ncmiitbombay.com

E Enlin

Chitra

Events

List

For an event which is going to happen in the IIT Bombay campus, as the part of publicity many posters are made. And these posters are brought to the people by publishing as printouts or sharing through digital mediums including the InstiApp. The posters were observed to be more text heavy (Fig.125). At the same time, InstiApp is also generating the details of the event which floats on the event card container. This was affecting the readability and creating discomforts for the user during the evaluation process of the Events Portal. Considering this , the new card template dimension was modified, so that the posters uploaded will be displayed as thumbnails. Also a gradation of black to transparency is added in, from the bottom of this card container making the text generated by the InstiApp clear and readable for the user.

details such as the name of the event, description about the event, profile picture of the sponsored organization etc. are provided (Fig. 124).

Events List

Low Fidelity Prototype Events

Events

IIT Bombay Mood Indigo 2018-19 All Team Meet www.moodindigo.com 10:00pm

06/04/2019

Convocation Hall

Sustainability An Engineering & Everyday Perspective

Music Night 2019 Music Club

Mood Indigo 2018 -19 IIt Bombay

March 30,2019

www.iitb.ac.in 1:00pm

17/03/2019

Batminton Court

E- Art A First of its kind Computer Art Competition

Are you Attending?

Nature Club

Yes

Maybe

www.wac.in 1:00pm

17/03/2019

Batminton Court

Rujuta Diwekar Fitness Beyond Number

Date March 30,2019

Time 4:30pm to 6:00

Venue Convocation Hall

www.rujuta Diwekar.in

Music Night 2019 Music Club

1:00pm

March 30,2019

Fig. 124 Events List - Card Template High Fidelity Prototype

17/03/2019

Batminton Court

Yoga Pratiyogita

How to Escape Saddle Points Eﬃcency ? Earth Science

Yogastha Presents www.yogastha.iitb.ac.in 1:00pm

17/03/2019

Batminton Court

Coordinators Meet Heros are ordinary people, who choose not ... www.iitb.ac.in 1:00pm

17/03/2019

Batminton Court

Who Killed Shastri ? Movie Screening

Users have to slide the top layer from left to right and can view the details provided in the second layer. The second layer has the details regarding the time, venue, access location, delete card. The user can also confirm their participation for the event. (Fig.124).

www.culturalaffairs.iitb.ac.in 1:00pm

Reﬂection The Art of Yoga

Batminton Court

Club Introductory Session www.roots.iitb.ac.in 1:00pm

Web & Coding Club

17/03/2019

Roots

17/03/2019

Batminton Court

Red Bull Paper Wings World Championship www.redbull.com 1:00pm

17/03/2019

Batminton Court

Yeh Convener Kya Hota Hai ? ITC Convener Brieﬁng Session www.idc.iitb.ac.in

How to Escape Saddle Points Eﬃcency ?

1:00pm

17/03/2019

Batminton Court

Bansuri Classes Organized by Roots www.roots.iitb.ac.in/

Earth Science

1:00pm

17/03/2019

Batminton Court

Roots World Championship www.roots.in 1:00pm

17/03/2019

Batminton Court

Fourth Wall Open Mike

The card template of an event is made into two layers, one on the other. The top layer displays the poster thumbnail and other

Red Bull Paper Wings

www.gymkhana.iitb.ac.in 1:00pm

17/03/2019

Batminton Court

Tech Fest Heros are ordinary people, who choose not ...

Web & Coding Club

Fig. 125 Events List - Elaborated View Low Fidelity Prototype

www.techfest.iitb.ac.in

Fig. 126 Events List - Thumbnail Cards Low Fidelity Prototype

Explore Portal

Events List

High Fidelity Prototype

Explore 4G

9:41

Departments

Add

Profile

Events

People

Organisations

Hostel Music Night 2019 Music Club Date March 30,2019

Time 4:30pm to 6:00

March 30,2019

Are you Attending?

Venue Convocation Hall

Yes

Maybe

Date March 30,2019

Time 4:30pm to 6:00

Venue Convocation Hall

Mood Indigo

Clubs

All Team Meet

About

Events

Quick Links

Organisation

Peo

Events

Related Events

Let's Run as One Health Club

March 30,2019

April 1, 2019

Music Night 2019 Music Club

Fig. 127 Events List - The List High Fidelity Wireframe

Eureka! 2019

Maybe

Date March 30,2019

Time 4:30pm to 6:00

All Team Meet

Venue Convocation Hall

Fig. 128 Events List - The List High Fidelity Prototype Let's Run as One Health Club

Attending

March 30,2019

Are you Attending? Yes

Attended

April 30, 2019

Mood Indigo All Team Meet

Fig. 130 Events List - During Scrolling High Fidelity Prototype

Organisations

ProďŹ les

March 30,2019

April 1, 2019

Fig. 129 Events List - During Scrolling High Fidelity Wireframe

March 30,2019

April 30, 2019

Fig. 131 Explore Portal : Redefined Information Architecture Eureka! 2019 All Team Meet

Mood Indigo All Team Meet

March 30,2019

The Explore portal allows users to explore events (which are over or upcoming), organizations or departments, clubs or other bodies and also helps the user to know about friends who are also members of instiApp.

Explore Portal

Low Fidelity Prototype Explore

Departments

Explore

Departments

Explore

Departments Hostel

Aerospace Engineering

Hostel

9:41

Clubs

Biosciences & Bioenginee...

Hostel 1

Queen of the Campus

Chemical Engineering

Tinkers Laboratory

Hostel 2

Tinkers Lab, IIT Bombay

The Wild Ones

Clubs

Departments

Hostels

Organisations

Chemistry Department

Pro

http://www.idc.iitb.ac.in/

Hostel 3

CSEC

Vitruvians

Civil Engineering

Fig. 132 Explore Portal - Carousel Slider from the High Fidelity Prototype.

Gotta Hack Them All http://www.idc.iitb.ac.in/

Hostel 4

MadHouse

InstiApp

Earth Sciences

Feel the freshness Inside

Hostel 5

http://www.idc.iitb.ac.in/

PentHouse

Hostel 1

Hostel 2

Hostel 3

Hostel 4

Vituvians

MadHouse

The drop down template, which was introduced in the low fidelity prototype, was not working properly in this portal. Hostel 5 enormous Hostel 6 Hostel 7 Hostel 8 Due to the number of items in PentHouse Vikings Lady of the Lake Woodland each and every panel such as, clubs, events, departments etc., the drop down template couldnâ&#x20AC;&#x2122;t satisfy the need. So the carousel Hostel 9 Hostel 10 Hostel 11 12 slider was used instead (Fig.CrownHostel 132). This Nawaabon ki Basti Phoenix Athena of the Campus made the user navigation very smooth, it is now very easy for a user to find a hostel or a department and know more about it Hostel 13 Hostel 14 Hostel 15 Hostel 16 of Titans Silicon Ship Trident Olympus in itsHouse profile. Queen of the Campus The Wild Ones

Hostel 17

Hostel 18

Hostel 17

Chatruwas 18

Electrical Engineering

Hostel 6

Electronics & Communicati ... IIT Bombay

Vikings

http://www.idc.iitb.ac.in/

Energy Science & Engineeri...

Hostel 7 Lady of the Lake

Explore

Environmental Science and...

Music Club IIT Bombay

Hostel 8

http://www.idc.iitb.ac.in/

WoodLand

Humanities & Social Science...

Departments

Follow The Design Club

Hostel 9

IIT Bombay

Nawaabon Ki Basti

Industrial Design Centre

Hostel

http://www.idc.iitb.ac.in/

Hostel 10

Film Club

Phoenix

FIn - The Last word in a Film

Mathematics Department

Clubs

http://www.idc.iitb.ac.in/

Hostel 11

Athena

Mechanical Engineering

Events

Software Club

Hostel 12

IIT Bombay

http://www.idc.iitb.ac.in/

Crown of the Campus

Metallurgical Engineering a...

Organisation

Hostel 13

Diwali Organisors

House of Titans

ProďŹ les

IIT Bombay

http://www.idc.iitb.ac.in/

Hostel 14

Silicon Ship

Hostel

All Team meet Association All Team Meet

Fig. 133 Explore Portal - Home Low Fidelity Prototype

http://www.idc.iitb.ac.in/

Clubs

Events

Hostel 16 EventsOlympus

Events

Organisation

Hostel 17 Organisation

Organisation

Fig. 134 Explore Portal - Department List Low Fidelity Prototype

Fig. 135 Explore Portal - Hostels Low Fidelity Prototype

Fig. 136 Explore Portal - Clubs Low Fidelity Prototype

Explore Portal

High Fidelity Prototype Explore

Explore

Departments

Hostel

Clubs

9:41

Events

Clubs

Events

Departments

Hostels

Organisations

Clubs

Pro

Football Field

Art Society

Aerobics

wwwaseiitb.com

Automobile

17/03/2019

World Championship

www.roots.in Batminton Court

Aero Lab

Aeromodelling Club

17/03/2019

Chemical Engineering

www.gymkhana.iitb.ac.in Batminton Court

World Championship

Tech @ IITB

Batminton

Bird Watching Bird Lovers...

www.chemicalengineering.com

Boys club

IIT Bombay

Tech Fest

17/03/2019

World Championship

www.techfest.iitb.ac.in

www.chemistrydeptiitb.com

Batminton Court

Sustainability Cell

Bombay Club

IIT Bombay

E - Summit

Batminton Court

E - Cell

www.civilstudents.com

Bottom Top

http://www.idc.iitb.ac.in/

Part of Tech Fest

World Championship www.ctara.com

http://www.idc.iitb.ac.in/

Tech Fest, All Team Meet

1:00pm

17/03/2019

Carpentry

Car Designing

Cat Lovers

Earth Sciences

Candle Club

World Championship

www.techfest.iitb.ac.in Batminton Court

www.earthsciencedept.com

Rakshak

17/03/2019

Batminton Court

Tinkers Laboratory Tinkers Lab, IIT Bombay

Natural Language Processing

http://www.idc.iitb.ac.in/

Tech Fest

www.nlp.iitb.ac.in 1:00pm

17/03/2019

Batminton Court

CSEC

Gotta Hack Them All

Roots

Fig. 139 Explore - Clubs High Fidelity Wireframe

Cat & Dogs

Fig. 140 Explore - Clubs High Fidelity Prototype

Care for You

www.eeiitb.com

Fig. 141 Explore - Departments High Fidelity Wireframe

Fig. 142 Explore - Departments High Fidelity Prototype

http://www.idc.iitb.ac.in/

The Classical & Folk Arts Club

www.roots.iitb.ac.in 1:00pm

Chemistry Club ChemicalClub

www.segreta.iitb.ac.in 1:00pm

World Championship

http://www.idc.iitb.ac.in/

The Biggest Online Crypt Hunt

Electrical Engineering

IIT Bombay

Segreta

Cultural Affairs IIT Bombay

The Silhouette Squad

Computer Science & En...

Baricades

Follow Batminton Court

Civil Engineering

InstiApp Orientation

www.ecell.iitb.ac.in 17/03/2019

Base Ball Club

Civil Engineering

Design. Develip. Deliver

1:00pm

Bat & Ball

www.esummit.com 17/03/2019

Book Club

http://www.idc.iitb.ac.in/

Web & Coding Club IIT B

1:00pm

Chemistry Department

http://www.idc.iitb.ac.in/

Heros are ordinary people, who choose not ...

1:00pm

http://www.idc.iitb.ac.in/

Open Mike

1:00pm

www.bioscienceiitb.com

Audition Club

IIT Bombay

Fourth Wall

Biosciences & Bioengin...

http://www.idc.iitb.ac.in/

World Championship

1:00pm

Pro

Maths & Physics Club IIT Bombay

Roots

Organisations

World Championship

Air Club

www.techfest.iitb.ac.in 06/04/2019

Hostels

Aerospace Engineering

KRITTIKA- The Astronomy Club

10:00pm

Departments

Organisation

Star Party

9:41

17/03/2019

Batminton Court

InstiApp

Feel the freshness Inside

Organisation

http://www.idc.iitb.ac.in/

Fig. 137 Fig. 138 Explore Portal - Organization List Events List Prototype Low Fidelity Prototype

9:41

Clubs

Departments

Hostels

Organisations

9:41

Pro

Clubs

Departments

Hostels

Organisations

ASC Hostel 1

Hostel 2

Queen of the Campus The Wild Ones

Hostel 3

Hostel 4

Vituvians

MadHouse

Application Software Centre www.asc@iitb.com

CRNTS Hostel 5

Hostel 6

Hostel 7

Hostel 8

PentHouse

Vikings

Lady of the Lake

Woodland

Centre for Research in Nanotechnology & Science www.crnts.com

Hostel 1

Mess Menu

Hostel 9

Hostel 10

Hostel 11

Hostel 12

Nawaabon ki Basti

Phoenix

Athena

Crown of the Campus

Queen of the Campus

Centre for Aerospace Systems Design & Engineeri..

Location

Unfollow

www.casdeiitb.com

“Red Bull” and “Aavhan, IIT Bombay” brings to you the “Red Bull Paper Wings”

Centre for Research in Nanotechnology & Science

World Championship!

www.crnts.in

“Red Bull Paper Wings” is a world paper airplane championship which is held by

Hostel 14

Hostel 15

Hostel 16

House of Titans

Silicon Ship

Trident

Olympus

CRNTS

Moodindigo along with Aeromodelling Club, IIT Bombay” in association with

Hostel 13

CASDE

Red Bull every year with massive participation from over 100 countries! Here

CC-Computer Centre

you get a chance to test your creativity, imagination and technical paper plane skills in Longest Distance or Longest Airtime competitions (or both) - and you

Computer Centre

could be battling it out on the international stage! www.ccd@iitb.com

LINKS

Hostel 17

Hostel 18

Website

Not Available

Hostel 17

Chatruwas 18

Facebook

www.queenofthecampus.com

Twitter

queensofthecampus

Instagram

queensofthecampus

DSCE Desai Sethi Centre for Entrepreneurship www.dsceiitb.com

NCAIR National Centre for Aerospace Innovation & Rese... www.ncair.co.in

NCM National Centre for Mathematics www.ncmiitbombay.com

Fig. 143 Explore - Hostels High Fidelity Wireframe

Fig. 144 Explore - Hostels High Fidelity Prototype

Fig. 145 Explore - Hostels - Profile High Fidelity Wireframe

Fig. 146 Explore - Hostels - Profile High Fidelity Prototype

Fig. 147 Explore - Organizations High Fidelity Wireframe

Fig. 148 Explore - Organizations High Fidelity Prototype

Pro

9:41

artments

Hostels

Profiles

Organisations

Events

tments

Hostels

Organisations

Profiles

Events

A Aaisha

Aaron Hank

Abhilash

Abhirami

Angela

Appani

Music Night 2019 Music Club

Aditya

Courses

Chemical Engineering Queen of the Campus

Alex

Location

Yes

Maybe

Date March 30,2019

Bernard

Betty

March 30,2019

Are you Attending?

Time 4:30pm to 6:00

Venue Convocation Hall

Mood Indigo

Bhanu Priya

All Team Meet

Moodindigo along with Aeromodelling Club, IIT Bombay” in association with “Red Bull” and “Aavhan, IIT Bombay” brings to you the “Red Bull Paper Wings” World Championship!

“Red Bull Paper Wings” is a world paper airplane championship which is held by Red Bull every year with massive participation from over 100 countries! Here

Candy

Chandini

Chandra Ghosh

Chandradeep

you get a chance to test your creativity, imagination and technical paper plane skills in Longest Distance or Longest Airtime competitions (or both) - and you could be battling it out on the international stage!

Let's Run as One Health Club

LINKS Website

www.ceiitb.co.in

Facebook

www.chemicaldeptiitb.com

Twitter

Not Available

Instagram

Not Available

March 30,2019

April 1, 2019

Charu Hari

Chiranjeevi

David

Dino John

Christopher

April 30, 2019

Chitra

Eureka! 2019 All Team Meet

March 30,2019

E Elizaveth

Emma

Enlin

Mood Indigo

Fig. 149 Explore - Organizations - Profile High Fidelity Wireframe

Fig. 150 Explore - Organizations - Profile High Fidelity Prototype

Fig. 151 Explore - Peoples Profiles High Fidelity Wireframe

Fig. 152 Explore - Peoples Profiles High Fidelity Prototype

Fig. 153 Explore - Events List High Fidelity Wireframe

Fig. 154 Explore - Events List High Fidelity Prototype

Mess Menu

Mess Menu is a more frequently used portal than the rest, in the InstiApp, making it accessible for the user with the residences and departments being at quite a distance. In the new design, the interface was made simpler and faster for the user to access any Mess Menu of any hostels in the campus. Use of drop-down menu template is not very appropriate for the content of the Mess Menu (Fig. 156 & Fig. 157), hence a process of using a calendar for daily menu viewing can be used. Also considering a user new to the campus, a location icon was also placed which helped them locate the Hostel or the Hostel Mess.

Another point taken in from the evaluation was a necessity for bringing in new touch interaction options. Along with the need to prioritize the information of mess timings, menu and special dishes- in a hierarchy.

Low Fidelity Prototype

Mess Menu

Hostel 12

Hostel 15

The Silicon Ship 12/04/2019

Milk Tea Coffee Bournvita Chocos Egg Bhurji Omelet Bread, Banana Butter, Jam Dry Yellow Aloo Sabji Paneer Bhurji Palak Puri Breakfast Beverages Regular Main Course

Mess Menu

Beverages Main Course Regular Butter Milk Sweet Lassi Thurai Gongura Moong Dry Paneer Methi Curd Fruit Custurd Rice Paratha Butter Masala Steamed Rice Pancharatna Omelet Sambar Lunch Chapati /Chutney RotiDal

Beverages Main Course Milk Tea Coffee Bread, Butter, Masala Dosa Jam Snacks

The Silicon Ship Location

12/04/2019

Location

Breakfast 7:30am to 10:00am

Main Course

Palak Puri Dry Yellow Aloo Sabji

Regular Beverages Main Course Veg Channa kofta Dal Chutny French Fry Masala Rice Tomato Steamed Rice Chapati /Soup Roti Onion, Cucumber, Carrot Banana Rasam Boiled Egg Dinner

Regular

Location

Egg Bhurji Paneer Bhurji Banana Omelet Bread, Butter, Jam

Details Date & Time

During Lunch and Dinner some special food items are prepared by the hostel catering services almost every day. The current design doesnâ&#x20AC;&#x2122;t include this information in the app. This is the new addition in the redesigned app, along with the special food item price and vegetarian/non-vegetarian information too, for the users with specific cuisine habits. (Fig. 169)

Mess Menu

Omelet

Fig. 156 Mess Menu - Home Low Fidelity Prototype

Beverages

Chocos Bournvita Coffee Tea Milk

Breakfast Lunch

Beverages Main Course Milk Tea Coffee Bread, Butter, Masala Dosa Jam Snacks Regular Beverages Main Course Veg Channa kofta Dal Chutny French Fry Masala Rice Tomato Steamed Rice Chapati /Soup Roti Onion, Cucumber, Carrot Banana Rasam Boiled Egg Dinner

Snacks Dinner

Fig. 157 Mess Menu - Breakfast Low Fidelity Prototype

Fig. 155 Mess Menu : Redefined Information Architecture

Mess Menu

High Fidelity Prototype (HFP)

Mess Menu

Hostel 12

Mess Menu

Hostel 15

The Silicon Ship 12/04/2019

Hostel 15

The Silicon Ship Location

12/04/2019

The Silicon Ship Location

12/04/2019

Location

el 13

Hostel 14

of Titans

Milk Tea Coffee Bournvita Chocos Egg Bhurji Omelet Bread, Banana Butter, Jam Dry Yellow Aloo Sabji Paneer Bhurji Palak Puri Breakfast Beverages Regular Main Course

Milk Tea Coffee Bournvita Chocos Egg Bhurji Omelet Bread, Banana Butter, Jam Dry Yellow Aloo Sabji Paneer Bhurji Palak Puri Breakfast

Beverages Regular Main Course

ation

Break Fast

Beverages Main Course Milk Tea Coffee Bread, Butter, Masala Dosa Jam Snacks

Pancharatna Dal

Masala Dosa

Curd Rice

Bread, Butter, Jam

Dinner 7:30pm to10:30pm

French Fry

Gongura Chutney

Veg kofta

Fruit Custurd

Coffee Tea

Regular

Milk

Chapati / Roti

Lunch

Snacks

Palak Puri Dry Yellow Aloo Sabji

Egg Bhurji

Omelet

Paneer Bhurji

Bread, Butter, Jam

Banana

Omelet

Chocos

Tea

Bournvita

Milk

Tomato Masala Rice Channa Dal Chutny French Fry Channa Dal Chutny

Coffee

French Fry

Steamed Rice Sambar

Loca

Main Course

Methi Paratha Beverages

Main Course

Regular

4:15pm to5:30pm

Thurai Moong Dry Paneer Butter Masala

Location

7:30am - 10:00am

Snacks

Beverages

12:15pm to 2:00pm

Trid

Beverages Regular Main Course

Lunch

Main Course

Regular Beverages Main Course Veg Channa kofta Dal Chutny French Fry Masala Rice Tomato Steamed Rice Chapati /Soup Roti Onion, Cucumber, Carrot Banana Rasam Boiled Egg Dinner

Channa Dal Chutny

Omelet Regular Beverages

Sweet Lassi Butter Milk

Beverages Main Course Milk Tea Coffee Bread, Butter, Masala Dosa Jam Snacks

Fig. 159 Mess Menu - Snacks Low Fidelity Prototype

Chapati / Roti Steamed Rice Rasam Onion, Cucumber, Carrot Boiled Egg Banana

Regular Beverages Main kofta Course Veg Channa Dal Chutny French Fry Masala Rice Tomato Steamed Rice Chapati /Soup Roti Onion, Cucumber, Carrot Banana Rasam Boiled Egg

Dinner

Beverages

Tomato Soup

Fig. 158 Mess Menu - Lunch Low Fidelity Prototype

Host

The Silicon Ship

Fig. 160 Mess Menu - Dinner Low Fidelity Prototype

Fig. 161 Mess Menu - Breakfast High Fidelity Wireframe

Fig. 162 Mess Menu - Breakfast High Fidelity Prototype

Dinner

el 13

Trid

of Titans

Location

Loca

ation

Lunch

Break Fast

Host

The Silicon Ship

Snacks

Dinner

Hostel 14

Break Fast

Fig. 163 Mess Menu - Lunch High Fidelity Wireframe

Pancharatna Dal

Gongura Chutney

Location

Loca

ation

Snacks

Lunch

Dinner

Omelet

Masala Dosa Bread, Butter, Jam

Cofee

Milk

Trid

Location

Loca

Lunch

Snacks

Dinner

Chicken Dum Biriyani

French Fries

Channa Dal Chutny

Panee

Veg kofta

Lemon Rice

Roti S

Tomato Masala Rice

Dal Palak

Masala Tea Normal Tea

Sambar

Fruit Custurd Sweet Lassi Butter Milk

Fig. 165 Mess Menu - Snacks High Fidelity Wireframe

Host

The Silicon Ship

7:30pm - 10:00pm

Steamed Rice

Fig. 164 Mess Menu - Lunch High Fidelity Prototype

Hostel 14

Break Fast

Regular

Chapati / Roti

Main Course

Methi Paratha Beverages

Curd Rice

Paneer Butter Masala

of Titans

4:30pm - 6:00pm

Paneer Corn Masala

Thurai Moong Dry

el 13

Trid

Beverages

Regular

Main Course

Special

12:30pm - 01:00pm

Host

The Silicon Ship

Special

Hostel 14

Main Course

el 13 of Titans

Fig. 167 Mess Menu - Snacks High Fidelity Wireframe

Fig. 168 Mess Menu - Dinner High Fidelity Wireframe

Chapati / Roti

Onion, Cucumber, Carrot

Steamed Rice

Boiled Egg

Rasam

Banana

Tomato Soup

Fig. 169 Mess Menu - Dinner High Fidelity Wireframe

Complaint Portal Complaint

New Complaint

Complaints Up Vote

On Behalf of

Down Vote

Continue as user

Comment

View Previous Complaints Complaint Type Complaint Priority Complaint Title

Estate EMD PHO Telephone Horticulture

Date & Time

Upload Image

Location Details

Description

Fig. 170 Complaint Portal : Redefined Information Architecture

Complaint portal is a vast and complicated portal compared to the others, due to different types of complaints from various departments, issues all over the campus, raised by different users on a day to day basis. The challenge was, once a user raises a complaint, it has to reach the suitable person or authority. In the case of the Complaint Portal, three major things was to be taken care of • How a user can add a new complaint or a comment. • Looking at the type of complaint, how to direct it to the correct person/authority. • Feedback or confirmation, once the problem is registered/fixed. An affinity mapping was carried out for the complaint portal to create a transparency between the users and the authorities which also helped in the new Information Architecture. A separate card template was designed for complaints and its comments. When a user enters this portal, they view the list of complaint cards arranged. (Fig.179)

Since the complaint portal is also overlapped with the Calendar, it is very easy for the user to check all other complaints according to the dates. Templates for comments are designed to enable the users to add infinite comments, and each comment submitted in very few steps. Previously, viewing comments, adding and submitting comments were placed differently, with lengthy and tiring navigation processes. Post evaluation, recognizing these issues through affinity mapping, these three options were placed closer on the ‘Add Complaint’ screen where it is easily accessible for the user. (Fig.155 & Fig. 157) Depending on the type of complaint, the user can choose which body he/she has to send the complaint, on whose behalf. Users can also check their complaint history and also check the update of a raised complaint. In case of any comments or replies, the user is notified through the notification Panel. The Camera can be accessed while adding the complaint and multiple pictures can be uploaded according to the need.

Complaint Portal

Complaints

Low Fidelity Prototype

Add New Complaint View All Complaints My Complaint History

View

Complaints

Complaints Vent your issues here

Building Details

Complaint Type Estate

Student | IDC School of Design

EMD Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...

PHO

Fig. 173 Complaints - Complaint Type Low Fidelity Prototype

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...

Date To

20 - 03 - 2019

00 - 00 - 00

Location Location Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...

Complaint Title

Horticulture

Add Details

#@%*!

Fig. 172 Complaints - Complaint Type Low Fidelity Prototype

Supriya Dutta

Student | IDC School of Design

12/02/2019

Fig. 177 Complaint Portal - Add Comment Low Fidelity Prototype

12/02/2019

Student | IDC School of Design

Click Photo

Submit

21/03/2019

Upload Image 9

Parth Kapadia

Submit

Student | IDC School of Design

12/02/2019

Fig. 171 5 9 0 2 22 Complaint Portal - Home Low Fidelity Prototype Thuli Chishi

Continue Kiran AddasComment

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

5 2

Password

Student | IDC School of Design

Ridhima Tapia

LDAP ID

30/03/2019

Kuldeep

Student | IDC School of Design

Jonathan

Student | IDC School of Design

KiranPrasanth Rajan

Comment Title On Behalf Of

Comments Date From

Telephone

Annu Verma

Add Comment

Building Type

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...

Enlin Quental

Complaints

Fig. 174 Complaints - Rate your issue Low Fidelity Prototype

Fig. 175 Complaint Portal - Add Details Low Fidelity Prototype

Fig. 176 Complaint Portal - View Comments Low Fidelity Prototype

Complaint Portal

High Fidelity Prototype

9:41

Add Complaint

All Complaints

Enlin Quental

9:41

Add Complaint

All Complaints

My Complaints

Enlin Quental

March 30, 2018

Add Complaint

All Complaints

My Complaints

Student | IDC School of Design

My Complaints

Enlin Quental

March 30, 2018

Student | IDC School of Design

Hi InstiApp team, I like to bring something to your notice

There is one glitch...... Whenever I login through my id and then tap it on the mess menu option the app crashes but using as a guest there is no such problem. And please do consider to add dark theme option too.

2 Comments

Bhanu Priya

March 26, 2018

Student | IDC School of Design

Aditya Rana

InstiApp Admin

We apologize for the less than satisfactory experience you had. However, for a better understanding and quicker resolution please get in touch with our Customer Support team through a call given at 8880108010. We will be glad to assist you with our best. Thank you!

March 26, 2018

Horrible service, zero customer support. Amenities are broken most of the time. Have been trying to reach them for a week now. They say "we will fix it" in one day or two days but ultimately they wont. They take two months worth of rent when you join and don't keep up with their promises, forcing you to leave, and putting your deposit amount into their pockets. And the cycle continues with the next unsuspecting customer.

InstiApp Admin

Submit

April 6, 2018

InstiApp Admin

Service Provider

Bhanu Priya

March 20, 2018

March 26, 2018

Student | IDC School of Design The worst Hostel service. The billing management is so bad and there resolution team is worst. They never resolve the tickets even after calling and complaining. They keep updating some other rooms electricity bill and never resolve the issue taking the students for granted. They start imposing heavy fines when the problem is from our end. So frustrated living here. Consider this a zero rating

Student | IDC School of Design Experience difficulty in setting password for the InstiApp 1 Comments March 18, 2018

Aditya Rana

Student | IDC School of Design

March 30, 2018

Service Provider

Hey! We fixed this. Update the app and try it out!

6 Comments

Candy Mary

@InstiApp Admin Thanks a lot for considering my request and updating the app.

March 31, 2018

Service Provider

Student | IDC School of Design

Alex John

Add Comment

The worst Hostel service. The billing management is so bad and there resolution team is worst. They never resolve the tickets even after calling and complaining. They keep updating some other rooms electricity bill and never resolve the issue taking the students for granted. They start imposing heavy fines when the problem is from our end. So frustrated living here. Consider this a zero rating

InstiApp Admin

March 30, 2018

Service Provider Hey! We fixed this. Update the app and try it out!

March 26, 2018

Student | IDC School of Design

Honest review Worst hostel experience till now.. first of all it is way costlier than other PG and facilities are even less than other PG's. I have raised ticket for TV that it is not working but no response from their side. Bed was also broken but somehow they repaired. No bedsheet is given. I would suggest you can get a single room with lot more facility in other PG's instead of staying in zolo with two sharing in 7.5k. One more thing they will charge you 1000 rs for registration.

2 Comments

Esha Khanna

February 27, 2018

Student | IDC School of Design To the developers of InstiApp. There is a bug in the payment process through the app. I recently moved to double sharing from single sharing room and even though I paid the rent but the message I received from Zolo was greater.

Fig. 180 Complaints - View Comments High Fidelity Wireframe

Fig. 181 Complaints - View Comments High Fidelity Prototype

Fig. 182 Complaints - Add a Comment High Fidelity Wireframe

Fig. 183 Complaints - Add a Comment High Fidelity Prototype

Although its not a big issue but there is a mismatch in the payment I paid for rent and the one showing on the message after I paid the rent. Also please improve your customer support. I tried calling them for some 5 days staright but still no reply. 8 Comments

Maria

February 27, 2018

Student | IDC School of Design They promise to send deposit in 7 days in the app, through which all transactions are being made, however when questioned regarding the delay in payment they bring new policies out of blue air saying that it's mentioned in the website that the same will be done in 10 working days. I still haven't received my money. So nice that y'all are comfortably sitting on our money when we made other commitments expecting that y'all will keep up your words. The customer service is a total scam and a sham. 3 Comments

Fig. 178 Complaints Portal - Home High Fidelity Wireframe

Fig. 179 Complaints Portal - Home High Fidelity Prototype

List of new features added on the Complaint Portal :

9:41

Add Complaint

Complaint Type Estate Accommodation Allotment inside campus,Property registration, Property Tax etc.

Add Complaint

Submit on Behalf of EMD Electrical and Maintenance Division

• All the information regarding the user will be auto filled, this data will be taken from the respected authorities which the InstiApp has access to.

PHO Public Health Organizati you with the complaints regarding food, gym, can

Complaint Type

Password Telephone

Subject

Organization helps omplaints d, gym, canteens.

Complaint Details

Submit on Behalf of

LDAP ID

Telephone directory, Internet and server issues. and maintenance

Horticulture Gardening, Issues related to the campus premises

Subject

• Calendar is overlapped with the Complaint Portal which allows users to find complaints or comments according to the date.

Complaint Details Upload Image(s)

• Users can submit an infinite number of comments.

Upload Image(s) Location Location Details Location

Building Details

Location Details

Submit Building Details

Submit

Fig. 184 Complaints Portal - Add Details High Fidelity Wireframe

Fig. 185 Complaints Portal - Add Details High Fidelity Prototype

Fig. 186 Fig. 187 Complaints Portal - On Behalf of Complaints Portal - On Behalf of High Fidelity Wireframe High Fidelity Prototype

• Users can submit a complaint or report an issue themselves, or on behalf of another. • Users can access the camera while he/she is in the complaint portal and can take pictures. • Users can add multiple photos. (Fig.185) • Users will be notified, once the complaint or an issue raised is cleared.

Maps

The location icon is provided in many portals in the new design especially in notifications, profiles and in the card templates. If a user touches this icon, it will navigate straight to the Maps Portal and shows the detail in the map portal itself. In the high fidelity prototype the map template from mapbox is borrowed for the purpose.

Map Venue Current Location Building Details

Maps

Low Fidelity Prototype

Description Date & Time Contact Details

Map

IDC School Of Design

Date

Current Location

Time

Date

Current Location

Time

Date

Current Location

Time

Date

Current Location

Time

17 / 03 / 2019

Convocation Hall

1:00pm

17 / 03 / 2019

Convocation Hall

1:00pm

17 / 03 / 2019

Convocation Hall

1:00pm

17 / 03 / 2019

Convocation Hall

1:00pm

Email ID Phone Search Extra Links 44

Fig. 188 Maps : Redefined Information Architecture

IDC School of Design IIT B, Powai, Mumbai, Maharashtra State, India

http://www.idc.iitb.ac.in

Industrial Design Centre (IDC) at the Indian Institute of Technology (IIT Bombay) offers an excellent environment for academics, research and applications in the ďŹ eld of design. [...]

Fig. 189 Maps - Home Low Fidelity Prototype

Fig. 190 Maps - Search + Keyboard Low Fidelity Prototype

Fig. 191 Maps - Search / Add Destination Low Fidelity Prototype

Fig. 192 Maps - Search Result Low Fidelity Prototype

100

Maps

High Fidelity Prototype

9:41

Clubs

From

Departments

Hostels

Organisations

9:41

Pro

Clubs

Departments

Hostels

Organisations

9:41

Pro

Clubs

Departments

From

Use Current Location

Hostels

Organisations

Pro

Fig. 193 Fig. 194 Maps - Add / Choose Designation Maps - Add / Choose Destination High Fidelity WIreframe High Fidelity Prototype

Fig. 195 Maps - Add Details - From & To High Fidelity WIreframe

Fig. 196 Maps - Add Details - From & To High Fidelity Prototype

Fig. 197 Maps - Add Details - To & From High Fidelity WIreframe

Fig. 198 Maps - Add Details - To & From High Fidelity Prototype

101

9:41

Clubs

Departments

Hostels

Organisations

9:41

Pro

Clubs

Departments

Hostels

Organisations

9:41

Pro

Departments

Clubs

Hostels

Organisations

Pro

44 47

42 50 39

49 40

38 33

IDC School of Desig

IDC School of Design Industrial Design Center www.idciitb.com

Fig. 199 Maps - Navigation High Fidelity WIreframe

102

Fig. 200 Maps - Navigation High Fidelity Prototype

Fig. 201 Fig. 202 Maps - Type / Search Destination Maps - Type / Search Destination High Fidelity WIreframe High Fidelity Prototype

Fig. 203 Maps - Search Result High Fidelity WIreframe

Fig. 204 Maps - Search Result High Fidelity Prototype

Conclusion

The project taken up with the view of simplifying the InstiApp, proved to be a perfect redesigning task. Unorganized data and absence of prioritized segregation were the true motivators for the redesign of the app. Other discomforts with the user interface and navigation within the app also contributed to the necessity to take up this project. The existing problems within the app were addressed by introducing a new visual language, a template-based layout and a structure for ease of user navigation and content consumption. The redesigning provided the application with a proper structure to enable optimum functionality of all of its varying and multiple number of features. The major challenges in the project were Categorization- arranging the available data according to the user needs and User Navigation- to provide the user with a smooth and seamless navigating experience when using the app. Once these issues were tackled, a user could get access to whichever information they sought, and take in the needed data, with ease. This became possible by proper structuring of data achieved through an elaborate Information Architecture.

Introduction of a new interface template to display the content, gave the user a sense of familiarity to the user to locate the necessary information across the app with a uniform convention. With a new visual language in place, the user developed a sense of intuitive association of the visual elements used within the application, with the InstiApp. Thus, the application got a new Identity, a unique brand of its own. Thus, to facilitate a better user experience with InstiApp, through an attempt to bring a new personality to the application, sums up the main aspirations for this Redesigning project. As a personal insight, it proved to be a unique learning experience of its own with the knowledge of how a structure lent to a content can make the entire experience much more qualitative than before.

103

104

References InstiApp [1] https://play.google.com/store/apps/details?id=app.insti&hl=en [2] https://insti.app/feed PWA Tool [3] https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/ [4] https://github.com/pulsejet/iitb-app-angular [5] https://developers.google.com/web/progressive-web-apps/ Adobe XD [6] https://www.youtube.com/watch?v=VhYYqzX294s [7] https://www.adobe.com/in/products/xd.html?sdid=12B9F15S&mv=Search&ef_id=Cj0KCQjws5Hl BRDIARIsAOomqA0489D0HKpVdoQ9Oy-bHETknITHTr9WDGqYlFwQ-RFMOoiKrBGgufsaAqV3EALw_ wcB:G:s&s_kwcid=AL!3085!3!315272242702!b!!g!!adobe%20experience%20design%20cc Jesse James Garrett [8] http://www.jjg.net/about/ [9] Garrett, J. J. (2010). Elements of user experience, the: user-centered design for the web and beyond. Pearson Education. [10] https://medium.com/omarelgabrys-blog/ux-a-quick-glance-about-the-5-elements-of-user-experience part-2-a0da8798cd52

105

Kiran Prasanth Rajan Interaction Designer

kiranprasanthr@gmail.com

IDC School of Design Indian Institute of Technology, Bombay (2017 -2019)