RoundGlass Collectives are groups that focus on different aspects of wholistic wellbeing. Each Collective has content creators who are experts on the specific wellness practices. People who are interested in these topics can join the Collective to get notifications about new content, or view the Collectives as a guest. The Sustain Collective includes a number of nature photographers, documentarians, and conservationists. The mission of the Sustain Collective at RoundGlass is to spread awareness about how we as humans can have an impact on the planet. They do this by telling stories about wild species across India. I was assigned the task of redesigning their Discover page.

There are a variety of different content types in the Sustain Collective, so I was conscious of how each type is presented. Some of the components were already part of the RoundGlass Collective design system, but I also designed a few new components to present Sustain’s unique content in a more engaging way. 

Species Map

It was important for the sustain team to have a map of India showing where they encountered the species they discuss in their stories. The map that was on the original home page was difficult to navigate so I redesigned it to make exploring it more intuitive. 

The Sustain team has an illustrator on contract that created playful illustrations for a few dozen of the species they have more information about. I used these illustrations as map markers for each species because the Sustain team wanted the map to show biodiversity. Showing all of the animals when the map is zoomed out was overwhelming, so more animals appear on the map at different zoom levels.

There are so many species that it would be hard to browse the map without a sorting system. That is why I included a key that breaks the animals down into their phylum and then their order, family, or class. I used whichever sub-classification made the most sense for each group. I wanted to separate them into groups that users would understand, so I didn’t use the obscure scientific language. 

In addition to styling the map with RoundGlass brand colors, I designed icons for each of the phylum. I didn’t want to use the same illustrations being used for the map markers because the phyla cover such a broad variety of different animals, it seemed wrong to use a specific animal to represent the large groups. Instead, I created icons that are much less detailed, so they wouldn’t represent any one particular animal. I shaded them in an earthy color palette so they would fit well with the full color illustrations on the map. 

When one of the phylum sections is open, only the species in that category show on the map. If a user clicks on a sub-category, only animals in that category are shown. If a user hovers on a species name, that animal is highlighted on the map. Clicking on a species, either on the map or in the key shows more information about the animal and provides a link to learn more. 

Featured Videos

The Sustain Collective has some breathtaking video content. There is video content in most of the Collectives, but there wasn’t any special way to show featured video content on discover pages. When designing new components for RoundGlass Collective, designers have to consider whether it would work for other Collectives.

The Sustain Collective has some breathtaking video content. There is video content in most of the Collectives, but there wasn’t any special way to show featured video content on discover pages. When designing new components for RoundGlass Collective, designers have to consider whether it would work for other Collectives. I decided that with all of the video content in the service, it would be good to have a way to show video on landing pages in a more atmospheric way. I designed it to be more of a background element than a video that someone would stop and watch. Because this section would require a very specific kind of video, I also had to document very specific guidelines for the video editors. 

You can view the full pack mockup here.