DURATION
12 weeks, August – October 2019
MY ROLE
UI/UX Designer
Sea Turtle Conservancy
How might we create a better user journey for non-profit websites?
For ARTD 451: Graphic Design Inquiry, we were challenged to redesign the desktop and mobile interface of a non-profit of our choice. I chose the Sea Turtle Conservancy (STC) because I had a personal interest in what efforts were being taken to protect the sea turtle population. STC is dedicated to the research and protection of sea turtles in the South Americas. Their work includes research, projects, and volunteer opportunities in an effort to protect the sea turtle population.
For this project, I wanted to redesign the visual aesthetics of the website as the current one is cluttered and overwhelmed with information. The navigation bar was a design element that I wanted to redesign as well so that users are able to find the information they need in a shorter period of time
Initial Research
To begin the project, I researched online about different non-profit organizations that focused on environmental causes, specifically endangered species. Within those non-profits, I focused on ones that were reputable through Charity Navigator and whose funds were being used to either further research or provide educational resources for the general public.
Concept Mapping
Once I found 3 organizations that I was interested in learning more about, I created concept maps for them to understand what their vision and mission focus was. By doing so, I was able to narrow down to the one non-profit that I wanted to redesign for, and that ended up being STC.
Benchmark analysis
I chose STC because upon viewing their website, I noticed there were areas of opportunities for redesigning the website. I created a benchmark analysis to highlight some of these areas.
The main issues I found while walking through the website were that while the org provides lots of useful information on sea turtles and what kinds of threats they were facing, this was difficult to find upon first viewing. The navigation bar featured tons of links nested within one another, and some links were even repeated.
The layout of the information itself was also an issue because of the large amounts of text and placement of images. It lacked hierarchy and distinction, and the long body paragraphs can lose the user's attention almost immediately.
Summary: The main issues I found within the STC website were the lack of hierarchy and clear mission statement, the repetitiveness of links, and formatting issues that could easily lose information and the user's attention.
Competitive Analysis
After analyzing the STC website, I researched other sea turtle non-profits through a competitive analysis. I viewed numerous websites before ultimately choosing the ones that felt visually appealing to me, along with how they structured their website in terms of the navigation bar links and donation buttons.
Summary: All the websites that I researched stated their mission focus on the homepage, along with a hero image that draws the user's attention at first glance. They were clear about what the purpose of their website was, and clearly informed visitors about the efforts they were taking in sea turtle preservation.
Heuristics Analysis
In order to get a sense of what types of problems visitors to the website might run into, I conducted a heuristics analysis by developing tasks in-class user testing. I asked 3 of my classmates to do the following:
Summary: I found that the amount of information presented on each page is overwhelming and drowns out the intended message. In addition, the number of links gave the website a cluttered impression and made it difficult to know where to begin finding more information on subjects such as research opportunities or the organization's mission statement.
Heuristics Analysis example 1
Heuristics Analysis example 2
Heuristics Analysis example 3
Card Sorting
Since one of the main issues with the current website was the navigation and links, I did a closed card sorting amongst 3 of my classmates to see how they chose to sort the information given the cards I provided them.
I chose About, Programs, Get Involved, and Sea Turtles to be the main links for the navigation bar based on how the organizations I researched for in the competitive analysis sorted them. My goal was to simplify the website as much as possible, and I didn't want more than 5 main links for the navigation.
Summary: Most of the participants agreed to have the tabs relating to sea turtles under the "Sea Turtle" tab, along with general information and history being sorted under the "About" tab. However, they found that "Support" and "Get Involved" were too similar and that some of the links sounded too vague to be sorted under a specific category.
Low-fidelity Wireframes
After card sorting, I moved on to develop low-fidelity wireframes for both the desktop and mobile interfaces.
One of the main issues I realized, specifically for mobile, was to be mindful of the screen size. I learned that it was also important to consider gridlines when designing for both website and mobile interfaces so that the elements are evenly spaced and lined up with each other.
Mobile low-fidelity wireframes
Mobile low-fidelity wireframes
Desktop low-fidelity wireframes
Desktop low-fidelity wireframes
Paper Prototype
From there, I fleshed them out into paper prototypes that I conducted informal user testing on.
User Testing
Following the paper prototype, I went on to design hi-fi wireframes to user-test amongst my classmates. The feedback I received was that the site was visually pleasing, but tweaks could be made regarding where the links lead to along with developing a specific user journey rather than focusing on developing an assortment of pages.
Desktop user-test walkthrough video
Mobile user-test walkthrough video
Final Design
Simplified navigation and easier method of finding information.
Static Menu
For desktop, the navigation bar is stagnant on the right and users can easily click the main link for the nested links to slide underneath. This takes away from having multiple tabs slide open.
On mobile, this feature is present as well when the menu icon is clicked on the top right.
High-Fidelity Desktop Wireframes
High-Fidelity Mobile Wireframes
Mood Board
Next Steps
Since the Sea Turtle Conservancy is a non-profit, there are certain limitations on what they can change. However, I definitely would like to connect with them to learn more about how they created their website and what decisions went into that process, and what steps could possibly be taken to further enhance it.
