National Institute of Securities Markets () is an Indian public trust and an educational institute and staff college of Securities and Exchange Board of India (SEBI). NISM conducts certification examination for various Securities Market Participants and Intermediaries as mandated by SEBI. Anyone who is keen on learning about the Indian Securities Markets may also take the exam. To register for the exams, one needs to fill in the prescribed Online Registration Form available on the NISM Online Certification System.

Problem Statement

We observed that users were facing lots of problems in the existing website. The first and most important Registration part was very confusing for users. Due to its complex flow, end users found it difficult to understand. So, Users were searching on google, referring help document just to get registered.

Yes! User experience was that bad. So we decided to provide a solution where users can apply for certification without any hassle.

Our Aim Was

To Redesign the entire on-boarding experience of NISM website so users get to browse and register for NISM certifications with ease.

So We Started With Expert-Based Analysis (Heuristic Evaluation)

Let me explain a bit about Heuristic Evaluation first, Heuristics refers to experience-based techniques for problem-solving, learning, and discovery. Using this approach, we performed a Heuristic Evaluation on the website to evaluate its usability and potential pain points.

For the Heuristic evaluation of NISM On-boarding, We have applied Jakob Nielsen’s heuristics and Severity scale.

Let’s see the list of Heuristics –

1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation


  1. Low: Fixing this should be given low priority
  2. Medium: Medium usability problem but important to fix
  3. High: Major usability problem, so should be given high priority

We came up with lots of severe issues and prepared a detailed report of issues and their severity. Check out detailed Heuristic Evaluation report.

A Persona Was Developed

In simple language, the persona is a representation of a type of user. Personas answer the question, “Who are we designing for?”. It really helps us in understanding our users and empathize with them so we could design a better solution.

We started developing a character and added a backstory which resembles people (target audience) who are applying for NISM Certifications. We further added goals, needs, and frustrations like the target user to give the persona a real-life feel.

We wanted to visualize how users think and how they behave so we could get a clearer picture. So we built empathy map for better understanding about users thinking and behavioral pattern.

Defining Project Goals

We couldn’t just design it according to a user, we had to keep in mind the business needs and the constraints that were laid forward. NISM Certification is portal for getting registered for certifications. Just to make it convenient and easy for applicants, NISM started an online portal so users can apply for certifications.

We put efforts into identifying what are the core goals and pain points from both business and users perspective and listed them. It helped us to decrease the gap between business and users, so we could design a better solution that works great for both.

It’s time to define Information Architecture

Based upon the analysis of the pain points and keeping usability principles in mind, we literally deep dived to understand existing patterns for sign up screens, dashboards, and responsiveness for mobile view. It showed that people get frustrated to fill long forms where too much information is asked, they want to invest the least amount of time in the registration process. Flow below is quick, flexible and easy to understand. It gives users the freedom to proceed as per their convenience.

View Information Architecture

Starting With Ideation


It started with paper and pencil. We tried to design multiple solutions through paper sketch iterations with help of information architecture. It gave us a quick check for what is working and what is not, so we could design a better solution.

View All Wire-frame Sketches


Finally, after many iterations of paper sketches, a low fidelity wire-frame was designed using Figma to define the visual form on the screen, presentation and arrangements of all the elements.

View Desktop Wire-Frames

There was need for mobile responsive website

Today we browse websites on mobile more often than computer. As NISM’s current website was not responsive, it provides really bad viewing experience. So we decided to make responsive design so that it adapts to any screen size so it’s as easy to use on mobile as it is on desktop — no pinching or horizontal scrolling required.

View Mobile Wire-frames

Usability Testing

As process came to an end, and we were expecting that we have got the solution. So We formed Usability Testing Plan and conducted few moderated usability testing sessions with low fidelity prototype, just to determine the level of efficiency of design and usability. Even though we did the research and worked really hard to build a simple process.

And we were surprised with results!

Even though most of the things worked well, but one big issue came into the picture. Users were struggling to find a way to create a new account. As link for Register Now was not visible in first sight.

Usability Testing Result

We immediately identified the problem in usability tests and took the charge to solve it on priority. We added a button for Sign Up so users don’t struggle to sign up.

Ultimately we can not predict everything about users.

Brand Identity

Once the base wire-frames were ready for initial prototyping we started to work on visual elements of design. To resemble with NISM’s old website, we kept color scheme with shades of blue so users can relate to it. We used white color so that the content appears clean and readable to users.

Visual Design

We further polished wire-frames to create a visual design using UI kit. We kept the design minimal for the user interface to make sure we provide users flawless experience.

View Desktop UI Design

Source link


Please enter your comment!
Please enter your name here