The document summarizes the creative process for redesigning Pampers.com, including conducting research on personas, competitors, and concepts. Three concepts were created and one was selected for further development. Wireframes, site flows, content, and localization guides were then developed to create the new global website.
2. Introduction
The purpose of this document is to illustrate the process in which my team
went through for the global redesign of Pampers.com.
The live date in North America was November 1st 2008 (phase 1.0).
2
3. Table Of Contents
1 Background
Challenge, Business Goals & Considerations 5
Competitive Scan 6
Persona Development 7
Creative Concepts
2 Design Key
Brainstorm & Initial Sketches
9
10
Concept Development 11
Concept User Testing 12
Concept User Testing Quotes 13
Development
3 Site Flows, Site Architecture & Wireframes
Content, Copy & Taxonomy
14
15
Creative Refinement 16
Style & Localization Guides 17
3
4. 1
Background
Challenge, Business Goals & Considerations 5
Competitive Scan 6
Persona Development 7
4
5. Background: Challenge, Business Goals & Considerations
Challenge
Create a global experience that connects moms to resources to best care for
her baby’s development with best-in-class information, community and tools.
Business Goals
»» Hook mom at the point of entry and keep her in the Pampers franchise for
the lifespan of her baby
»» Build the Pampers brand that cares for your baby’s development
Considerations
The site must be:
»» Global
»» Translated into 20+ languages
»» Search Engine Optimization (SEO) friendly
»» Accessibility Compliant
»» Consistent with the offline style guide
5
6. Background: Competitive Scan
Parenting Sites
A competitive scan was conducted to review the best-
in-class parenting information sites. We learned that
there are a lot of these sites out there but very few
have everything under one umbrella.
Product Sites
We reviewed a wide range of product sites to research
new and interesting ways for the new and experienced
users to find the exact product they are looking for and
also to enhance the buying experience.
Social Network/Community Sites
Our target audience is becoming more and more saavy
with all of the social networking and community sites,
therefore, it was important to review the functionality
of these sites and take-away what was most widely
used among moms.
6
7. Background: Persona Development
Overarching Personas
In order to truly create the best website
experience, we need to understand who are
users are and spend some time in their shoes.
Based off of existing research from P&G, we
expanded and created these personas to
include mom’s online habits.
Global Considerations
Because moms are different in every country,
we conducted research to view and document
these differences to make sure we were being
holistic in our approach.
7
8. 2
Creative Concepts
Design Key 9
Brainstorm & Initial Sketches 10
Concept Development 11
Concept User Testing 12
Concept User Testing Quotes 13
8
9. Creative Concepts: Design Key
Look & Feel
Building off of the high-level global
styleguide, which was created by another
agency, we created an online design key.
This design key was used to get initial buy-
in from the client on the look and feel.
From here, we were able to jump into
brainstorming and concepts.
9
11. Creative Concepts: Concept Development
Three different creative concepts were created and shown to the client. The look and feel of concept two was selected.
Concept 1 Concept 2 Concept 3
11
12. Creative Concepts: Concept User Testing
Flash Demo
For concept testing, we built out a few pages to
illustrates our full vision. Overall, the demo site
tested very well with consumers.
The test was conducted in 2 countries: United
States and United Kingdom.
12
13. Creative Concepts: Concept User Testing Quotes
“...from pregnancy all the way “There is so much on this website...
through the stages of development more to choose from.”
and me and my family”
“I would change it
to my homepage!”
“...very easy to navigate”
“The easiest site that I have
been on in a long time.”
“It’s more than just a
product site.”
13
14. 3
Development
Site Flows, Site Architecture & Wireframes 14
Content, Copy & Taxonomy 15
Creative Refinement 16
Style & Localization Guides 17
14
15. Development: Site Flows, Site Architecture and Wireframes
Site Flows
For complex paths, like registration and
account information, flows were developed in
order to help assist the development team.
Site Architecture
A site architecture was also created to show
hierarchy of the site.
Wireframes
Overall, site wireframes were developed to aid
in the creation of most pages for the site.
15
16. Development: Content, Copy & Taxonomy
Content
All of the exiting content required an overhaul to match with the newly proposed redesigned site. Content was scrubbed, enhanced or deleted.
Copy
The tone of the copy was also reviewed based on the style guide, whereas, it is much less clinical and more “real”.
Taxonomy
An extensive taxonomy was created for the redesign site to tie in with the new structure of the site. The content analysis reviewed every piece of
content and labeled it with tags.
16
17. Development: Creative Refinement
Icon Development
A variety of icons were developed for the
new site. This ranges from small content
type icons (eg: articles, videos...) to larger
fun and whimsical category type icons (eg:
development, feeding...).
E-mail Creation
In addition to a new site redesign, a new
e-mail campaign had also been developed.
Section Builds
After the creative had been signed off on,
all of the many sections were built out (eg:
products, tools, activities..).
17
18. Development: Style & Localization Guides
Style Guide
In order to remain consistent among the
internal designers and creative people in other
locales, a comprehensive and detailed style
guide was created.
Localization Guide
Because my team was tasked with creating
global templates to hand off to other locales,
a Localization Guide was created. This guide
was to help every locale understand exactly
what was required for a successful launch.
18