Prototype Overview

 

 

The new site is designed to be more user-friendly and inviting to the user.  Often times the weight of the topic of pollution can be overwhelming, so we designed the homepage to have a fun and inviting feel to it, centered around the ocean wavemakers, that make-up the COA community.  By highlighting the community, and the fun they have together, we hope that it will lead to visitors feeling more comfortable in becoming a member themselves. Our main goal throughout the website is to entice visitors to signup and become active ocean wavemaker. 

 

Engagement through the Customer Journey

 

 

Prototype Video

 

Invision Prototype: Mobile

 

 

Invision Prototype: Desktop

Wireframes

 

 

 

Homepage Mobile

Activism – Become a Member Page – Mobile

 

Explore Page 1 – Mobile

Explore Page 2 – Mobile

User profile Page 1 – Mobile

User Profile Page 2 – Mobile

Homepage 1

When a user enters the new site, they will see a rotating sliding hero banner.  The banner contains links to different parts of the site. The first banner is an invitation to learn more about the deep history of the organization that has been operating for 35 years.  The second banner is an invitation to sign up to become an ocean wavemaker. The third banner highlights the Wavemaker of the Month, as the site is designed to highlight the wavemaker community, their activism, and the impact they are making on the local communities and waterways.  The fourth banner tells the user that the new site is mobile-friendly and where they can find COA on social media, as the old website was not mobile-friendly.

As the user scrolls past the sliding banner, the first section they will come across is “COA in Action”.  In this section, the visitor will be able to click on the header, to learn more about the vaunted history of COA, and their many accomplishments over the past 35 years.  This is should help the visitor in the “Think” stage of their user journey to validate why they should choose COA as their ocean advocacy group, and hopefully nudge them to the do stage.

Homepage 2

Homepage 3

The next section is the explore section.  In this section, visitors in the “think” stage of their customer journey will be able to read content that is created through COAs research and discover past articles.  COA has been featured in magazines such as National Geographic. We are also incentivizing users to submit articles about the local New York Bite waterways as well. A visitor in this section will hopefully feel more comfortable joining COA as a community member, as it not only features reputable publications but also researched articles from other Wavemakers as well.

Homepage 4

The next to last section will highlight the wavemaker activity.  Included in this section is a Wavemaker leaderboard, where Wavemakers can see where they rank against their other peers in their volunteer activity.  This is done to incentivize and make activism among members more of a competition and give them a reason to keep coming back to the site to check their rankings.  There are four tiers to the leaderboard.  The lowest level rank is starfish, followed by Sea Turtle Level, then Sea Lion Level, and the highest level is Whale level. Wavemakers have the opportunity to move to new levels, by accumulating points through signing up for different types of community activism and rally events.

The other part of the Wavemaker Activity section is the Wavemaker of the Month section, where a Wavemaker from the community is selected each month as a highlighted member of the community.   This section serves two purposes, it gives current members a reason to come back to the site, and increase their points, and their standings amongst the Wavemakers, and to really focus on the people in the community of COA.  To a visitor, this should further validate why they are on the site and make them feel more comfortable with becoming a member of the community.

The last section on the homepage is the “Events” section.  This section will highlight upcoming events that COA will be holding.  Included in this section will be a clickable calendar, that will take the user to a Calender where they can see the upcoming month of events, and click to sign up for any events that they are interested in attending.  By the time the visitor makes it to this part of the page, we are looking to move them from the “Think” stage to the “Do” stage by signing up to become a wavemaker and attending an event.

The header menu is laid out with “Events” first, as that is what we want the user to do, is sign-up for an event.  The next sections of the header are there to further validate, why becoming a Wavemaker at COA is the right decision, and why it’s a good idea to join their community.  The last menu item on the left-hand side is the donation section. Ultimately, we are looking for the visitor to work their way from SEE, THINK, DO to eventually the CARE stage, where the now Wavemaker will share COA content, create User Generated Content (UGC), and/or donate money to the organization. On the right-hand side, the visitor will see COA’s social icons for connecting with COAs related pages, profile icon, the log-in button, and the become a member button.  The become a member button will follow the visitor around, constantly reminding them that we want any visitor to eventually become a member.

The secondary header menu contains two parts, the search bar, and the dark yellow donation button.  The donation button is yellow, so it sticks out on every page that you view, telling the user that we want you to eventually donate.  Having it follow them around will make it easy for the user to quickly find the donation page whenever they move from the “Do” stage to the “Care” stage.

 

Activism – Become a Member page

The become a member page is pretty straight forward.  When a user clicks on it, they are asked to input some quick easy information to create a free user profile.

Activism – Login

 

Donation Progress Page

When the donation button or menu section is selected, the user will be taken to the donation page.  On the left-hand side, results from the last donation campaign will be displayed, so that the user can see where previous donations have been used, and what they helped accomplish.  The right-hand side will show the current campaigns that funds are being raised for, and the percentage of money towards the goal that has been collected, showing the user which campaigns need the most help and which ones could be completed with their donation.  This way the user knows what their donations will be going towards.

Donation Page

When a user enters a donation to make a donation, they will have the option to use their own credit card, make a payment via PayPal, or utilize an Amazon account to make a donation.  The left-hand side displays donation options, including the option to enter their own personalized account. Once the donation has been submitted, the “Donation Success” window will be displayed.  The user will then have the option to do more in the “Care” part of the customer journey, by sharing the donation they just made on social media.

Donation Success Page

Education – Explore Page

Profile Page

On the user profile page, you will find a couple of different sections.  The first is their “Wavemaker Level” section, which displays their current standing and their point accumulation.  The “Next Reward” Section (Right below their current level), displays the next reward that the user can earn by earning more points, and on the right-hand side, it shows the user how they can earn more points to obtain that reward.  The ‘Events Attended” section is a working resume for the user, that displays the events that they have previously attended. There are social share buttons here, so that they share this section proudly on social media, or even import it for an actual resume.  Right below it is the “Badges” section that displays badges that are acquired through event attendance and other activism. The left-hand section allows the user to update their account and password, view their site activity, receive/read notifications, and connect their social media profiles to the site.  This will help COA collect more data on their target demographic and eventually help them to better tailor and personalize the site for that target demographic.