Coopervision
Promoting a new product line through interactive web design
Overview
Coopervision is a global provider of contact lenses. To address the problems associated with increased screen time with contact lens users, they released a new product line called Biofinity Energys.
The Problem
Coopervision needed a landing page that would inform current customers as well as new customers and providers about the benefits of using their new line of contacts. They wanted a way to capture the users attention and ultimately capture a lead. To meet the demands of their product launch, we had to work fast to meet their tight deadline.
The Solution
I worked with a team members from various departments to iterate designs fast using the SCRUM framework. Working in week long sprints allowed us to design, test and redesign before handing over a final solution to the client. The final design included interactive elements to keep the user engaged, while staying within the limitations of their desired CMS platform.
The Process
Iteration #1
We wanted to Hero section to immediately catch the viewers attention and cause them to scroll down to find out more. My first iteration was to have the Hero copy "show and tell" what the problem was. The following sections were designed to continuously lead the user further down the page and ultimately signing up for a Free Trial.
We found that this initial design lacked structure and had the user scrolling for too long without any reward or call-to-action, risking a high bounce rate.
Iteration #2
For the next iteration, wireframes were created first to focus on the user experience and avoid wasting time on the design. We went with something a little more structured, but would still retain the interactivity and animations to keep the user engaged. In order to achieve this we brought the developer into the conversation to find out exactly the capabilities were in terms of animation and interactivity.
Instead of taking the user down a long path as shown in the first iteration, the new flow would introduce new information in sections, where we would then include animations and interactivity to hold the user attention. We added a progress indicator so the visitor would know how long they have to scroll and where they were in the website.
Iteration #3
After testing iteration #2, we found a few weaknesses. The website progress navigation should remain in the same spot on the left-hand side throughout the site to avoid confusion. Because of this, we decided to keep the same structure throughout the site—large photo on the left half, and the right half would be split between photo and copy. The call-to-action was not very noticeable, so we created a button for each section asking the user to sign up for a free trial.
Key Takeaways
- User experience is more important than design.
- There needs to be a clear call-to-action for each section of a website.
- Iterating and testing in an agile environment allows usability problems to be worked out quickly prior to launching to help avoid losing potential customers.
- Communication across all teams is crucial to creating a successful end product.