Project Overview

The mission of Mesa Sister Citie is to to promote long-standing international friendships through mutual respect, understanding, and cooperation, one individual, one community at a time. This non-profit organization partners with five international cities through student exchanges, cultural events, economic cooperation, and humanitarian aid. They were in need of a new website that adequately depicted their organization and featured their activity and calendar events.

Before

After

screenshot of the old Mesa Sister Cities website with missing images.

Click image to enlarge

The site had been neglected for many years including missing images. One of the logos on the site was a logo from 2013.

Screenshot of the home page of Mesa Sister Cities with a group of Student exchange ambassadorsby a river in Caraz Peru.

Click image to enlarge

Mesa Sister Cities completed a rebrand of their logos and colors that were used throughout the site. The site uses a modern layout with a hero image and strong calls to action in the menu.

Challenges

  • Mesa Sister Cities is a small nonprofit and as a result, have a very limited budget for ongoing maintenance.
  • Like many nonprofits, Mesa Sister Cities is a volunteer-run organization with multiple contacts and stakeholders.
  • Nonprofit organizations have rotating volunteer pools and board members which means that the people in charge now, may not be in charge in the future.
  • The best practice in creating websites for nonprofits is to create a system that is easy for users with limited technology skills. Even if today’s volunteers are proficient in technology, tomorrow’s volunteers may be different.

Objectives

  • Design a customized front-end form submission page where volunteers can submit calendar events and news articles without logging in and dealing with the technical side of WordPress.
  • Create an online application for the Youth Ambassador Exchange Program.
  • Create a form that will allow the acceptance of online payments for dues and donations.

Design

Mesa Sister Cities was looking for a visually appealing design with the important functionality of a blog that shared recent news and an easy-to-update event calendar.

Click image to enlarge

Results

Click image to enlarge

The recent news section on the home page of the site.

News Section (Blog

It was important for the Mesa Sister Cities to share all of the exciting events and work that they are doing as a nonprofit. This recent news section is featured on the home page of their site. Clicking the image or the read more will take a user to the full article.


screenshot of the calendar on the home page

click the image to enlarge

Screenshot of the calendar that is featured on the site.

Calendar

The event calendar is an important part of the site and is featured on the home page. It also resides on its own page with a prominent link in the top navigation. A user can hover over an event to see the details and then click to get the full post.


Video showing how to post a calendar event and/or news article from the front end submission form.

Front End Submission Forms

One unique feature of this site is the front-end submission form. Mesa Sister Cities wanted to involve their volunteers who may not be tech-savvy. We created a form that can be accessed by a small link in the footer. This link takes them to a page where they fill out a form to add an event or a news article. The event or news article is marked as pending until a website administrator reviews the submission and approves it, then it will show on the calendar or the recent news section.


screenshot of the youth ambassador exchange program online form.

click the image to enlarge

Youth Ambassador Exchange Program online application form.

Youth Ambassador Application Form

The Youth Ambassador Exchange Program has a lengthy application form that has been moved online. Users can begin the form online and then use a “save and continue” button to work on their form. The form must be completed within 30 days of the last time they logged into work on the form. The form allows them to upload attachments as needed.

here’s what our Client Said:

Let’s talk about how we can help you.

We would love to chat with you and discuss how our team can help you achieve a high-performing website specific to your needs.

  • This field is for validation purposes and should be left unchanged.