Harmony Haven Network Website Design
Role
UX designer
Researcher
Duration
5 days
Tools
Figma, Figjam
01 | Overview
What is Harmony Haven Network (HHN)?
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. In response, they 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 tasked with designing a donation-driven website for Harmony Haven Network, while balancing its business goals with ethics.
02 | Client meeting
What did HHN want?
In our first meeting, Nick communicated his strong desire to maximize revenue (what he called donations) at all costs and didn't seem concerned with what it would mean for the public or for the company's reputation. During the whole project, my team and I were in a constant battle to balance user needs and our moral boundaries.
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 and investigate what gets people to donate to different causes. The design included 4 pages with several donation calls to action, visible Glennergy branding, and preselected donation amounts.
I focused on the donations and shop pages, using persuasive UI patterns to nudge people into donating.
05 | Research
Early research
06 | Client meeting
Feedback from the client
During our second client meeting, Nick liked the direction and design. However, he was unconcerned about HHN's reputation and suggested that the design should further hide the connection with Glennergy, make the donation page more deceptive, and increase the pressure on visitors to donate.
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 a 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. The results reflected the ethical tension we'd been navigating.
Users found the site too focused on donations and money, which discouraged them from donating.
Solution: Replaced donation-heavy CTAs with email community sign-up CTAs.
People showed more interest in the shop than we expected.
Solution: Disclosed how merchandise profits would actually be used to build on that interest honestly.
