SOLUTION
SEAFARER WEBSITE AND APP CONCEPTION
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.
PROCESS
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.
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
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.
PARAMETERS
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, scrollable on the home page
3
Language
People needed a way to educate themselves in their own languages
HIGH-FIDELITY MOCKUPS
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
HIGH-FIDELITY PROTOTYPE
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.
DESIGN THINKING
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.
But enough about me,
tell me about you!