Component Usability Testing
Using RITE to Improve Usability
During user testing, it was discovered that the average credit union user was less likely to inherently understand card functionality on desktop platforms than when compared to the same functionality on a mobile device.
RITE Method
Prior to the release of a new CD Renewal form, we conducted individual on-site user testing with 10 credit union members and employees in an effort to validate a complicated user flow. Users were given a working prototype of the form and asked to complete varying tasks based around changing, renewing or closing a certificate deposit on a laptop computer. A team debrief followed each user session and updates were made to the prototype according to user habits and feedback.
Initial Card Prototype Design
Because the old version of the form did not have any data analytic tools connected to it, I relied my UX knowledge and ability to empathize with the user to design the form IA. The first action the user needed to take was to select a certificate to process. For the certificate component I used a standard card layout to display the CD name, amount and terms. Initially, I designed the card without a visual button to avoid the use of multiple buttons on the form. Instead, I relied on hover effects and the assumption that the user would inherently know to click the card to select the CD.
I was wrong.
Prototype Card Styling. All States.
Final Card Design
Throughout testing, users were hesitant to click on the cards even though the instructions stated to “select a card to begin the certificate deposit renewal process”. While the deeper/underlying issue likely was due to limited computer experience – credit union members, on average, tend to be older - or fear of making a financial mistake, the problem had users stuck on question one.
Using the members’ feedback, I reworked the card with a text style button and more aggressive hover effects. Additionally, I updated the information hierarchy by increasing and bolding the certificate balance while aligning the certificate terms to make up the additional vertical spaced gain by the addition of the ‘SELECT’ button. I added a box-shadow to the bottom of the card on hover and followed Material Design guidelines for the text style button hover. The result is a clean looking, informative card that is more upfront in the action the user needs to complete.
Final Card UI Design. All States.
Front-End Styling
Using Bootstrap’s grid and the jQuery library, I was able to create the component’s front-end code relatively easy. I wrote the HTML to be ADA compliant, created styles using SCSS, and wrote a basic JS function to handle the change from SELECT to a checkmark on click. The component was then handed over to back-end developers to connect the wires on the form.
See the Pen Card Component by Jeremy (@Jjpike30) on CodePen.