Harmony Haven Network Website Design
Role
UX designer
Researcher
Duration
5 days
Tools
Figma, Figjam
01 | Overview
What is Harmony Haven Network?
This project was built around a fictional client, Glennergy, for a class assignment. Glennergy is an energy company that caused an oil spill devastating the eel population in the Sargasso Sea, and in response, launched a nonprofit called Harmony Haven Network to help repair its image. Its CEO, Nick, claims to have pioneered the eel breeding industry, even though no one actually knows how eels breed.
My team and I were asked to design a donation-driven website for Harmony Haven Network, while balancing its business goals with ethics.
02 | Client meeting
What did Harmony Haven Network want?
In our first meeting, Nick told us he wanted us to be as deceitful as possible to maximize donations, and didn't seem concerned with what that might mean for the donating public or for the company's reputation. During the entirety of the project, we had to walk the blurry line of meeting client goals while attempting to create a more ethical design that built trust with the public.
03 | Brainstorming
Getting our first ideas down
The team and I brainstormed the main priorities and possible directions for the website
04 | Design
Building a low fidelity version
From there, we built a low-fidelity MVP to test our ideas and understand what actually motivates people to donate.
It included four pages: a homepage, about us, donations, and shop, with several donation calls to action, a visible tie to Glennergy, and preselected donation amounts.
I focused on the donations and shop pages specifically, designing for clarity and persuasive UI patterns to see how users would actually engage with the platform.
05 | Research
Early research
To take a closer look at our research breakdown in our FigJam.
We interviewed five people to understand how the public perceives nonprofit organizations, and I analyzed and synthesized that data into a set of user insights.
Based on these findings, we decided to:
Create distance between the Harmony Haven Network and Glennergy brands
Emphasize concrete actions and a clear plan, not vague promises
Highlight future projections to show the work is ongoing
Include short, eye-catching facts about eels to increase public interest
06 | Client meeting
Feedback from the client
During our second client meeting, Nick generally liked the direction and design. However, he was unconcerned about HHN's reputation and suggested that the design should hide the connection with Glennergy, make the donation page more deceptive, and somehow pressure visitors into donating.
07 | Design
Building the first high fidelity prototype
After weighing both the user research and the client feedback, we implemented the following:
Hid ties to Glennergy in the footer
Added key eel facts to the homepage to build empathy
Included goals and projections on the About Us and Donations pages
Added social proofing section to encourage donations
Added preselected donation fields
Increased donation CTAs
I mainly focused on building out the dynamic components and designing the donations and shop pages.
View full prototype in Figma
08 | Evaluate
Testing it with real users
We ran user testing on the prototype with 8 users, and I analyzed the results. This is where the ethical tension we'd been navigating actually showed up in the data.
Connection to Glennergy
We successfully hid HHN's connection to Glennergy from users.
Most users found the site too donation/money focused, which discouraged them from donating.
Solution: Replaced donation-heavy CTAs with email community sign-up CTAs.
Most users found the site untrustworthy, wanted more information about the cause, and struggled to feel a connection to eels.
Solution: Made the environmental consequences feel direct, modernized the donation page, and disclosed real progress towards specific milestones
Interest in the shop
People showed more interest in the shop than we expected.
Solution: Disclosed how merchandise profit would actually be used, to build on that interest honestly.
