Overview
As part of the SickKidsFoundation.com redesign that launched in 2014, the main donation flow was identified as a key area of opportunity of re-design due to the fact that it was primarily based on a donation CMS and the functionality was quite limited. The objectives are to:
- Increase conversions by decreasing drop offs and up sell through impact imagery and messaging
- Create a better user experience across multi-devices
- Support growth in revenue plans through testing and focusing on monthly acquisition
My Responsibilities
In collaboration with the Direct Marketing and Brand teams as well as a back-end developer, I redesigned the UI/UX of the donation flow ensuring it's more streamlined for the end user in that s/he will only take 3 or 4 steps to make a donation.
Comparative Analysis
I worked with a team member of the Brand team, to research as to how other non-profit organizations have set up their donation forms. I felt that this process was quite important as it was a first step to gain insights as to how the donation form itself would be effective for the user and the multiple options available. We came across 2 charities that seem to be well known in the non-profit sector: Charity Water and The Canadian Red Cross.
A comparative analysis of the features and user experience of the donation forms for both Charity Water and Canadian Red Cross.
Both donation forms from Charity Water as well as Canadian Red Cross were almost similar in nature in respect to the usability, features as well as mobile responsiveness. We collectively decided to head into a similar direction, which will be a vast improvement from its current state.
Wireframing
Due to the limited time constraints and tight deadline to launch the product, the organization decided to engage Delvinia, a digital agency, to come up with an Information Architecture for the form. I, in turn, collaborated alongside with the Information Architect from Delvinia as well as one of our Product Owners, to flush out the wireframes for the form. My knowledge and expertise with user experience, form usability and the technical aspects came very useful at this stage as I aided in the conception and execution of the wireframes. The Product Owner, from our team, also shared her ideas and thoughts, eventually making the whole a process a very productive one. We ensured that the donation flow is very streamlined in that the user will only take 3 to 4 steps to make a donation per donation type.
Desktop View
Mobile View
These wireframes were presented to the Direct Marketing team, Director of Digital and VP of Communications where we collaboratively took them through the user experience and flow of the donation form.
HTML/CSS Prototyping
As the wires for the project were being explored and created, I also partnered with a back-end developer in my team alongside a Project Manager to discuss the technical feasibilities of the whole project. As the entire team were on a tight timeline, we collaborated together to formulate a work back schedule in regards to the design, development, QA, user test and deployment. Once the wires have been approved, I collaborated with my back-end developer to create a fully functional HTML/CSS prototype. I built the front-end utilizing modular CSS and the Bootstrap framework, mainly due to the fact that we needed the form to be modular as the organization has plenty of direct marketing initiatives that involves donations. This methodology allowed us to skin/redesign the donation form to adhere to the branding/style guide of each initiative. The back-end developer, in turn, developed the whole back-end architecture in ASP.Net MVC, tied the form to the organization's database and had it send custom e-mail confirmations to the donors.
UX Refinements and Enhancements
Although the wireframes were approved, I felt that the design could use a few enhancements in regards to the user experience.
One of the examples would be animated floating labels using CSS3 transitions, where its initial state would be placeholders in the text input field and would transform into an actual form label once clicked on it. I was inspired by this post regarding text input effects, who was initially inspired by Andrej Radisic.
An example of animated floating labels using CSS3 transitions
Another innovative and efficient design pattern I implemented that would be helpful to the user is Google's autocomplete feature when it came to filling out the address portion. It definitely aids the user to fill out the form quickly as it automatically detects the city, zip/postal code and country. According to research, drop off rates from filling forms are drastically reduced as autocompletion and search suggestions saves the user keystrokes by matching a user's query with potential matches that are displayed as the query is being typed.
Click to enlarge
I also felt that visual credit card recognition would be beneficial in providing some confidence to the user when completing the transaction. As the user starts to type in the credit card number in the form field, the respective credit card logo would appear in the respective field. This, in turn, will provide some assurance to the user that the correct credit card number will be entered (of course, the form consists of validation, which I'll talk about later).
Click to enlarge
As a best practice of user experience for form design, I ensured that all form fields were validated before the user proceeds to the next step. I was hoping that inline validation would be a possibility, however there were some challenges that needed to be overcome, to which I'll speak below.
Challenges
Form Validation
As I mentioned earlier, I was pretty enthusiastic as to having inline form validation as the user progresses from one form field to another. However, after collaborating with the backend developer, this wasn't feasible due to the nature of the .NET MVC framework, which was the main architecture of the web application. The error messages, in turn, have to be placed at the top of the form.
Solution
I ensured that the error messages were encompassed in a dark red container/box with a white font color to make it very noticeable and legible for the user. Some jQuery script was implemented, which automatically scrolled the form to the top to the error messages, preventing the user from manually doing it.
Visual UI of the progress bar (steps)
From the results we obtained from the user focus group testing, it turned out that the users were constantly clicking on the steps in the hopes of returning back to that specific stage of the transaction process, instead of using the "Back" button. Initially, the UI of each step was a huge round circle, which according to the test results, resembled buttons. The product team that I was working with, actually wanted to each step clickable, directing the user to the respective section of the transaction process. However, the back-end developer announced that this won't be feasible due the nature of the .NET MVC framework. Apparently, user stored data on a particular session may be lost.
Solution
I redesigned the progress bar to prevent users from clicking on each step; the circles were drastically reduced in size and the color being changed to different shades of grey. The darker meant active state while the much lighter version meant inactive state. It was quite successful as a majority of users were not clicking on the circles in the progress bar anymore.
Donation amounts
As part of the user testing results conducted by a few participants of age 40 and over with e-commerce and online donation experience, it turned out that the majority of the desktop users did not notice donation amounts below the fold. There was no visual indication that content continues below the fold. This was, in fact, more evident in the mobile version where the layout converted to a one-column, in which each all the donation amounts were stacked below the options.
Solution
Since there was no option to contextually link the content below the fold to ensure the user scrolls due to the content itself; I felt that the page should automatically scroll to the donation amounts once the user chooses his/her preferred donation option. This was accomplished by a simple jQuery script I wrote and implemented.
Tab menus
There was a nominal occurence of users being unable to identify the personal/business toggle until s/he had completed the form. The personal and business toggle are not visually distinct, and it's not overtly clear which state is selected.
Solution
I designed the tabs in order to create a more visual distinction between active and inactive states by a simple outline and a shaded grey color to denote their respective states (see one of the screenshots above).
Inputting credit card information confidence
On the payment section, it turned out that many users were not confident in inputting their credit card information as they were not sure that the site was secure or not even though the initial design had grey scale logos of the credit cards. The list of card types looked like they were in an unselected state as the users kept on clicking on them in the hopes of it coming alive.
Solution
I eliminated the grey scale logos of the credit cards as they were kind of redundant to the visual credit card recognition pattern I implemented within the text field. It also eliminates confusion. In addition, according to some psychological behavorial test results, people felt safe and secure when the words "Safe" and "Secure" are implemented. As a result, I changed the title "Payment" to "Secure Payment" and spelled out the credit card types with the following phrase: "We accept Mastercard, Visa, American Express and Paypal."
Confirmation Page - Information Expectation
In the usability test results, it seemed that several users were unclear at which point the payment is going through, and how the user would retrieve this information after the payment is complete.
"I would expect something like 'we've e-mailed you a receipt'... I could print this page for confirmation, but I wouldn't and I might need it months later or something."
- Dan G. (1x Corporation Donation, Desktop)
"I really don't know at what point my credit card gets charged."
- Lucy N. (1x Personal Donation, Tablet)
Solution
I proposed the idea to the product team of having some copy/verbiage that provides confidence to the user that the payment will be going through at that moment; something along the lines of "You are about to make a donation of $X" at the top right under the heading.
Confirmation Page - Expanded Summary
While most users were able to find the expanded donation summary, all users suggested that the Donation Summary be automatically expanded, to avoid mistakes and people missing important information hidden in the collapsed state.
Solution
The Donation Summary accordion was moved right to the top with it an expanded view state.
UI DESIGN
Apart from the UX aspect of this web app, I was also in charge of the UI design where I worked collaboratively with the Brand team to create an aesthetically pleasing interface that adhered to the organization's brand guidelines. I ensured that all the colors and typography being utilized are AODA compliant by using an online checker.
As the previous version of the donation form wasn't very visually enticing due to technical constraints, I worked with the Art Director of the Communications team to design the app with originally shot impactful photography of patients as well as impact messaging pertaining to each donation. Throughout every iteration, I ensured that there was a balance in composition, while maintaining the form as the main focus point.
Here are some screenshots of the interface in responsive form:
RESULTS
The conversion rate as to the number of donations and gaining warm leads for the Direct Marketing team increased by a drastic 30%; which was welcomed with great thanks by the whole organization. To this date, the donation form has been redesigned again to conform to SickKids' new campaign and new direction the organization has taken: SickKids VS.