STUDENT PROJECT
Rowena Wildlife Clinic
Website redesign for a local non-profit
YEAR
2022
ROLE
End-to-end UX/UI designer
DURATION
82 hours
TOOLS
Figma, Miro, Otter.ai, Adobe Express
Introduction
Rowena Wildlife Clinic (RWC) provides free veterinary and rehabilitative care to injured, sick, and orphaned native wildlife in the Columbia River Gorge. As a small non-profit organization, it relies mainly on donations and grants, and in recent years its website has not been prioritized in terms of funding or effort.
Due to this, the current website is difficult to navigate and visually outdated. This can lead to user frustration and the inability of users to find the information they need in order to help injured wildlife or to make a donation. A more effective and efficient website would lead the clinic to have a higher impact in their mission to help wildlife in need.
My initial discussion with the client pinpointed their needs and priorities, and regular check-ins ensured that the project stayed on track. This redesign will eventually be presented to the board of directors in order to gain approval for implementation.
Client constraints:
The logo could be updated, but the icon needed to remain similar to the original version.
The client had a firm idea of how content could be updated and reorganized, but had very little time to work on writing new copy, and asked that placeholder text be used for the time being.
The client has an established account with Give Lively, a donation platform, which they prefer to continue using.
There was a lack of professional photography of the clinic and employees.
Process Overview
RESEARCH
Research plan
Secondary research
Competitive analysis
Interview guide
User interviews
Affinity map
Research findings report
DEFINE
Task prioritization graph
Product road map
User personas
Site map
Task flows
DESIGN
Low- to mid-fi wireframes
Branding
Hi-fi wireframes
Interactive prototype
ITERATE
Usability testing
Test data analysis
Iteration on hi-fi wireframes and prototype
UI kit
STEP 1: RESEARCH
Discovered best practices for non-profit websites, and pinpointed issues that real-world users have with the current RWC website.
DELIVERABLES
Research plan
Secondary research
Competitive analysis
Interview guide
User interviews
Affinity map
Secondary Research
During secondary research, I found that there are established, research-based best practices when it comes to designing a nonprofit website, which proved to be helpful during the design and testing processes. A few of these simple guidelines were:
Create an easy-to-find donation button.
Use a sticky navigation bar and limit links to 2-3 words.
Brand the donation page.
Conduct a “5-second test” on users, to determine if they know how the nonprofit impacts the world and how the user can take action within five seconds of viewing the home page.
Although time constraints didn’t allow for all of the suggestions to be worked into the design at this point, several of these key nonprofit website strategies could be put into place in the future. For instance:
Highlight impact statements describing how the nonprofit has fulfilled its mission.
Include the nonprofit’s story, using “you” language.
Reinforce trustworthiness with social proof.
Competitive Analysis
Competitive analysis of other wildlife-related organizations revealed that common color palettes feature blues and greens, while imagery is often striking photos of animals. As for features, other similar organizations have some income-generating capabilities that are not realistic for RWC, such as paid in-person site visits or tours. However, in the future, the following could be implemented via the website in order to gain more resources:
Memberships (monthly donations which provide members with special perks)
Donations via sponsorship of a specific animal
Wishlists of specific clinic supplies that people can donate
Virtual tours or presentations with wildlife
Online shop for branded merchandise
Volunteer program
User Interviews
Process
I recruited participants via social and professional networking, as well as via the client.
The group included 3 community members who have used the RWC website and/or clinic previously, and 1 professional who was unfamiliar with RWC but has conducted his own research on nonprofit website design.
Despite having a small group due to time constraints, patterns emerged and many initial assumptions were validated.
Interviews were conducted via phone and in person and were recorded/transcribed using otter.ai.
Key Questions
I developed a user interview guide that focused on learning how people in the community are using the website, what their main goals are in doing so, and what their pain points and delights are in regards to the current website. This information would help me determine what aspects of the site needed to change and how, as well as how to prioritize those changes. A few of the overarching questions were:
What was your main goal in accessing the RWC [or similar] website?
Were you able to accomplish your goal? Was there anything that made it difficult to do so? Anything that helped you accomplish your task?
Have you ever donated to a nonprofit? What motivated you to donate?
Can you think of any ways the RWC website could be improved in a visual sense? Anything that is currently working well?
Insights
Using an affinity map to group individual data points gathered, I pinpointed various insights based on patterns in the data. I then gathered these insights, along with suggestions on how to address them during the design process, into a research findings report.
GENERAL INSIGHTS
Users want the donation page to be minimal and to clearly present the recommended donation method, so that they don't have to make more choices or think too much about the process. Users have already decided to donate when they visit the donation page, so they don't need a lot of extraneous persuasive text.
Users are motivated to donate when they feel a personal connection to the organization. Newsletters are an effective way of creating this type of connection. Additionally, understanding what an organization does makes users feel more grounded in their decision to donate.
Providing large images front and center on the homepage causes users to feel more engaged and more likely to explore the rest of the site.
The main reason users access the RWC site is to get information about how to help injured animals, either on their own or by calling the clinic and then taking the animal to the clinic when needed.
INSIGHTS SPECIFIC TO THE RWC SITE
There is too much text overall; users don't read it all, especially large paragraphs. Much of the text on the site is too small for users to read comfortably.
Users have difficulty navigating the site because their current location is not always clear, and the nav bar text is difficult to read and difficult to click on for mobile.
STEP 2: DEFINE
Developed an understanding of the users and their current experience, in order to pinpoint and create the structure for a specific aspect of the issue to solve.
DELIVERABLES
Task prioritization graph
Product road map
User personas
Site map
Task flows
Using the ideas generated in the research findings document, I prioritized specific tasks related to the redesign of the website using an impact vs. effort graph. This led to a product roadmap, which helped ensure that I would address the most important issues first. (This was especially important due to the time constraints for this project.)
Additionally, I developed user personas based on the research findings, acting as a tangible reminder that the redesigned website needed to address the real goals and pain points of real people.
Moving on, I focused on information architecture. As the existing RWC website is fairly minimal in this regard, featuring 10 pages with just one level of navigation, this step of the design process was straightforward. The client requested that several of the existing pages be removed (as they’re no longer being used, or contain information that’s no longer relevant), which further simplified the site structure.
At this point, I proposed a new page with 3 subpages to the client. These new pages would house features not currently on the website, namely a page dedicated to information about and an application for becoming a volunteer, as well as a page where users could arrange to financially sponsor a specific animal. I believed this could be a way to implement a couple of the financially-rewarding strategies that other similar organizations use. However, the client didn’t feel that the clinic had the bandwidth for these two new features, so the final site map simply has six of the existing pages on a single level.
I created task flows for the two most important tasks (according to the client and user research): making a donation and accessing information about how to help injured wildlife. To be frank, this step was not necessary, since the site is so simple and the donation process is handled by a widget.
STEP 3: DESIGN
Explored wireframe layouts and updated branding to create a minimal, modern design.
Low- to Mid-Fidelity Wireframes
DELIVERABLES
Low-fidelity desktop wireframe sketches
Mid-fidelity desktop & mobile wireframes
I explored various desktop layouts by sketching low-fidelity wireframes. The versions I deemed to be most promising were then converted into mid-fidelity wireframes using Figma. After gaining mentor feedback, I iterated upon these, and then added mid-fidelity mobile wireframes using layouts consistent with the desktop versions. As I knew it would be difficult to complete the entire website during the project’s allotted time frame, I chose to design only 5 of the 6 pages. (This ended up being a wise choice, as in the end, I did go over the 80-hour recommendation by 2 hours.)
Brand Development
DELIVERABLES
Brand logo
Color palette
Typeface selection
RWC doesn’t currently have strong branding. Their logo is a photo of a wooden sign that hangs outside of the clinic, and although their site has some consistency in regards to color and typography, the choices don’t feel purposeful or contemporary. The client requested that the logo icon remain a flower, so I explored numerous vectorized options that were more clean and modern. I also chose to place the name of the clinic horizontally, rather than in a circle around the icon as it is currently placed, because this option is more legible when viewed on a computer or mobile phone.
Once a year, the clinic sends out a newsletter; this newsletter has used the same colors and fonts for the past two years. Because it’s more recent than their current website design, I decided to pull inspiration from the newsletter, in hopes that the website redesign would then be somewhat recognizable to users who receive the newsletter.
For the logo, I used the same font (Raleway) as is used for the headers and some paragraphs in the newsletter. I would have liked to use it on the website as well, but the numerals are in “text figure” style, and I projected that they wouldn’t work well in terms of UI. Instead, for the site headers I found a clean sans serif that was similar to Raleway, and paired it with a slab serif for paragraphs.
I based the initial color palette on the two colors used in the newsletter, as I felt they were earthy and appropriate for the subject matter. I used the same clay hue as the newsletter, but paired it with deep teal in order to gain some contrast.
The development of the branding and high-fidelity wireframes was very circular. I find it most effective to try a variety of fonts in the actual wireframes, to figure out what works best with the layout before settling on a final choice. The same is true for the color palette. I struggled for quite a while to implement the color palette I had developed, but finally realized that the clay hue simply didn’t work in terms of accessibility. It was a mid tone that aesthetically looked best with white text, but that combination didn’t pass contrast tests. It was also too light to use as text, even on a white background. I decided to shift gears and completely change the color palette, using soft blues and tans, with a brighter green for the action color. Blue is often used in the medical and health field, while greens and browns convey a sense of growth and nature.
High-Fidelity Wireframes
DELIVERABLES
High-fidelity desktop and mobile wireframes
Interactive desktop and mobile prototypes
Once I had finalized the typeface and color selections, I finished implementing the branding to create high-fidelity wireframes. With guidance from my mentor, I iterated on the wireframes and then linked the pages together to create a clickable prototype.
STEP 4: ITERATE
Improved visibility of donation CTA and methods; refined UI kit for handoff to client.
DELIVERABLES
Usability testing
Feedback grid
Test results analysis report
Iteration on high-fidelity wireframes
Final interactive prototype
UI kit
In order to gauge how well my redesign actually worked, I conducted a usability test. I wanted to determine if a new user would be able to navigate the website with ease, to pinpoint anything UX or UI related that might block or confuse the user, and to find out if my design passed the nonprofit website “5 second test.”
I would consider it to be successful if:
The users could successfully navigate to both the donation and wildlife emergency tips pages.
The users made 2 or fewer errors during this navigation.
Within 5 seconds of viewing the home page, the users understood what impact the nonprofit has and how they could contribute to the clinic’s mission. (Either by making a donation, or by helping a wild animal in need.)
After recruiting four participants via my social and professional circle, I conducted moderated tests, either in person or via video call. I realized it would save time to opt for an unmoderated test, but I felt it was important to speak to users in person—to be able to ask spontaneous questions or clarify their actions.
Once I had conducted the tests, I organized the data using a feedback grid. This helped to determine what was working vs what needed to change, as well as serving as documentation for any questions or ideas the participants had. Although my design did prove to be successful based on the above metrics, I discovered several other issues that needed to be addressed.
For instance, although I had used a design pattern commonly used by nonprofits—a banner above the main nav bar, featuring a donate button—users were not immediately noticing the donate button. Two of the four participants mentioned that they would expect to see it in the nav bar, so I decided to move it there. Another important issue was that users didn’t realize they could scroll past the main donation widget form to view alternate donation methods. Although the client wants to encourage people to donate via the widget (as it requires the least amount of work for them out of all the donation methods), it’s important that users know there are other options. I decided to add a prominent message and anchor at the top, so that users can easily scroll down to view the alternate methods.
Using my updated wireframes, I created a second version of the interactive prototype, which could be used for future testing.
Finally, I refined the component library I had been adding to throughout the design process, creating a polished UI kit that I could hand off to the client or developers.
Next Steps
Design wireframes for the last page of the website (wildlife rehabilitation).
Perform another round of usability testing, to ensure that the last round of iterations successfully addressed user pain points and to gain feedback needed for iterations on the new page.
Hand off the wireframes, prototypes, and UI kit to the client, to be presented to the board of directors.
Conclusion
As my second project for Designlab’s UX Academy, I felt happy with my progress, especially with time management. I found it easier than before to move forward with the project rather than getting caught in the details. Given more time, I would make revisions to several of my deliverables, as my mentor had feedback that I wasn’t able to incorporate during the project’s timeframe.
Overall, this was an enjoyable project that taught me a lot about working with a real-world client. At times, I felt disappointed by the client-imposed constraints. I wished I could include new features, reimagine the logo, and redesign the donation form rather than using a widget. However, it taught me how to create the best design I could despite limiting factors. Additionally, it was so fulfilling to work on something that I knew might actually make it out into the world someday, rather than a hypothetical project—especially because it was for a local nonprofit whose cause I feel strongly about.