Overview

P&G’s Metamucil brand asked Publicis Kaplan Thaler for help in designing a competition to award $100K to a worthy charity.  

The competition was designed into three phases.  Each phase would reside and replace the next one on the campaign page DoMoreThanYouThink.com.

The campaign site drivers were banner ads, social media and Metamucil properties (website).


client briefing > requirement gathering >  ux deliverables

Campaign Structure

submit_button.png

Phase 1

Using the Metamucil campaign website, a consumer could submit an organization name, address and contact information, along with a brief story about why the charity should win the competition.

Using the Metamucil campaign website, a consumer could submit an organization name, address and contact information, along with a brief story about why the charity should win the competition.

Phase 2

A panel would pre-select the top 10 organizations, writers and their compelling stories. The selected organization and its stories are posted on the campaign page for public voting.

Phase 3

The winning organization would be featured on the campaign home page.

 

UX Function Definition

Although the high-level wireframe concept of Phase 1 had been sold to the client before the project kick-off, the project brief left some room for us to define the UX role on the project and how the campaign would be implemented.

The most important question that needed to be answered was how the campaign site would be designed. Would it be responsive, adaptive or just be designed for desktop (i.e. mobile would view a miniature desktop site)?

The major concerns and discussion depended on the drivers and overall sharing function. The campaign was heavily dependent on sharing stories and relied on users posting to social media that they just participated in voting for a worthy cause.

My recommendation was to design the site responsive with mobile, tablet and desktop breakpoints.   We could implement only mobile and desktop because of some constraints. I provided a 768-pixel breakpoint for mobile with a liquid responsive design.  This would help us to at least capture some of the smaller tablets or over-sized smart phones.

Adding Facebook Connect

I also suggested we include FaceBook (FB) Connect during the voting phase instead of the generic email registration process.  

FB would automatically post to the consumer wall that he/she just participated in the DoMoreThanYouThink campaign and voted for x organizations.  The wall post would also allow his/her friends to participate in the competition. We hoped to allow the consumer to add a personalized message to the post, but we encountered some other roadblocks while trying to implement that feature.

Sharing that You Voted

I also added a “Thank You” page with social media sharing buttons. 

By adding the social media buttons, we enabled the consumer to promote an organization, the campaign and add personal messages.


Proto-Typing Tool

Joni O. and I were also on-boarding some team members about how to think about and design for responsive design.  We reviewed various software programs, such as Axure and JustinMind, and evaluated each one’s ability to build a responsive prototype. JustinMind was promising.

We built an interactive responsive prototype for the team for Phase 2. Before the internal review of the wires, we sent a link out to allow the team to view the mobile prototype. It was great to see the team members testing and playing with the prototype.

 

Handing Off the Project

After the concepting of the Phase 1 and Phase 2 homepages, I passed on the wireframe to Joni Osuga for completion.  She designed all the interior pages and wrote the functional specifications under my supervision.

Final Design  Art Director: Micheline Hess; Junior UX Designer: Joni Osuga

Final Design 

Art Director: Micheline Hess; Junior UX Designer: Joni Osuga