{"id":47,"date":"2016-09-26T12:17:09","date_gmt":"2016-09-26T16:17:09","guid":{"rendered":"https:\/\/wordpress.clarku.edu\/tzhang\/?p=47"},"modified":"2016-09-29T10:47:14","modified_gmt":"2016-09-29T14:47:14","slug":"ux-project-donation-page-redesign-experience-on-current-page-2","status":"publish","type":"post","link":"https:\/\/wordpress.clarku.edu\/tzhang\/2016\/09\/26\/ux-project-donation-page-redesign-experience-on-current-page-2\/","title":{"rendered":"UX Project: Donation Page Redesign – Experience on Current Page 2"},"content":{"rendered":"

The form journey\u00a0has not been ended yet. With courage, I hit the “Add Donation” button. Puff! Here is the full donation form.<\/span><\/p>\n

The full form is very long. It is consisted by 5 parts:<\/span>
\n > Donation Information<\/span>
\n > Additional Information<\/span>
\n > Billing Information<\/span>
\n > Check-out Information<\/span>
\n > Tribute Information<\/span><\/p>\n

1.Donation Information<\/strong><\/span><\/h3>\n

\"donationThis part is what we saw in my last post. After clicking “Add Donation”, a table appears with the amount and designation. Now smart people will have a clue why the button called “Add Donation”, because it helps you build a table that you can add\/delete different designations and the amount you want to give to them. The form will also show you the total amount of money automatically at the bottom.<\/span>
\n Well, it is completely IT people’s logic, adding fields, editing numbers, submit. However, most people will not recognize that it is a multiple choice, because there is no sign telling them that your donation can go different places. “Add Donation” is not enough, and confusing people.<\/span><\/p>\n

2.Additional Information<\/strong><\/span><\/h3>\n

\"additionalFollowing is additional information. When you switch between One-time gift and Recurring gift, the content will change corresponsively.<\/span><\/p>\n

The only problem of this part is the words are too small under anonymous option. It is too hard to read for mobile users.<\/span><\/p>\n

 <\/p>\n

3.Billing information <\/strong><\/span><\/h3>\n

Billing information part asks very basic information. I won’t list here.<\/span><\/p>\n

4.Check-out Information<\/strong><\/span><\/h3>\n

\"check-outCheck-out Information is the next step. What attracts attentions is the question mark beside Card Security Code. I think it is a great idea to insert explanation in the form. Some people might be terrified by certain fields, so appropriate instructions are necessary. Here, the question mark might need some redesign to conform the whole feeling of the website.<\/span><\/p>\n

Also, if it is necessary, the form is better to be able to identify card types. Just for reducing\u00a0some work load from users.<\/span><\/p>\n

5.Tribute Information<\/strong><\/span><\/h3>\n

\"tributeWhen I saw this part, I questioned that why it is here, and why I need to retype my name.<\/span><\/p>\n

The donation system might be very complicated. There are different categories of donations, from different people, with different ways to give. We would like to present a form that shows the general information for the general users, and give clear paths to different segment users. Tribute information should not be here, listed in the main form and taking such a big space.<\/span><\/p>\n

6.Donate!<\/strong><\/span><\/h3>\n

\"donateCompleted above, finally we are at the end of the form now.<\/span><\/p>\n

I like the option of mailing a letter on my behalf, which is forward this form to friends for loving sharing.<\/span><\/p>\n

The interesting part is the instruction box for designation. It is now at the end of the form, again. No need to say how much space it takes here, who would know to seeking for help here? It is just\u00a0a very bad idea.<\/span><\/p>\n

7.Other problems about UX<\/h3>\n

Actually, to this form on mobile, there are other problems existing. Such as:
\n<\/span>
\n 1. Which field is mandatory? It doesn’t address.<\/span>
\n 2. This form is too long, and no confirmation before submitting. If people input\u00a0wrong info, it is even hard to find the field to correct.<\/span>
\n 3. It is not a very mobile friendly form, what was in the bigger screen disappear on mobile version.<\/span>
\n 4. Unprofessional looking form intimidates people to put their credit card information. They are more inclined to quit while filling it.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

The form journey\u00a0has not been ended yet. With courage, I hit the “Add Donation” button. Puff! Here is the full donation form. The full form is very long. It is […]<\/p>\n","protected":false},"author":556,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-47","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/posts\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/users\/556"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/posts\/47\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/media?parent=47"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/categories?post=47"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.clarku.edu\/tzhang\/wp-json\/wp\/v2\/tags?post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}