Project Overview

• Orcasound, a non-profit organization of scientists, uses hydrophones in the Pacific Ocean to detect orca vocalizations. When activity is detected, enthusiasts receive notifications to listen to the sounds.

• The stakeholder currently posts notifications manually to various groups and email lists. Additionally, the signup form is a Google form that is manually added to Mailchimp.

Leadership Priorities

• Conservative questions were created by volunteer scientists for research purposes, and stakeholders determined that they should be kept.

• The stakeholder needs to know how many people we find for any research, and he wants to know their occupations and the level of their knowledge of Orcas.

• Encourage People to Help Orca Lives and donate.

• Users should be able to sign up quickly and easily.

• Users should understand each field and its purpose without scratching their heads.

• The signup form is controversial due to its questions and its format.

• Based on weekly notification signups(WNS), the number of people who signed up has decreased, so we are determined to identify its problems.

Challenges

Goals

• Conducted user journey on the signing up process, focusing on the form to see how users feel about the task.

• Studying similar existing businesses which are directly and indirectly related to orcas

• Float surveys to understand who our users are and how they feel about the orca-related questionnaire.

• Interviewed potential users to understand their concerns and needs.

.

Our Approach

For this project, my team was assigned to redesign a user-friendly sign-up form for a website where users can receive notifications to listen live to Orcas after signing up and answering questions about Orcas conservation.

Process

Discover

Interview Questions:

• What motivated you to join Orcasound and what interests or background do you have related to hydrophones?

• Were the questions on the sign-up form clear and easy to understand? why?

• Did you feel have any help or question while filling the form?(if so, which one and why?)

User Stories

• "I felt that there are a few questions that are specialized and it's a bit complicated for the general public”.

• “less text to read it’s not a bad idea”.

• "Being redirected to another page can sometimes be a bit like taking an unexpected turn in a conversation.

• “I always like to participate in things that benefit Orcas”.

User Journey map

To analyze the current state of the user journey for finding signup form on the web to get notification. We asked the users to walk us through and think out loud how they found the "Get Notification" button; then we had them fill it out the form again and monitored the process.

Competitive analysis

We didn't know how other signup forms were designed in this context, and what their approach would be to any questions concerning conservatism. We analyzed 7 websites that their content is direct and indirect to orcasound and searched about their signup forms,and their conservative matter.

Survey

We gathered user information to find our target user. Also, to understand their background, pain points, and overall experience with the signup form, focusing on questions, feelings, and behaviors. First gave it to the existed users who already signed up the form. Then, we decided we need to consider the Potential orca enthusiasts unaware of the platform. We have them to fill out the signup form then the survey.

170 participant responded

Generative 1:1 sessions interview

We didn't gather enough insights from the survey, so we interviewed both groups .The goal was to understand how users felt about the signup process, conservative questions, and their motivations (In-Depth Understanding). The findings shaped an affinity diagram.

Possible Solutions

After analyzing our research data, we gained a clear understanding of the challenges we faced in our project. To overcome these challenges, we incorporated a solution into our design.

We conducted a meeting with the stakeholders and developers, where we presented our research findings. They acknowledged the shortcomings identified in our research. Additionally, they provided us with a set of requirements to enhance the existing form.

Meeting with the Orcasound team
Photo by Sonam Chauhan

Challenges and Solutions

Ideation & Wireframes

Utilizing the design sprint methodology over four weeks, we developed mid-to-high-fidelity wireframes through several iterative rounds to refine the content and finalize the layout designs for prototypes and testing users.

Sketches

Design Sprint in Miro

Usability Testing

After lots of iterations and talking over sketches, we came up with 3 versions of lo-fi wireframes. we gave them to existing users for testing. And these are the results.

The initial version was a pop-up on the main webpage, presenting questions one at a time, featuring a progress bar, prioritizing key questions, and allowing users to continue the questionnaire.

Wireframe 1

Users felt unsure about this version because they thought it was only one page. They did not see the progress bar and left after clicking "next."

Result after usability

Version 1

Wireframe 2

Version 2

The second version improved upon the first. It is now a pop-up. The progress bar has been removed. Questions now use drop-down options, and the rest of the questions are on the next page.

Result after usability

After testing usability with target users, we discovered that the pop-up and dropdown options are not user-friendly. Many users chose to withdraw the form after clicking 'Next'.

Version 3

Wireframe 3

We found out that the pop-up version is no longer available. We need to put all the questions on one page and fix the dropdown menu so users can see all the options at once. We designed this version and again usability tested it.

Result after usability

Users preferred this version and clicked yes to continue with volunteer questions, and many of them clicked the submit CTA.

Design&Develop

Orcasound Design System

We created the final version of the signup form using the Orcasound design system and based on usability testing.

This is the final version. We added a progress bar to the right side of the form to make it more noticeable to users. Each question is now presented in separate boxes, and we will ask the respondent at the end of the form if they would like to answer the questionnaire about Orcas.

Design System

Final Design

Reflections

• Increase form completion rate from 67% to 80%

• Reduce average signup time from 5 minutes to under 2 minutes

• Improve mobile signup conversion by 25%

• Maintain audio preview engagement above 80%

The Next Steps

• Integrate social sign-up options

• Add accessibility features for hearing-impaired users

• Develop personalized welcome experience based on user location

• Create multi-language support for international users

Success Metrics

What I learned

• How to present technical solutions to non-technical stakeholders

• How to prioritize features based on user impact

• As a team member, I learned that regular communication with the team and stakeholders is essential, especially in the early stages of a project when content may not be available.