India Biodiversity Portal

Redesigning the 40,000 members run India Biodiversity Portal to enable easy navigation, intuitive interactions and a crisp structure for the loads of information that the portal possesses.

India Biodiversity Portal

Redesigning the 40,000 members run India Biodiversity Portal to enable easy navigation, intuitive interactions and a crisp structure for the loads of information that the portal possesses.

IA to UI

India Biodiversity Portal is a repository of images, observations and species to harness and spread the collective knowledge of experts and enthusiasts studying the plethora of flora and fauna of India. 

Brief: Our task was improving existing features sets and interactions on the India Biodiversity Portal to enhance the overall user experience.

Role: My role required me to redefine the scope, rework the information architecture, UX, Ixd and UI of the portal. 

Client: Strand Life Sciences

Duration: 2 months

Team: Simran Singh, Nupur Patny


Goal Icon

Inspecting
the Portal

IBP is a social platform for thousands of voluntary members. Considering that the portal’s primary members are experts, the information it holds is intensively expert oriented. The platform hence struggles to expand its audience to non-experts and enthusiasts. 

This could largely be traced to the lack of flexibility and efficiency of use of the platform between novice and expert users.  Also, the major activity areas of the page are hidden due to the information structure. 

Finally, user control and freedom gets hampered with pages branching out within pages, elevating the difficulty in tracing back breadcrumbs or to even identify which part of the platform is the user currently landing in.

Inspecting
the Portal

IBP is a social platform for thousands of voluntary members. Considering that the portal’s primary members are experts, the information it holds is intensively expert oriented. The platform hence struggles to expand its audience to non-experts and enthusiasts. 

This could largely be traced to the lack of flexibility and efficiency of use of the platform between novice and expert users.  Also, the major activity areas of the page are hidden due to the information structure. 

Finally, user control and freedom gets hampered with pages branching out within pages, elevating the difficulty in tracing back breadcrumbs or to even identify which part of the platform is the user currently landing in.

Information Architecture Site Wide

Information Architecture

After studying the website, its visions and target audience, it was important to work out an information structure that is intuitive and tailor made according to the usage patterns of the experts. 

The website built over years, had duplicated content at several pages. The navigations showed no proper breadcrumbs but rather was a web with most pages linking to most others. 

The features added over the years were integrated as pages of their own rather than a tool for the already built content. This overcrowded the navigation bar.

Finally, the revised architecture, very efficiently integrated the content and tools, reconstructed the navigation bar to have 3 major tabs and rest of the website information moved to the footer.

Ideation and UI System

The ideation for this project was done feature wise or block wise. This was because it was important to figure the exact use case of each feature of the portal to further make decisions about how it will be interacted with. Along side the design language was created. 

 

Finally, various blocks were created and the pages were formed as a different combinations of these blocks.

Wireframes

The UI

The landing page is the summary of the various major sections of the portal. Their structure on the landing page is a replication of their respective page interface to build consistency and recognition. The multiple layers of web pages are flattened out buy reusing the elements of the pages to context. Unnecessary visual elements are omitted to produce a clean and aesthetic interface. Statergised placement and information architecture is used for intuitive navigation and to target the elements and features of the platform. Interactions are planned to conserve space and bring out the content in an efficient manner.