Supreme Court Observer website UX design: A study in complex data structuring

The Centre for Law and Policy Research (CLPR) commissioned the UX design of the Supreme Court Observer project which aims to provide constant updates on the proceedings in the Indian Supreme Court regarding various issues of important socio-political significance.

The Centre for Law and Policy Research (CLPR) is a non-profit organization that is engaged in public policy research and litigation.


The objective was to design a website which would carry reports on each term of the Supreme Court, analysis of 30-40 important Supreme Court cases, summaries and interviews with parties/lawyers, legal analysis and practical outcomes. Our first level of consideration was the website’s primary target group, this according to CLPR, was divided into three categories : Lawyers and law students / Journalists reporting on certain Supreme Court cases / Concerned Indian citizens A large section of the audience did not belong to the law fraternity, so the USP of the website was to publish a layman’s interpretation of the intricate legal proceedings, which CLPR called ‘Plain English’ version of the cases. To us, the multiple and diverse sphere of target audience meant that we would have to come up with a site, that was open, and would have multiple entry points to reach the subject matters. In our course of designing the UX, we realised that while a section of the users would visit the site with specific queries in their mind, other groups would come searching for generic on goings in the Supreme Court of India, rather than having any targeted search. We had to keep all of our users in mind and come up with a structure that would help them all to easily navigate through the site, which meant, that we had to come up with some very strong and diverse search functionalities.

Information design

The data/information of the site was divided into two fully searchable archives:

1. Cases archived by date:
This section is capable of leading the viewers to a more detailed information of the cases)

2. A searchable database of the judges:
Along with a short introduction on the sitting and retired judges, this section provides a smart search feature for the benches these judges had formed and/or currently a part of.

Apart from these two archives, the site also contained

1. A section that deals with non-interactive statistical data regarding Supreme Court’s proceedings (this section is awaiting to be functional).

2. A blog. This houses the ‘plain English’ versions of direct reporting from the ongoing cases, proceedings of the cases, etc.

The first thought on the homepage

We decided to design the home page as a showcase. SCO essentially has got multiple layers of information and search functionalities, how about simply laying them out in the home page itself? How about keeping all of them in front of the user and give them easy choices to go for meaningful searches? This is what the Home page wireframe looked like:

The Supreme Court Observer is expected to be visited by multiple types of users with specific purposes. Some users might have specific search parameters with them, whereas some might have generic search or browsing to do. Even within specific purpose driven audience, some might search for a particular issue, case or judge, and some might want to search for a particular date and the occurrences in the Supreme Court on that particular day.

Idea behind the home page

To solve the vastly unpredictable user needs, we equipped SCO with multiple types of search functionalities starting from the landing page itself. The landing page is designed based on the card/tile type of construction.

The cards are basically glimpses of information types one is going to get inside the site. The top left card will always show the latest case that’s being covered and special design elements are attached to the cards to indicate the present status of the particular case (either ‘Decided’ or ‘Pending’).

Want to know how we can make your complex website simple & impactful?

Tools we built for a seamless user experience

There is a specialized search card called ‘Case tracker’ that gives the user freedom to search the database based on Keywords, additional search parameters are year and/or session. For the more unsure and ‘explorative browser’ kind of users, we have relevant and trending hashtags within this card.

Another distinct card functionality was a calendar search. This card is built mimicking the feel of real a calendar. Specific dates are colour coded within the calendar, which can lead to a specific hearing in that day and/or Plain English post entries that day.

Small details cause a big difference in the experience

The ‘Cases’ section in the website has got a chronological organisation of tracked cases, this can be tracked through a dropdown year dropdown and can be arranged by either latest hearing date or first filing date. Perhaps the most interesting and dynamic search functionality is used in the ‘Bench’ section within the ‘Judges’ section of the website. A Judges’ bench is formed when more than one judge comes together to deliver justice on a case. Here, to get to the detail of the judges who formed benches together, the user has to select the name of any one particular judge first from a list of names.

The smart search feature of this section immediately greys out all the other judges, with whom the first person selected never formed a bench. This way it becomes extremely easy for the user to know which names to select while searching for benches.

The smart search feature on the Judges Bench

Visual Design

The visual design of the website mostly takes queues from the functionalities involved in the classic ‘form follows function’ style. For example, the card based design is solely influenced by the ease of information scanning and categorisation. The nature of the website demanded a serious look to be put to it. The inspiration came from our multiple visits to the typical lawyer’s room at the CLPR.

They are filled with books from top to bottom, rows after rows of volumes stacked neatly year-wise. This interesting bit of visual translated into the unique old book look of the website. It helped us to implement a certain serious look that the content of the website demands. It naturally sets the expectation of a whole lot of reading material the user is about to encounter on the site. To break the monotony each card has a colourful break on the top portions of the cards/pages, where a simple yet playful tessellation of stacked books is used.

The Portal at Launch

Come over to see more exciting work. Coffee is on us.