MACC

The Mid Atlantic Coastal Consortium (MACC) mobile-first website was created to serve the purpose of generating partnerships, community outreach and educational exposure.

The Mid Atlantic Coastal Consortium (MACC) mobile-first website was created to serve the purpose of generating partnerships, community outreach and educational exposure.

Project Brief

The founder of lead biologist of the Town of Hempstead (ToH) Conservation & Waterways sought out designers to create the MACC. Having an online presence helped to solidify the consortiums mission to the public and have a tangible product to generate partnerships.

Project Goal

The goal of this project was to meet the needs of the public, attract funding and research collaboration with universities and establishments.

Project Outcome

The MACC website was presented the website during at the mayor’s monthly departments meeting. The project was approved to receive grant funding to continuing the development for the MACC!

Due to budget constraints the grant was put towards renovations of the analytical laboratory. The MACC website was put on hold and integrated within the ToH department website.

Project Overview

Team

1 Project Lead

2 UX Designers

1 Graphic Designer

My Contribution

Stakeholder Interviews

Ethnographic Research

Information Architecture

UI Design

Usability Testing

Collaborated With

Stakeholders

ToH Employees

Development Team

Tools

Adobe XD

Illustrator

Adobe Sketch

Google Forms

Project Process
Project Overview

Team

1 Project Lead

2 UX Designers

1 Graphic Designer

My Contribution

Stakeholder Interviews

Ethnographic Research

Information Architecture

UI Design

Usability Testing

Collaborated With

Stakeholders

ToH Employees

Development Team

Tools

Adobe XD

Illustrator

Adobe Sketch

Google Forms

Project Process
Project Overview

Team

1 Project Lead

2 UX Designers

1 Graphic Designer

My Contribution

Stakeholder Interviews

Ethnographic Research

Information Architecture

UI Design

Usability Testing

Collaborated With

Stakeholders

ToH Employees

Development Team

Tools

Adobe XD

Illustrator

Adobe Sketch

Google Forms

Project Process

Defining the MACC

What Even Is The MACC?

The Mid Atlantic Coastal Consortium (MACC) is run by the Town of Hempstead (ToH) Conservation and Waterways. The Conservation and Waterways department is responsible for 17,000 acres of wetlands and 180 miles of coastal waterways. The department also operates four marinas.


Basically, it is a bunch of facilities to continue the research and development of sustainability and renewable energy!


But now, the lead biologist and stakeholders want to combine all the facilities as the MACC to make it easier for the public to understand what their vision is and be able to become a non-profit.

The Facilities They Would Like To Combine
Costal Science Facilites
Analytical Laboratory
Vessels and Marinas
Shellfish Hatchery
Seaweed Nursery
Greenhouse
Nature Study Center
Renewable Energy Technology
Hydrogen Generation & Fueling
Electric Vehicles & Solar Farms
Solar Thermal Energy
Wind Turbine
Net Zero Energy Home
Geothermal Energy Generation

To continue to fund the MACC we were tasked with the challenge of tying in creating expressions of interests, memberships and how research facilities could be rented out for experiments.

Research
On-Site Interviews and Documents

Our main goal during this stage was to begin to shape how the employees of the MACC would want the facilites they worked in to be represented to the public.

Since our design team is not biology experts, on-site visits allowed our design team to meet and observe the role each member of the department plays. We spent the day taking photos of Katie, who worked with shorebird conservation, and Matt, from the Shellfish Hatchery and Seaweed Nursery.
Focus Area
Empathy
The design team discussed what target users we would be designing for.
We asked ourselves the following questions:
Who will visit the site?
Why will they visit the site?
How will they interact with the site?
What will they get from the site?

These questions led us to create a partnership persona, a college-level internship persona and an elementary-aged persona attending a field trip at the facility.

Information Architecture + Site Map

Our team dived deeply for two weeks to develop the framework for how each page would relate to one and another. We started with low-fidelity site maps to organize information to a website format. It became a visual that helped in team meetings.


This was the point where we discussed with the stakeholders what kind of information was necessary for them to want to consider a member, let a research group use a facility for research or donate to the MACC.

Research

Wireframes

To prepare for the high-fidelity designs we created wireframes to present to stakeholders in a meeting. I was responsible for scaling up the wireframe designs from mobile to web.

Research

Wireframes

To prepare for the high-fidelity designs we created wireframes to present to stakeholders in a meeting. I was responsible for scaling up the wireframe designs from mobile to web.

Research

Wireframes

To prepare for the high-fidelity designs we created wireframes to present to stakeholders in a meeting. I was responsible for scaling up the wireframe designs from mobile to web.

Development

Hight Fidelity UI's

Homepage
The MACC's homepage gives an overview of what the consortium entails. We made sure to highlight the specific calls to action.
Navigation
The navigation is organized by a visual guide of each facility and what they are associated with.
Expression of Interest
Submitting an expression of interest and creating an account that both have to be approved helps the MACC keep track of their partnerships.

Development

Hight Fidelity UI's

Homepage
The MACC's homepage gives an overview of what the consortium entails. We made sure to highlight the specific calls to action.
Navigation
The navigation is organized by a visual guide of each facility and what they are associated with.
Expression of Interest
Submitting an expression of interest and creating an account that both have to be approved helps the MACC keep track of their partnerships.

Development

Hight Fidelity UI's

Homepage
The MACC's homepage gives an overview of what the consortium entails. We made sure to highlight the specific calls to action.
Navigation
The navigation is organized by a visual guide of each facility and what they are associated with.
Expression of Interest
Submitting an expression of interest and creating an account that both have to be approved helps the MACC keep track of their partnerships.

Project Reflection

Things that I learned

Presenting work to other teams should be catered to their background

The wireframe stakeholder meeting fortunately was a quick fix. It put into perspective for me that I have to consider presenting work with the same mindset as being a UX designer for users.

Being upfront about logistics and constraints

Being in a intern position did not feel like we had the say to start talking about their budget and finances for the fear of being rude! We produced a great prototype website that they could use in the future. I reflect on how extremely important it is to establish this upfront.

Project Reflection

Things that I learned

Presenting work to other teams should be catered to their background

The wireframe stakeholder meeting fortunately was a quick fix. It put into perspective for me that I have to consider presenting work with the same mindset as being a UX designer for users.

Being upfront about logistics and constraints

Being in a intern position did not feel like we had the say to start talking about their budget and finances for the fear of being rude! We produced a great prototype website that they could use in the future. I reflect on how extremely important it is to establish this upfront.

Project Reflection

Things that I learned

Presenting work to other teams should be catered to their background

The wireframe stakeholder meeting fortunately was a quick fix. It put into perspective for me that I have to consider presenting work with the same mindset as being a UX designer for users.

Being upfront about logistics and constraints

Being in a intern position did not feel like we had the say to start talking about their budget and finances for the fear of being rude! We produced a great prototype website that they could use in the future. I reflect on how extremely important it is to establish this upfront.

Additional projects for your viewing enjoyment
Additional projects for your viewing enjoyment