Radhika is a New York City based product designer.
vera-thumb-1.jpg

Vera Institute of Justice

Product: Website Re-design
Role: Lead UI/UX Designer
Created at Hyperakt

2017 Webby AwardWebsites, Associations

 

The Vera Institute of Justice is a research institution that aims to reframe the U.S. justice system. Its mission centers around engaging communities by bringing attention to the injustices we face and creating solutions based on research and evidence. Our goal was to organize Vera's volumes of research and initiatives into a website that was easy to navigate and digestible for a wide audience.

After an initial period of workshops and discussions with Vera, we discovered that the biggest challenge was going to be organizing the abundance of information on the site. Our solution was a modular system for the website's content. Through an iterative process -- beginning with sitemapping, followed by wireframing, and ending with visual interface design -- I created the modular design through which I was able to confer a visual hierarchy to the website. This ensured that users were not overwhelmed by the amount of content, but rather were able to easily scan through and read material that was relevant to them. The final result is a comprehensive and engaging website that helps tell Vera's story.

Go to Website

vera-thumb.jpg
ipads-2.jpg
Modular System

Modular System

A modular system was developed to visually organize and simplify over a thousand pieces of research Vera had created. Each piece of content could be translated into different sizes, depending on its importance and location on the page. The image below conveys the anatomy each piece.

Iconography

Iconography

An icon set was designed to create a visual way-finding system for the main areas of Vera's research. These abstracted icons appear throughout the site to help viewers navigate and understand where they are at any point in their user journey.

Wireframe Process

Wireframe Process

My visual process began with wireframes that implemented the modular system. The wireframes set up the overall structure and foundation for the content. These were used to test out user journeys, and then refined based on our findings.

wireframes.jpg
skins.jpg
long-form-piece2.jpg
ipad-and-iphone.jpg