IMS - Edutech

IMS is an Edutech space where students can enrol for CAT and the like. They can learn through online classes, master classes and also take special classes to solve their doubts and weak areas.

Industry: Edutech

Role: User Experience Designer

Duration: 3 months

Tools: Sketch, Zepplin

The Brief

Website

The Channels section on the website was where all the live classes, past and upcoming classes, recorded classes etc were accessed. That section had to be integrated with the homepage.

Additionally, the notifications, new blogs, and calendar feature also needed prominence.

App

The various tabs of the website needed to be integrated into the student-facing app.

Along with the same integration of the channels section on the homepage.

Research

To gain insight into users' challenges while navigating the website, a set of interviews were conducted. A diverse group of students with varying levels of technical proficiency participated in these interviews. Furthermore, usability tests were conducted to evaluate the users' ability to complete tasks and achieve goals on the website.

User’s pain points:

Couldn’t easily access videos of classes
Notifications often got missed and thus important dates were missed out.
Finding a live class was cumbersome.
Recent and upcoming classes were all over the place making discoverability poor.
There was no “one” place to access all the multiple classes they wanted to attend or review.
It was difficult to record or save an already-attended class for future reference.
The various subjects weren’t compartmentalised thus, the experience of finding a particular class of a subject wasn’t smooth.
They had to manually keep track of upcoming classes since there was no calendar feature.

Several Ideas were sketched out

All the below concept designs were in the interim wireframe stage. Some were discussed further and some were discarded.

The idea here was to dissect the homepage into 2 parts; Discover and Channels.
The Discover tab would have notifications, a shoutbox and a corner dedicated to live classes. It would also have a section to add/ save/bookmark videos and the calendar feature beside it.
The channels tab would cover the other classes and videos of all subjects.

Concept 1

Concept 2

This concept is focused on layout and hierarchy.
The brand carousel was mandatory. The live card on the right can create traction and instant access. The section below it with blogs, calendars and notifications increases the visibility of content and controls. The shoutbox floating icon can be accessed from anywhere on the homepage. The content library below is where all videos, classes and relevant study material is available.

Concept 3

In this one, the notifications, calendar and shoutbox were placed together in a shared space. “New blog or blog of the week” would be highlighted in the first fold itself, as these blogs would have vital information regarding exam preps. The channel content would be displayed just below with trending tags that would also be SEO effective and aid students too.

The Final Design

The Mobile App

Navigation

The app needed to include the various verticals available on the website, so that students could conveniently join classes and review recorded sessions on their phones while on the move. Furthermore, having the schedule easily accessible on the app would aid in better planning. A comprehensive approach was taken towards navigation, with various designs and iterations being implemented to explore different ideas.

3 Concepts were presented.