A Mobile Responsive Redesign for Better UX
I led a responsive redesign of the contact form task flow for Animal Behavior College. A major source of their student enrollments comes from users filling out the contact form. I worked with stakeholders and programmers and used user data to design their contact form process to be responsive.
The process of getting their information is split into two contact forms or screens.
The process begins with the first contact form. After users fill it out, they’re taken to another page with a second contact form. Any input on this page is optional. However, as an incentive for users to submit this second form, this page says it will check whether or not there is an externship location in their area.
If the zip code is valid, they’re taken to the second (and final) Thank You page. If the zip code is invalid, users are directed to an error page where they can try again.
An agency had previously provided desktop and mobile mockups for essentially two templates: one for the homepage and one for a content page. Also included was their redesign of the first contact form. They didn’t include annotations, so the challenge was designing contact forms and Thank You pages that were in line with their design, but also met business goals.
The first step was to take their design of the first contact form and improve on it based on stakeholder preference and usability. Their design had a couple of usability issues. First, the proximity between the radio buttons was too narrow. The form displayed radio button options on a single line. Not only does this decrease the tap target size of each option, but also the burden was then on the user to accurately select his desired option on his mobile device.
The second issue were the field names. While having field names within the field makes for a shorter form and cleaner look, it can become a frustrating experience for the user. When field names are within the field where placeholder text would be, they disappear upon selection of the field. This may lead users to forget the information they should enter and potentially leave the form altogether.Working off of the agency’s mockup, I created wireframes for the:
- First contact form
- Second contact form
- First Thank You page
- Invalid zip code page
First contact form
Aside from displaying the radio buttons vertically and moving the field names above the fields, I also designed one field per line as opposed to having two fields on the same line. I did this to help make filling out the fields easier for users on mobile. I also changed “What program interests you most?” to “Which program interests you most” for grammatical purposes.
Second contact form and first Thank You page
The existing second contact form included some text I felt were unnecessary. For example, above the fields read: “Please fill in the fields below.” Another bit of unnecessary microcopy was the “Almost Done!” text after the Country field.
I removed these from my wire and instead wrote “Meanwhile, see if we have a location near you by telling us a little more about yourself” above the second form.
From past experience with this company, I knew the original microcopy was added to get users to fill out the form, so I reworded it and placed it outside of the form on top.
I also switched the red font color to the brand’s navy blue color because users might mistake the red text for an error message.
Second Thank You page
If users enter a valid zip code into the second form, they’re directed to this page. This one needed the most improvement because it was the final page in the taskflow and a great opportunity to improve the conversion rate.
The existing second Thank You page read “Congratulations! We have locations that provide hands-on training for ABC students residing in zip code _____.” Then, in red again, “Please contact us at (800) 795-3294.”
After users get to this page, they receive a call from the company. To help prepare them for the conversation, stakeholders suggested creating a list of topics users should discuss with the Admissions Counselors. They had brainstormed other ideas, but nothing was ever set in place.
I looked at their list of ideas, selected the ones I felt would be best for conversions and provide value to users, and included my own ideas. For the second Thank You page, I:
- Wrote new copy
- Added a click-to-call phone number
- Made a bullet point list of topics the user should discuss
- Selected an image
- Added a few testimonials
- Added social media buttons
- Included a carousel of student images
The result was a content-rich Thank You page designed to keep the user engaged and excited about his chosen course.
Invalid zip code page
If users enter an invalid zip code on the second contact form, they’re directed to this page. For this wire, I edited the copy to have a warmer, human-like voice. The existing error page read: “I am sorry the zip code you have entered is not valid or is currently not in our database. Please try again.” I changed that to “Unfortunately, we don’t have externship locations for students residing in _____.” I mentioned externship locations to remind the user why he had entered his zip code in the first place.
From my wires, the graphic designer made mockups, which we presented for review. Stakeholders preferred to preserve the colors of the original forms (i.e. yellow top bar and red button). They also wanted to keep most of the original copy on the first Thank You page and invalid zip code error page.
The second Thank You page was completely approved. However, they requested a few more changes to our mockups.
After a few iterations, we had our final designs.
In the beginning of this process, I had originally suggested having an inline error message on both contact forms. Rather than the user selecting the button and then seeing error messages for either missing fields or invalid data entries afterwards, I suggested having a tooltip display during the form filling process.
This would help users fill out or correct any fields on the spot, which may reduce the time it takes for them to fill out the form. Furthermore, this feature would eliminate the need for an invalid zip code error page.
I had presented a wireframe for this tooltip as well as a video demonstrating the behavior of the tooltip to the developer and stakeholder. While the idea was approved, it didn’t make it in the final design due to programming issues.
With a contact form that is responsive on all devices, users have an easier time filling out the form, which increases the potential for more enrollments.