A Clearer Message
Creating an elevated experience to national gun violence information and data.
WEB DESIGN
STATES UNITED TO PREVENT GUN VIOLENCE
STATES UNITED TO PREVENT GUN VIOLENCE
Role:
Freelance to SUPGV
Art Director & UX/UI Designer
Overview
States United to Prevent Gun Violence (SUPGV) is a national non-profit organization that carries its message both independently and through its 32 US State affiliates. They believe Americans have the right to be safe in their homes, schools, and communities and to live in a country free from the fear, loss, and grief caused by gun violence.
Employed in a freelance role, I was responsible for applying the best user experience to new data the client wanted to display and refreshing the brand feel and voice through a new website.
Discipline
Art Director & UX/UI Designer
User Interaction, User Experience, Information Architecture, Visual Design, Interactive Design, HTML, CSS, & JS
Background
SUPGV had changed its marketing strategy to focus more on building its web presence and with that the ability to display important data and communicate its message clearer. They also wanted to stay more present with current events by updating sections of the website frequently.
UX
Data Visualization
One of the main objectives for SUPGV is to be able to make data collected by the Centers for Disease Control and Prevention (CDC) easily accessible and digestible. This can be achieved with strategic UX and Interactive design strategies. Below shows PDF document samples of the collected data created by SUPGV for distribution to their client-base. This still required refinement as it did not translate seamlessly to a digital space with exceptional user experience.
The data points that were selected to be displayed were homicide, suicide, and all gun deaths per county per state. Currently displayed in table form these could be converted to county view maps. Taking the experience one step further would be to make the maps incorporate interactivity, an example is a roll-over attribute below.
PREVIOUS WEBSITE
Built with a free WordPress theme the old website became quickly outdated and inadequate to fulfill the client’s requirements. The client did specify that they wanted to stay with the WordPress platform as they were very familiar with the CMS layout. Therefore a full redesign and build was required.
STATE AFFILIATES
The way the affiliates to SUPGV were displayed on the old website was clunky and difficult to digest. This page not only serves as a reference point for users looking for a particular affiliate state but also to show the large support at the state level across the US. Lastly, it should also give an idea of how political disparities potentially affect support. The use of an interactive map would fulfill all three requirements without the need to scroll on both desktop and mobile and provide a much better user experience.
User Flow
The client was very keen to retain a lot of the content from the old website and use the opportunity of the redesign to implement further content that otherwise proved challenging to implement. Care was taken to make sure the content was delegated to carefully crafted categories and pages providing an efficient and intuitive user flow. Below blue elements signal new pages and content.
UI
COLORS & TYPOGRAPHY
SUPGV had a logo but no brand direction per se. For all their communications they were using red, blue, white, and black for copy text that appeared in their identity.
As part of the website redesign, the brand colors and fonts were also reviewed and how that translates into their brand voice. It was determined that the existing colors were too bold and the use of deep red could be associated with blood. To achieve their desired look and feel the color pallet needed to be softer and more thoughtful, even though the client wanted to stay with the red and blue. The red would be reserved for major callout elements and buttons within the website.
The use of typography would also play an integral part in the brand voice and this would be achieved by using a mixture of a soft, more rounded font for the body copy in Montserrat. The headers would provide more of a punch through a contemporary and edgy font that balances out the structure: Noah Black.
FURTHER WEBSITE ELEMENTS
Wireframes
Final UI Design
Interactivity
Creating a pilar of interactivity within the website was an important part of the rebuild. It is an effective way to navigate the user around a lot of page link options (as seen below with the state affiliates) and the ability to digest a substantial amount of data (state-level data). UX best practices are also implemented with an alternative navigation tool to the map.
