Garnier planned on a campaign to promote their hairline products. The PKT creative team pitched to create a mini campaign consisting of a campaign (mini) site with a hairstyle look book with detailed instructions and products.
The competition tie-in was to encourage users to take a photo of their new "hair look" and post it on Instagram during the submission period.
After the submission period, friends and family could vote on Instagram and on the campaign site for the best hair look. The photos would be dynamically reorganized on the website based on the number of votes. The most-voted photo would show at the top of the page. The actual number, however, would not be disclosed.
For the Garnier team this was the first project diving into responsive design. It was a bit of an undertaking to explain to the designer how to break the page elements down into a boxy layout, while still maintaining a fluid-looking design.
The biggest knowledge gap was how design breaks down into coding elements and interaction patterns on mobile. (For example: A photo box in a wire layout does not indicate a cropped image, but just an image area.)
The other challenge was to integrate the approved Instagram campaign vendor with the proposed website structure. Some of the issues we were facing involved how to manage the user’s expectations after submitting via Instagram.
The tech lead, Hector L., the interactive producer and I worked very closely together to make recommendations and to define the constraints for Frank T., UX designer, to create the final userflow.
Questions we had
- How would we keep the user engaged and help them reach out to friends as soon as the competition started?
- Would a reminder email, Facebook wall post or other trigger provide a fair chance for the user to promote his or her submission?
- Should the picture with the most votes be posted at the top of the page? Would that be unfair?
- Can the user submit more than one picture?
- If the answer is yes, then would all the combined votes help the user win or would the single picture with the highest vote count be the winner?
Wireframes & Handing Off the Project
I designed the first set of desktop and mobile wireframes after whiteboarding with the creative team.
I passed them off to Frank Tufano, so he could continue to work closely with the creative team to complete the wireframes and the annotations. He continued to lead the project and work closely with the development team until the site launched under my supervision.