The Mid-Michigan based non-profit organization, MALEC (Michigan Alliance for Latino Education and Culture) has a clear objective: to help the upcoming Latino generation achieve career and academic success through educational programs and cultural events. An important part of achieving these goals is to effectively connect with both the current and younger generations. This need is what prompted the organization to ask for my services around communications and social media.
In order for the website to be successful and for it to serve us and our audience in the best way possible, we had to go over some high-level questions first.
What is the budget/timing?
This is never a 100% comfortable topic to bring up, but it's important to establish early because it determines the manner in which we approach building the site. Budget and timing go hand in hand because they allows us to have constraints needed to build a blueprint. This being said, it's also important to think about scalability since budget may change down the road.
Since the organization was waiting on its next grant, the budget was pretty small. The timing of the site launch was also accelerated since they had an important event scheduled for about 2 months out. This meant that if we wanted to promote the event on the site, we needed it completed in no more than one month.
Who uses it?
The objectives are closely related to the actions of parents, educators, and potential donors. This meant it was important for the website to be easy to use for the age group of about 30-50 years old. This demographic is important to distinguish because it drives the decisions on the UX design. More specifically, it would be important to maintain common user conventions to give this age group an experience that they are familiar with.
What are their goals?
After some brainstorming, we determined that the goal of the user would be to find information quickly and easily understand the goals of the organization. A secondary goal would be to easily contact MALEC with questions.
What is the primary function of the website?
An important goal for MALEC was to create a presence that would encourage visitors to make donations. MALEC is a non-profit, so they rely heavily on tax-deductable donations for covering operating costs. While this was important, I advised them to not make this call-to-action weight as much as the value of their programming and events. My advice to them was that if you provide value to the community, the donations won't need much of a call-to-action.
MALEC also wanted the website to be the home base of information for their organization. The primary content that was determined to be the most important for MALEC's audience was event information, social media activity, founders and Board of Directors information, and mission statement.
Overall, they wanted the website to be part of establishing credibility with the community and effectively communicating the organization's goals while enticing potential donors.
How do we measure success for the website?
The organization was preparing for a big event during the initial discussions about the website. The primary way for us to know if our efforts for the website was successful was by viewing the analytics of our "events' section. The strategy MALEC wanted to implement would funnel users to the "events" section to get information about the upcoming event. If we made it easy for them to get there, we would see relatively equal numbers of pages hits between the "home" and "events" page.
Another part of success that is an internal goal is to write content consistently. Whether it's in the form of a blog or social media posts that get pulled into the website through an API, posting relevant, valuable content regularly is part of our success criteria.
What types of things are users doing on the site?
In our discussions, we imagined what types of actions the user would be doing on the site. Reading, browsing photo galleries and using the contact form were the top three predicted user activities.
What is the user thinking when they are on your site?
Talking through what goes through the mind of a user is very important to creating a good UX (user experience).
We thought about how important it would be to show that the organization is plugged into the community through social media. Widgets that show our activity on Twitter would be a good way to communicate this in a subliminal way.
Another important piece of user behavior is mobile device browsing. The website would need to be optimized for mobile devices since mobile traffic has now officially exceeded desktop usage across the board! This exercise served as a high-level roadmap to what types of functionality the website would need and would help us in choosing a platform.
Who is keeping the site up to date?
It was important for the MALEC staff to be able to update the site at any given time. This meant that the CMS (content management system) we choose needed to be easy to use.
Which CMS to use?
When we had this conversation, it was beneficial for us to list the requirements.
- readable type
- photo galleries
- optimized for mobile devices
- payment system to accept donations
- blog functionality
- social media widgets
Off all the possible choices, we determined that Squarespace would be the most appropriate CMS to use. Not only did Squarespace fulfill all the requirements, but also has some additional perks.
- domain name management
- free customer service
- low price point
- beautiful templates that are responsive out of the box
- basic-level analytics built in
The first step was to wrangle in all the content that we needed to put on the site. It was a combination of word documents and google docs.
We were finding that the process of sending documents via email and dropbox was getting quite messy. It was time to figure out a better process of organizing this content!
Slack was an excellent solution for storing all of our files in one place and being able to communicate in real time. We could write notes about the pieces of content and share them in many different ways all without needing email! A workflow win.
Slack uses "channels" to keep conversations and files organized. We ended up using two channels, one for website specific content and the other for the planning of their upcoming event. Naturally, there was some overlap since we needed to include information on the event on the website as well. This is where the "sharing across channels" feature became very useful!
Now that we have our content, we need to decide where it goes! We discussed the hierarchy of importance when it came to the content. Which content was most important for people to see right away, which was less important.
We discussed how the names of pages should be easy for the demographic to recognize and know what they are right away. "Home", "About", "Contact" and "Events" ended up being the names of all four pages of the site. While I'm not always an advocate for using "home" in a navigation menu since logos as a convention usually link back to the home page and the extra "home is not needed, I suggested that we use "home" in the navigation menu since the audience is between the ages of 30-50 and are more accustomed to this convention.
We also decided to highlight the page "events" since we wanted to draw attention to their upcoming event. Squarespace had a functionality built-in that would allow us to make that navigation item, "featured" which ended up putting a rounded border around it. This ended up being a perfect way to bring attention to it without being too glaring.
It was important to spell out the name of the organization straight away to plant the seed early. We needed a couple of sentences that would communicate the message quickly and effectively. We had a lot more to say which warranted the "learn more" call to action button, which would lead the user to a more granular narrative about MALEC's mission.
We wanted to have a feed of news posts on the homepage, but we didn't want the entire article to be displayed to preserve screen real-estate.
After discussing what types of content we thought our audience would be the most interested in, we decided that the content of news posts would be event updates, industry-related articles written by MALEC, or press clippings.
Social Media Widget
Based on our audience, we wanted to show that we had a presence on Twitter. Again, we didn't want to take up too much screen space and overstate our social media engagements, so we opted to use Squarespace's social media widget which pulls in data from your account and displays any desired amount of tweets. We wanted to display one tweet at a time.
We knew that choosing the right imagery to convey the culture and education goals would be important. We wanted the user to glance at the imagery and text and just "get it" right away. So we choose an image from a Dia de los Muertos celebration shot by Robert Killips (one of the MALEC founders) to use for the home page masthead. We felt the word "culture" in the heading paired with the image of the performers with sugar skull makeup would convey the message immediately.
We talked about the hierarchy of importance for the about us page. We knew it would be important to go into more detail about MALEC's mission and to list the founders and board of directors. Once we places those elements on the page, we realized that we didn't need to go any further as these elements provide the most value for the user.
Squarespace has a form widget that allows you to customize your form in very useful ways. We needed a form with the usual fields (again, back to sticking with normal user conventions to keep the audience comfortable). Naming the form and adding or subtracting fields is a breeze.
When building a custom form from scratch, configuring it to send to an email address is not difficult. However the security measures and form validation are a little more tricky, especially across multiple browsers. Squarespace handles both out of the box! As an added bonus, there is an API built-in to connect to Google Docs and MailChimp!
An aspect of forms that is often overlooked is the post-submit message. By default, Squarespace populates, "Thank you." This is adequate, but we wanted something a little more customized. Again, Squarespace makes it simple to modify the message the user receives after submitting the form.
The last piece of the contact page we wanted to implement was an email list sign up. This is another case of looking back at our audience. Our age 30-50 group is very likely to still use email very heavily, which makes having an email list signup form important!
We wanted to ensure that our audience would trust us not to spam them, so we decided to be transparent about what our intentions were for collecting their information.
The goals of the events page were to describe the types of events that MALEC strives to create and eventually, once we had enough events under our belt, display an archive of past events. Since the organization was embarking on their first event, it made sense for us to display the information about the event on the events page.
Once the event was over, we created an event summary post which lived outside of the "/events" page as its own news post. We did this so that we could bring it in later as an archived item.
On the "/events" page, we wrote a summation statement about the event and created a call-to-action to forward users to the more detailed summary of the event (the news post.)
Event Summary Post
MALEC thought it would be important to thank everyone involved with putting on the event, and the community for their participation. In addition, they wanted to let people know that they planned on holding more cultural events in the future.
We added a photo gallery of the event to let users reflect on the experience.
The Squarespace platform allowed for us to get the site stood up within two weeks, which was enough time for us to craft a social media strategy, of which the website played a very important role. The website also served as a warm introduction to the Mid-Michigan Latino cultural and education communities.