About The Project
THE PRODUCT
Seafarer is a whale conservancy focused on education and action. The organization needs a way to help people learn about whales and how to donate to the cause. Seafarer’s primary target users include adults who are concerned with conservation of whale populations and would like to learn more about what they can do to help and how to donate.
MY ROLE
UX designer and researcher leading the responsive website design from conception to delivery.
RESPONSIBILITIES
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
TIMEFRAME
7 weeks
PROBLEM
Some 300,000 whales and dolphins are killed each year due to industrial and illegal fishing. Seafarer has identified the lack of general knowledge about whales, whaling, and how to give to the cause as crucial impacts for whale conservation.
SOLUTION
Design a responsive website that will improve education on the topic of whale conservation and easily guide users on how to donate to the cause of whale conservation.
Pain Points
I used data on whale conservancy to develop interview questions, which were then used to conduct user interviews. Most interview participants reported feeling badly about declining whale populations, but didn’t actively try to find ways to educate themselves further or give back to whale conservation.
The feedback received through research made it very clear that users would be open and willing to work towards helping the effort of whale conservation if they had a faster and easier way to help educate and guide them on how to help the cause.
1
Education
Users need easy-to-access means of educating themselves on the subject of whale conservancy and on how they can help
2
Time
Users need fast and easy means of educating themselves and on guiding and educating others on the subject of whale conservation and on how they can help
Meet the Users
The personas defined are based on our interview and survey findings. From interviews, I noticed two commonalities: individuals want more on the education front and on donating to the cause.
-
”Through education and giving back, I believe I can help make a difference in saving whales!”June is a recent college graduate who wants to learn more about how to become educated and donate to whale conservation because they want to help the declining whale populations.
-
"I want to help these majestic creatures, because losing them would have huge consequences on the ocean’s ecosystem.“
Talisen is a marine biologist who wants to educate people on the topic of whale conservation and on how they can help the cause because he wants to help the declining whale populations and budgeting for the cause is tight.
Competitive Analysis
I looked at 10+ indirect and direct competitors’ websites in comparison to Seafarer, including other whale conservancies and aquariums. I noticed while features between competitors were very similar, the main differences that were noticed were:
Easily Accessible vs Hardly Accessible
Cluttered Display of Information vs Simple Display of Information
Loud/Distracting Interface vs Minimalist Interface
Ideation
I did quick ideation exercises to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on guiding users through the process of donating, though other ideas were brainstormed as well.
Digital Wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the Seafarer mobile website. These designs focused on the donation process and featured an easy to access way to start the user flow of donating.
Low-fidelity Prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of donating through the Seafarer mobile website.
Usability Study: Parameters
Study Type: Moderated
Location: United States, remote
Participants: 5 participants
Length: 10 - 15 minutes
Findings
1
Ways to donate
People want easy access to more ways to donate to whale conservation
2
Educational sections
People wanted more sections on whale conservation education/news, ready to scroll through, on the home page
3
Language
People needed a way to educate themselves in their own languages
Mockups pt. 1
Based on the insights from the usability studies, I applied design changes like providing an icon in the navigation tab for changing the language of the website to allow for a broader reach for international audiences.
Mockups pt. 2
Additional design changes included adding more sections to the home page that allowed the user to quickly browse through different subjects: from fun facts & figures to the latest news on whale conservation.
Mockups pt. 3
High-fidelity Prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
Accessibility Considerations
1
Alternative Text
Clear labels for interactive elements that can be read by screen readers
2
Language
Inclusion of the globe icon for a language menu, translating the website into different languages for non-English speakers
Information Architecture
With the mobile website designs completed, I started work on designing the responsive laptop/desktop website. I used Seafarer’s sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Responsive Designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Next Steps
1
Conduct research on how successful the website is in receiving donations towards the goal of whale conservancy through tracking KPIs
2
Add more educational resources for users to learn more about whale conservation and continue building out a more robust design system
3
Provide more details on everyday ways that people can help to fight against sea pollution and help preserve the declining whale populations
Reflections
Trust the process
Though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.
How I work as a designer
I learned personally—through frustration and a scrapped, initial hi-fi prototype for the mobile website—that when designing for multiple screen sizes it was actually easier for me to work in a graceful degradation process rather than bottom up designing.
Push your limits
Through continued growth and perseverance, the design process reinforced and humbled me in the fact that I’m always growing, and to keep pushing myself to create better end-products for users.