UX Case Study
2020

LI Aquifer Awareness

Website Redesign for Greater Awareness for NGO, Nassau County Soil & Water Conservation District (NCSWCD)

Design Process

Research

Perform SWOT analysis of business to find where the main challenges lie. Find the target audience

Understand

Understand empathize with user needs, problems, and goals by creating personas, and empathy maps

Design

Started with site-map navigation, wireframe sketching, ui design comps

Evaluate

Perform usability testing based on wireframe sketches and also on the full ui design comps

The Project

For Part 1 of this social change project, I worked along side two UX Designers to collect research on our chosen community partner, Nassau County Soil & Water Conservation District.

Part 2 of this project, I solely redesigned the website for Nassau County Soil & Water Conservation District.

The Topic

Environmental factors was the first topic to come to mind for our group, as these issues if not taken action against will become an extremely significant problem in the future. We narrowed our topic down to drinking water, as we felt that was more important to the local communities on Long Island.

Inspiring Quote

“Although Long Island is surrounded by water, one of its most fragile resources is its drinking water supplied by an underground aquifer.” *

Choosing a Community Partner

We choose our community partner, Nassau County Soil & Water Conservation District for their simplistic dedication to protecting and preserving Long Island’s environment. On their website, we found they focused directly on methods of improving Long Island’s water quality, and preserving its only aquifer by managing storm water runoff.

The Challenge

After first meeting with the organization, we created a SWOT Analysis (strengths, weaknesses, opportunities, threats) of the organization. Using the SWOT analysis and questions during our meetings we were able to determine that the main challenge was creating more awareness for their services on Long Island.

Data Scope

68 responses

For an online survey posted a survey on social media and sent it to friends and family who live in the community.

12 interviews

With members of the community as well as employees,

4 hours

On field visits observing the community partner's location.

68 responses

Community Members Online Survey

Vectors by Vecteezy.com
72% are more likely to read something if less information is presented
Vectors by Vecteezy.com
83% use Instagram over Facebook
Vectors by Vecteezy.com
96% pay attention to documents that are visually appealing
Vectors by Vecteezy.com
89% are more likely to take action if they view inspiring photos
Survey & Interview

Valuable Data

Key Takeaways:

Mobile-First Website

Website ease of navigation is crucial for members of the community to learn about the community partner. Most members and users of the website got too frustrating trying to navigate the website and gave up.

Graphics & Photos

Our community partner didn't utilize real-life photos nor stock photos for legal reasons. Photos used by the team of the community partner give real-life insight and trust into past projects they have done.

Up-to-date Social Media

The community partner only utilized one social media platform, Facebook, which only targets an older demographic of users. To reach a younger demographic of users, the community partner needs to utilize Instagram.

User Studies

Meet Alex

Vectors by Vecteezy.com
Persona

Vectors by Vecteezy.com
Empathy Map

  

User Studies

Meet Jace

Vectors by Vecteezy.com
Persona

  

Vectors by Vecteezy.com
Empathy Map

  

User Studies

Meet Gwen

Vectors by Vecteezy.com
Persona

  

Vectors by Vecteezy.com
Empathy Map

  

The

Solution

Our solution was to create greater awareness online/presence by:

1.
High-Quality Graphics & Photos
2.
Greater Social Media Presence
3.
Mobile-First Website Redesign

My solution focused on redesigning the website to be mobile-friendly. This redesign included a complete overhaul of the site navigation and organization. Updated graphics, icons & photos were used to make every page design cohesive and modern.

Website

Site Map

Mobile-first

Low-Fidelity Wireframes

To gain perspective on the hierarchy and layout

Mobile-first

High-Fidelity Wireframes

Worked off of the placement and visual hierarchy of low-fidelity sketches but added more detail to each screen and represented what content would be in the placeholders

User Interface

Style Guide

Mobile-First

Website Redesign UI Comps

before vs after
*"Murray: State Takes Steps to Address 1, 4-Dioxane Pollution." Long Island Business News, 2019.