DSNetwork's website is unnecessarily complicated. Many visitors find it difficult to complete the donation process , or schedule volunteering activities. The network loses out on essential income and manpower. I set out to improve the experience of the website to support the organization both physically and financially. My main challenge would be to comprehend the expectations of a potential donor.
(INDIVIDUAL SCHOOL PROJECT FOR NGO)
Adhvik Madhav - UX Design student Prof. Deborah Prewitt - Graphic Information Technology Faculty, Project Mentor
Early on in the process, I defined the project's goals to be to increase donation revenue and volunteer support for the organization. Through user research, I identified core problems that hindered users from completing their task. My redesigned solution witnessed a 24.2% reduction in task completion time and 100% success in task completion.
" How do I increase the number of people volunteering for the organization, and boost their income via increased donations? "
Non-profit organizations rely heavily on donations for their financial ventures. The process needs to be as efficient as possible so that the maximum users complete the process without wanting to quit midway. I can definitely improve their digital influence.
Since I will be working on this project alone, I need frequent counsel to avoid deviating from the set goals. Identifying and contacting the persons that will be impacted by this project will help me touch base every step of the way.
Before we can test the website with other participants, we must figure out which sections need to be tested. A heuristic evaluation is a good way forward to identify areas that need improvement. Based on the evaluation, I can come up with a test plan and the tasks to be conducted.
Using Nielsen's 10 Usability Heuristics for User Interface Design, I requested two peers to conduct the evaluation on the website. To evaluate the severity of the issue, I will be rating them according to Jakob Nielsen’s four step scale because the numbers of points are similar to what I am looking for.
Login form gives feedback when wrong credentials are entered, but does not specify which exact field was wrong. Additionally, if new users try to log in, there is no prompt like ‘we could not find your account, would you like to create one?' Instead, the same error message is displayed. Forgot password feature has too much text.
Match between system and the real world
All navigation links, content is simple to understand and does not require complex thought processes. Visitors with no knowledge about medical terms can browse the website with ease.
User control and freedom
Most of the web pages are only 1 level deep, meaning there are no external/hidden links within the page that can redirect the user to unknown areas. Primary navigation links are always visible so the user can go to the main page at anytime. The navigation links on the top (in blue) do not show active status when visiting. Users may forget which section they clicked and will have to find it again. When subscribing to the news-letter, there is no option to go back,forcing users to either enter details or click browser’s back button.
Consistency and standards
The entire website follows a single theme, blue is the primary color. It is used for links, highlights and action buttons. One issue is that some pages follow a card UI to redirect to other sections. Other pages use side navigation and some even list their entire content on a single page without any navigation. Also,some buttons are grey, while others are blue. The grey buttons may confuse the user into thinking that these are dead links.
Apart from donations, there aren’t many critical features on the website that require error prompts. The donation form gives you predefined amounts to choose from,or enter your own amount. Clicking ‘Submit’ takes you to the payments page where you can verify the total amount that will be deducted. There is a blaring alert at the bottom of the form asking you to click once.
Recognition rather than recall
When subscribing to the news-letter, the user needs to select the topics which they are interested in. But, the names of these topics are not easily remembered.The user may need to go back to understand what each section means.
Flexibility and efficiency of use
There are no shortcuts for quicker donations or scheduling volunteering. The website does not personalize its content depending upon the user who has logged in. New users will require time to understand the site, but returning users may know exactly where they need to go to perform a task. Nonetheless, the number of steps performed for a task does not change for any type of user.
Aesthetic and minimalist design
The website is gull of excessive, irrelevant graphics and content. The layouts of the web pages are a mess. There is a giant header on every web page that covers up most of the screen space. Very little white space on many sections. There are many links that lead to the same page. Redundant information is scattered all over the website.
Help users recognize, diagnose, and recover from errors
Some input fields proved exact errors that have occurred. The error messages are in plain language and are easy to understand. Major problems with sequence of error detection. They are displayed after all steps are completed. Login process has insufficient details about the error, does not provide accurate solutions.
Help and documentation
Sufficient help resources provided. FAQs are present where necessary. Website can be translated to Spanish for fluent speakers. Top level members and executives are listed on the website.
The most effective technique to gather preliminary user data for this project is through online surveys. They are quick, cheap, and provide great insights.Nine participants took part in the survey, out of which three did not answer the open-ended questions.
The key takeaways are,
We broadly identified 3 groups that engage with the site: donators, volunteers, and concerned family members.
Users find it difficult to navigate the site.
The homepage does a poor job of sharing the community's message.
Users are unable to find the donation page or complete the task.
Scheduling a volunteering event is frustrating.
Based on my preliminary research, I created three personas to represent the target groups: donators, volunteers, and concerned family members.
We have identified that navigation is a major issue for most users. There are multiple links that lead to the same page, dead links are scattered all over the website. The Information Architecture needs to be redesigned. To achieve this, I performed a content audit on the website and listed all web pages in hierarchy. Further, each web page was rated on the following categories.
Accuracy/relevance of the page to the overall site.
Value to visitors
Value to organization
When it comes to non-profit organizations and social welfare, the United Nations are the one to beat. The UNICEF humanitarian aid for children has a simple and meaningful process to motivate visitors to donate. A short description to remind visitors of their contribution is a great idea. This reinforces their act of giving. It is important to make visitors feel secure with online payments, having a green lock icon does just that.
Another delightful donation process belongs to mozilla foundation. The option to choose currency is brilliant.
Information Architecture 2.0 & Rough sketches
The content audit paved a way for a new information architecture. Due to the fact that I had to submit a high-fidelity prototype within a week, I could not sketch multiple ideas and test them out. I had to make an effective layout on the first go.
Homepage & Volunteering Page
Our new homepage is designed to communicate the network's mission and message more effectively. Users can immediately see the main tasks on the sliding carousel, they do not have to search for them.
New visitors are greeted with positive, reassuring, success stories of previous families who have benefited from the network. This is a slight push to keep visitors engaged on the site.
Donation user flow
While the donation page was itself difficult to find for most users. The few who managed to get through pointed out that the form elements were not responsive and the entire process was not as rewarding.
Picking up ideas from the inspiration board, I decided to create the following donation user flow.
1. Currency & Amount
Keeping in mind a global audience, users are provided the option to chose their native currency. The payment gateway will include transaction fees.
2. Personal Information
Users can enter their personal details to make their contribution public, or they can select the anonymous option to hide their details.
3. Payment Information
The form provides multiple options of payment including credit/debit cards, e-wallets, bank transfers, etc.
As a confirmation to the user's contribution, they are received by a happy child thanking them. This is just a visual way to remind them they have contributed to a good cause.
High Fidelity prototypes
Easily identifiable and quick to subscribe. Users have the option to choose fields they are interested in.
Following the rough sketches, the new task flow is sure to provide a delightful and satisfying experience to donators.
Users can now see upcoming events and details at a glance. Registering has never been easier.
I conducted a task-based usability test. Participants were chosen to reflect the personas. Task times were noted, including success rates as well as additional feedback from the users. User’s emotions and frustrations were captured when and where possible. Here are some of the problems faced and comments made by the participants,
" I don't know what DS is or what it represents, nothing on the homepage describes what they do. "
" Having two navbars is really annoying. Which one am I supposed to for the important stuff? I do not understand what some of these options mean. What does Lights, Camera, Action mean?. "
" Finding the donate button wasn't easy, I really had to look for it and scroll multiple times. Who puts links inside images? I am confused about what is a button and what isn't. "
" I am not sure if I can donate directly or I have to buy merchandise to contribute. Donating 'anonymously' is a useful option. not sure what 'tribute' type means. Donation form can be made simpler. "
" This sliding presentation is great! I can see some important information right away. I wish it was better designed though. "
Highlights of the test,
Many participants felt lost on the site, and this added to their task times.
5/6 participants faced issues with Task 9 (Make a donation of $30 to the network, up to the payments page). This needs to be addressed immediately.
Average success rate is 91%, which may seem good but can impact a non-profit organization.
Average task time is 37.87 seconds. This can be significantly improved.
Testing the new site
No redesign is effective without another round of testing. I wanted to see their journey through each of the tasks, and hoped that the new site provided a more meaningful experience.
Due to the pandemic, I had a hard time finding participants who resembled the personas even a little. Here are some of the comments and observations they made,
" I see major improvement in the sliding presentation thing. But it moves too damn fast! I cannot read what's written. It is much better though. "
" The mission statement tells me exactly what the organization does. I like how the 'donate' and 'volunteer' buttons are right next to it. "
" This donating process seems to be much better than what it currently is. It's simple and broken down to manageable chunks. I especially love the option to donate in a foreign currency. "
" Isn't my CVC/CVV supposed to be hidden? What if somebody takes a peek over my shoulder? You should fix that." (Participant smiled on seeing the baby's picture after successfully donating.)
Users completed their tasks 24.2% faster on the redesigned prototype and success rate improved to 100%.
The redesign has proven to be successful. There were some additional issues identified with the prototype, but the project has been put on temporary hold.
Initially, I reached out to the stakeholders of the project via email, LinkedIn, etc. Unfortunately, I didn't get any replies back. This put me in a bit of a bind as I had to rely on publishings and success stories to relate to the audience.
If in the near future they do respond, I would love to show my case study to the stakeholders. And, probably offer to develop the website.
Even though this was a school project, it felt like I was working in the industry. Finding workarounds and meeting deadlines without fail.