Malpai Borderlands Group (MBG) is a non-profit organization dedicated to protecting the Malpai Borderlands region of Arizona and New Mexico. I found MBG on a website matching professionals wanting to volunteer their skills to non-profit organizations. I grew up in the Black Hills of South Dakota surrounded by picturesque landscapes of ranchland and forest, and was immediately reminded of fond memories from my childhood. I couldn't pass up the opportunity to work with an organization working to protect similar natural areas.
I completed a UX Audit for MBG’s website. I was the only UX Designer on this project and worked closely with the organization’s Executive Director and Information Specialist. I sent progress updates and incorporated feedback each week throughout the course of the project.
MBG created a website for their organization in the 1990s and have been adding information to it ever since. They wanted me to look at their website through a UX lens to see what was working and what wasn’t. They also wanted input on whether to continue using their current web hosting service, as well as learn more about web analytics and how to make use of them.
The first thing I wanted to do was get a good understanding of how the current site was laid out and make a list of all of its content. To help me visualize each page of the site and where each link went, I created a sitemap. At the same time, I kept track of the content on each page with a site inventory.
Immediately I noticed there wasn’t much contextual navigation between site pages. There were a few links to other areas of the site on the Homepage, but other than that it was scarce. The only get to most pages of the site was through the main navigation menu. Because of this, I had to go through the site numerous times to make sure I wasn’t missing any pages.
Immediately I noticed there wasn’t much contextual navigation between site pages. There were a few links to other areas of the site on the Homepage, but other than that it was scarce. The only way to get to most pages of the site was through the main navigation menu. Because of this, I had to go through the site numerous times to make sure I wasn’t missing any pages.
Immediately I noticed there wasn’t much contextual navigation between site pages. There were a few links to other areas of the site on the Homepage, but other than that it was scarce. The only get to most pages of the site was through the main navigation menu. Because of this, I had to go through the site numerous times to make sure I wasn’t missing any pages.
At this point in the project, I needed to define the main user groups coming to MBG’s website. I didn’t have access to actual users of the site to interview, but I was able to get a lot of information about who visits the site by talking with the client. Based on this, I created three personas to help me identify with the user’s motivations, goals, and frustrations. I kept them in mind and referred back to them for each activity I did moving forward.
With my new user groups in mind, I looked at MBG’s website again through their eyes. I also looked at five non-profit websites dedicated to nature and animal conservation. I came away with four main questions the site needed to answer for each group.
MBG hasabout their mission and organization history throughout much of their Homepage and About pages. While it is important and interesting, large blocks of text make it difficult to skim and easily ingest.
Most other sites I looked at have succinct, one-sentence mission statements that stand out on top of both their Homepage and About pages. In addition, they use a variety of design techniques (e.g, headings, images, icons, etc.,) to break up large amounts of text and convey important information quickly.
MBG has a lot of compelling information about what they’ve done for land conservation efforts and endangered species protection. While they do a great job of writing so users without a background in conservation can understand, again, large and nonuniform blocks of text make sifting through the site a significant time investment. Additionally, the Homepage is the only page with contextual links to other areas of the site, and areas of the site they’ve chosen to highlight feel random and incomplete.
Contextual links were prevalent throughout the other sites. I noticed a particular effort put into having a brief amount of information about each main part of the site accompanied by a link to it on the Homepage. Most sites chose to highlight the work they’ve done and their accomplishments on the Homepage. Information and links across the site were displayed uniformly and consistently.
Getting involved with an organization can differ by what is most important to each user group. Users who aren’t local would likely be most interested in making a donation, whereas users who live in the area may want to attend events or even join the organization.
MBG only has one area on their site to donate, located about halfway down the Homepage. Every other site I looked at had a designated donate button in the masthead. Users may want to learn more about the organization before deciding whether to donate. Requiring users to search for the only avenue to donation may discourage them from following through. Having a donate button at the top of each page instead encourages users to donate whenever they feel inclined to.
During this project, MBG was hosting their Annual Science Conference remotely. This is a big event, and the agenda and online access details needed to be easily found on the site. However, the entirety of the agenda and conference information was on the Homepage, taking up valuable screen space.
Other sites solved this by having an announcement displayed prominently with a link to another page for more information. This makes interested users aware of the event and allows them to learn more about it without taking up too much space on the Homepage.
Users interested in joining the organization may want to see the backgrounds of the Board of Directors and Science Advisory Panel. While MBG has pages dedicated to both groups, they consist again of large amounts of text and lists lacking visual appeal. Other sites added pictures of their members, breaking up text and making the organization feel more inviting and personal.
When MBG's Homepage is first loaded, a pop-up promoting users to sign up for their newsletter comes up. This is the only way users are able to join MBG's mailing list. If a user automatically dismisses the pop-up or decides they'd like to sign up later, they need to leave the site entirely and come back to bring up the newsletter form again.
Every other organization I looked at had newsletter sign-up forms in at least one other permanent place throughout their site. Many were found in the footer. Like the donate button in the masthead, this allows users to sign-up for an organization's mailing list from any page at any time.
The final activity I completed was a Heuristic Evaluation. With each of my three user groups in mind, I evaluated the site using Jakob Nielsen's 10 Usability Heuristics. I wanted to validate my previous findings and catch any other usability issues I missed. My final recommendations were found using the Consistency and Standards and Aesthetics and Minimalist Design heuristics.
MBG's newsletter pop-up requires users to enter their email for it to be successfully submitted. If an email is entered in the incorrect format, an error message in bright red font is displayed above the text field. The red font juxtaposed with the pop-up's background color makes it almost impossible to read.
At the top of the Homepage, MBG displays images from the Malpai Borderland Region using a rotating carousel. However, this trend isn’t continued across the other pages of the site, with each page looking slightly different than the others. Using the same visual cues, like a hero image on the top of each page, showcases the beautiful area being protected while making the site feel cohesive and uniform.
The website is filled with a lot of great information but is overall very text-heavy and difficult for the eye to move through. There is almost no white space found anywhere on the site. Similar colors used throughout make all sections of the site blend together, with nothing to visually draw the user's attention to key information.
Lastly, there is font inconsistency found throughout the site. Some fonts are larger and some are different altogether. Contextual links across the site also differ in appearance. Some links are underlined, some change color when hovered over, and some don’t show any indication of being links at all.
Below are the previous MBG page designs.
During the research phase, I compiled findings from all the activities I completed. When I was finished, I workshopped them together until I had a list of recommendations that I felt would be actionable for MBG. I broke the recommendations down into five categories: newsletter sign-up, site navigation, information about Malpai, cohesive site design, and site aesthetics.
Before starting to come up with design solutions for my recommendations, I reached out to MBG for more information about their current web hosting site. Since its inception, MBG’s website has been hosted through HotDoodle. MBG hired a designer from HotDoodle to set up the initial site, with all further changes being made by the Information Specialist. They expressed dissatisfaction with their ability to easily edit the site and receive help from HotDoddle's customer support team. I decided to recommend they switch to SquareSpace instead because of its built-in templates, 24/7 customer support, and ability to track web analytics.
I knew I wanted to use SquareSpace's built-in templates to create my final design solutions. I hoped this would make implementing the designs as easy as possible for MBG should they decide to switch web hosting sites. I also paid special attention to creating straight-forward design patterns that would be easy to implement regardless of which web hosting site MBG decided to go with.
To get my initial ideas out, I started the process by rapidly sketching.
After I had an idea of what I wanted the final design solutions to look like, I moved into SquareSpace to create them with the built-in templates. I mocked up four example MBG website pages to showcase my solutions: the Homepage, About page, Science and Nature page, and Board of Directors page. I used placeholder text to give the client an idea of the text length I was suggesting, as well as the same example image to focus attention on my proposed solutions. For the color palette, I went with a built-in palette that accentuated the example image.
On the Homepage, I focused on prioritizing MBG information and encouraging users to click on contextual links to explore the site. I also made sure users would be able to find the donate button and newsletter signup on each page of the site by putting them in the masthead and footer.
I added hero images on each page to create a cohesive site experience. On the About Malpai page, I focused on prioritizing the mission statement and breaking up large amounts of text. Users can also chose to read more detailed information about the organization. Finally, I added contextual links to the secondary navigation pages to make sure users don't miss out on any information.
I mocked up the Science and Nature page as an example of how MBG could structure information on their other three main pages. I present the list of endangered species MBG works to protect in a uniform way with links to more information found on another page. Users can read a summary of MBG's endangered species efforts at the top and navigate to the Science Advisory Board through a contextual link.
Lastly, I mocked up the Board of Directors page to include pictures of the staff. Each member gets an image and a brief description of their background and contributions.
At the end of the project, I wrote a Final Audit Report and sent it to the client. I scheduled a Zoom call with the Executive Director and Information Specialist to go through the report with them and answer any additional questions they had.
MBG was very appreciative of the work I put into the project and was receptive to my recommendations and solutions. They were not yet sure whether they would ultimately switch web hosting sites, but found my recommendations helpful and attainable for either outcome. MBG will be using my report to implement changes and improve their website in the coming months.
The Executive Director provided me with a Letter of Recommendation at the completion of the project.
“Jennifer was very professional and completed the work on time with an eye for detail. She kept good communication and worked well with our team. Jennifer also spent extra time on research comparisons that helped expand the project objective. The Malpai Borderlands Group gives her the highest recommendations and is very grateful for her contributions and recommendations. The final report that was submitted by Jennifer included an extensive review that will be used by our organization.”
- Richard Winkler, Executive Director of Malpai Borderlands Group
This was the first UX Audit project I worked on, and I was excited to expand my UX toolkit by tackling methods I hadn’t previously gotten to work through. Personas and the Heuristic Evaluation were new to me. I also became much more familiar with SquareSpace while working on my designs.
I was the sole UX Designer and worked remotely due to the Coronavirus, so the only feedback I had throughout the project was from the client. In retrospect, I would have liked to have gotten feedback from other UX Designers on the new methods I used, particularly the Heuristic Evaluation to make sure I was interpreting each usability heuristic correctly. Additionally, I would have liked to do interviews with real site users to add to the information I got from the client.
