Case Study — Eslurn.

4 min readOct 16, 2017

Eslurn is an online platform which provides previous year questions for medical graduates to prepare for their post graduate examination.

The owners of Eslurn contacted me, when they were unsatisfied with their present design and wanted me to provide a wonderful experience for their users. They wanted to make it special, but minimal.

Insights from previous version.

The previous version of eslurn provided a look which doesn’t make it special at all. It was crafted using bootstrap framework which made the website responsive to the device screens. However, As they used bootstrap, they couldn’t implement the navigation flawless in mobile view.

My area of contribution.

I was teamed up with a Graphic Designer, two Backend Developers, and a Frontend Developer. Being a Fullstack designer, i was in charge of Information Architecture, User Experience, User Interface and Interaction Design.

As the stakeholders wants a special experience for their users, i had to try everything for delivering the best experience for the users.

Ideation and Customer Insights.

I interacted with lots of Medical Graduates(our potential customers) to uncover insights and then translated concepts to features that would address the customer needs.

Oversight and Coordination.

I designed across and collaborated with our developers so that we could develop the product effectively and efficiently. My understanding with programming languages made it easier to communicate with them, and made it easier for developers to develop as we were running out of time.

Conducting Interviews with stakeholders.

Stakeholders has the best idea about the project, and i always start from them to gather information about the project.

Interviews with them are the best way to gather information. While interviewing with them, i keep a handbook to note. which would act as a checklist later on.

Establishing Key Audience.

Its vital in a project’s development to have a well defined set of audience. Identifying the right set of audience will ensure that all the design functionalities, content decisions are targeted towards the right set of audience.

In the case of eslurn, we identified the following category as key audience

Non Customer.
Low Value Customer.
High Value Customer.
Inactive Customer.
Ex-Customer.

Building personas.

Building personas would result in formulating a clearer image about the audience, which would help us to understand who they are and what they really wants.

Non customer — Medical First Year Students

who are they?

Age — 19 to 21

Gender — Male and Female.

Family — Single.

Education — Currently Studying. Sophomores.

How do they find info?

Social Networking Sites
Friend Circles
Recommendation from faculties
Emails
Search Engines
Direct Marketings

What they want? (Main Goal)

Easily Access to contents.
Relevant Contents.
Covers Topic.
Free or Cheaper Price.
Performance Evaluation.

Pain Points

Most of them might not have bank accounts.
Financial Constraints.

Motivation

Covers entire NEET syllabus.
Ability to evaluate performance.
Personalised tips to improve performance.
Ability to create exams on any topic.
Quick Revisions.
Notes for each questions

Audience Need and Solution

Which Platform does this supports?
How can learn a subject?
How to create an exam?
How can i evaluate my performance?
How do i know in which subject my performance is poor?
How can i save notes?

Creating Scenarios

Creating Scenarios are the easiest way to understand behaviours of the user. Identifying user goals and needs and then his following action step will lead us to understand how and why a user is using one product and that is the building block of the project.

Creating User Journeys and Stories.

It portrays the person’s experience during a session of using a website or an application. A user journey consists of series of action and performed to achieve a particular goal.

The image below portrays the steps a user have to carry out when he wants to create an exam or to write a pending exam.

Creating Sitemap

A sitemap describes different content pieces of site and relationship between them. its an important step of the user centered process to ensure that content is placed in those areas where the user expects to find them.

Low Fidelity Prototype

Wireframe

Once done with low fidelity prototype, i moved to the wireframing process, just before finalising the color pattern and fonts. However, for certains icons like, Facebook, i didnt had anyother option but to go with the standard blue.