New expanded view
The new invite opens initially and then shrinks down to just the icon.
Previous invite
The previous invite sat at the bottom of the page and also collapsed down, but still took just enough space with the label to interfere with viewing content.
Skills
- Visual Design
- Hallway Testing
- Adobe Creative Suite
- HTML/CSS/Javascript
My Role: Analysis, Designer & Coder
This project involved revising the invite interaction for a survey that we use to collect feedback from people on various pages of an ecommerce website. The previous invite banner sat at the bottom of the page in a fixed location. It appeared as a tab, that when a person hovered over it would expand upward to show the link to the survey with a short note about the purpose.
Previous invite
Problems
The tab at the bottom of the page worked fine for most pages except for the product detail page. There was a problem with the response rate not being significant enough for some of our regions where we had smaller number of visitors. So we had adjusted the tab to appear expanded for 3 seconds and then it would slide down to just the tab. This exacerbated a problem where it seemed no matter where along the bottom we positioned the tab it would cover some important element like the technical details or the buy button.
Another problem was related to the way the invite would be made to not appear after a person took the survey or they dismissed the invite by clicking the “no thanks” link. Once a person took the survey or dismissed the invite we would set a cookie to prevent it from reappearing for 90 days. Unfortunately when people use private browsing those cookies get removed after they quit and the survey would reappear with every visit. We also noted that some browser makers are now defaulting to clear cache, cookies and local storage after each session when a browser is installed or updated. This means we can not rely on cookies, local storage or even tracking pixels to keep the survey from reappearing.
Revised invite
I created a new icon and changed the orientation of the survey invite to sit on the right side of the page. To ensure we had a decent response rate we maintained the 3 second expanded view when the page loaded. The location would now not cover any important information or functionality when initially open. When closed it would be much smaller and less annoying.
When creating the icon we tested it quickly with a few people. The initial icon I created did not work at all. It was two hands, one with a thumbs up and the other with a thumbs down. Everyone perceived this to be the place to submit a rating for the product. So I revised the icon to be a pen with several lines. This tested much better with people recognizing it almost immediately as a place to send feedback. I had also considered an envelope, but with so few people writing letters and physically mailing feedback, I did not feel this would be relevant globally.
New expanded view
New collapsed view
After 3 seconds the banner will collapse down to just an icon. When a person hovers or clicks on the tab it will expand out again.
Result
The new survey invite completely reduced the complaints that the previous invite had received while still maintaining a significant response rate. Having the invite appear as expanded on the initial page load for 3 seconds helps people to know what the icon represents without having to interact with the element later.