Non-profit organization Lonely Whale strategically influences conversations about marine plastic pollution to bring awareness and inspire change.
A web design solution to help drive more conversations about marine plastic pollution among Lonely Whale's target audience.
Before speaking with the client, I conducted a website audit to examine the possible user flows.
1. Only ways to interact are to donate or subscribe
2. No call to action or sense of urgency
3. Information is a summary of their work with few updates
By contrast, Lonely Whale’s social media accounts showed high engagement suggesting that Lonely Whale has a strong brand identity and digital presence that was somehow missing from their website.
I conducted an in-person interview with the Director of Digital Strategy at Lonely Whale to understand:
• Who is the target user?
• What are the goals of the website?
• What challenges has the organization experienced?
• The target user is a digital savvy modern millennial woman who leads with her values.
• The goal is to lead like a brand and influence the conversation around marine plastic pollution.
• The challenge is getting that target user to join the conversation.
I conducted in-person interviews with 5 digital savvy modern millennials to understand:
1. What is their relationship to non-profits?
2. How do they decide which non-profits to support?
3. What type of brands do they follow on social media?
• Users learn about non-profits on social media and through word-of-mouth.
• Users support non-profits that they trust. Trust is built through transparency of information.
• Users follow lifestyle brands that promote happiness & positivity.
In order for Lonely Whale to spark new conversations, the organization first needs to show millennial women that the organization is worth recommending.
Kelsey is unlikely to trust Lonely Whale based on its current website because the user needs more information to determine if the organization is trustworthy. If Lonely Whale could communicate where the money goes and highlight their achievements, then that would create transparency around funding and direct impact.
The concept offers the user - someone who is guided by social and environmental responsibility - a clear opportunity to align with a non-profit organization that represents with her values and can be trusted with her time, donations, and moral support.
While the sitemap needed an updated, I kept the brand intact and took inspiration from their current website and Instagram account.
I noticed that the Instagram account hosted an external link to a list of resources that would offer the user more call to action if made available on the website. Taking this information into consideration, I built upon the current sitemap and created a structure that would accommodate the additional user flows.
The wireframes follow a simple user flow from the Home page, to the About page, to the Impact page. The plan was to integrate chunks of data about funding and/or impact to build transparency and communicate Lonely Whale’s authenticity throughout the user’s web experience.
Consistent with Lonely Whale’s strong digital presence and the user’s habits, the user discovers the organization through a friend’s post on Instagram and curiously navigates from Instagram to Lonely Whale’s website. The user recognizes a consistent tone across both platforms, appreciates the transparency of information, and feels encouraged to join the movement.
The user flow follows the user’s decision-making process and her conversion from someone who is skeptical to someone who believes in the organization. The end result is partially ideological and in practice would translate into action and conversation.
Prototypes were built across 3 breakpoints (desktop, tablet, mobile), but tested on mobile in accordance with the technical habits of the user.
Mid-fidelity prototypes were user tested with 5 digital savvy modern millennials. The goal was to test users’ understanding of the organization before applying visual design.
Feedback highlighted opportunities to improve user comprehension including:
• Removing excess data
• Organizing projects chronologically or by relevance
• Rephrasing vague descriptions
After making adjustments to content, colors and imagery were applied to a high-fidelity prototype that was user tested with 3 more digital savvy modern millennials. Comprehension improved significantly, however feedback suggested that the imagery could better support the content.
Add micro-interactions. Animations that would enhance the user experience and add delightful moments to otherwise ordinary tasks such as donating. Another opportunity would be to animate the whale tail motif in ways that would deliver feedback and spark joy throughout the design.
Create additional page templates. The content structure for the “Media,” “Get Involved,” and “Resources” sections would need to be developed to maintain a consistent user experience.