Before speaking with the client, I conducted a website audit to learn more about the organization and the website’s 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 no recent updates

By contrast, Lonely Whale’s social media accounts showed high engagement and activity 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 and is ready to take action.

• 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 with the goal of understanding:

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. That trust is built through transparency of information (or personal recommendations).

• 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 to be 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.

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 - built out with content and only styled with typography - were user tested with 5 digital savvy modern millennials. The goal was to test users’ understanding of the organization before applying visual design.

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. Brand voice and UI styling were influenced by the current website and Instagram account.

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.