A mobile responsive redesign for better UX
Client: Animal Behavior College
I recently led a project that involved redesigning the contact forms and Thank You pages. I worked with the developer, graphic designer, and stakeholders to design a solution that will help users fill out the forms easier and faster on mobile devices.
With responsive contact forms and Thank You pages, users will have an easier time filling out the forms on their mobile devices.
There are two different contact forms. The first one is placed on nearly every page of the website. This is the one that’s crucial for conversions. Organic traffic enters the site, and the goal is for users to fill out the form and become leads.
The first contact form requests the user’s basic information, such as name, age, and contact information. Once users select the Request Info button, they’re directed to a page where the second contact form is displayed.
This new page is referred to as the first Thank You page. The second form requests more specific details, such as zip code, address, and preferred hours to be contacted. As an incentive to users to fill out the form, this page states the number of externship locations the company has across the U.S. and Canada.
By filling out and submitting this second form, the user will find out if there’s a location near him. After selecting the Check Locations button, users are then directed to the second (and final) Thank You page. If the zip code entered in the second form is invalid, users are directed to an error page.
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 was 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.
Skills: Wireframing, Research, User Interface Design, Conversion Optimization, Project Management, Strategy Development« PREVIOUS NEXT »