SlideShare uma empresa Scribd logo
1 de 19
Creative Process Doc




                                  1
By Crista Conaty September 2008
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
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
1
    Background
    Challenge, Business Goals & Considerations	   5
    Competitive Scan	                             6
    Persona Development	                          7




                                                      4
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
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
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
2
    Creative Concepts
    Design Key	                       9
    Brainstorm & Initial Sketches	   10
    Concept Development	             11
    Concept User Testing	            12
    Concept User Testing Quotes	     13




                                          8
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
Creative Concepts: Brainstorm & Initial Sketches




                                                   10
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
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
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
3
    Development
    Site Flows, Site Architecture & Wireframes	   14
    Content, Copy & Taxonomy	                     15
    Creative Refinement	                          16
    Style & Localization Guides	                  17




                                                       14
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
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
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
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
Thank You!




             19

Mais conteúdo relacionado

Mais procurados

How to Overhaul Your Design Without Upsetting Your Users
How to Overhaul Your Design Without Upsetting Your Users How to Overhaul Your Design Without Upsetting Your Users
How to Overhaul Your Design Without Upsetting Your Users
Mary Piontkowski
 
Collaboration between design and engineering
Collaboration between design and engineeringCollaboration between design and engineering
Collaboration between design and engineering
吉閔 鄭
 
Macadamian product camp - uxd for product managers research and design tech...
Macadamian   product camp - uxd for product managers research and design tech...Macadamian   product camp - uxd for product managers research and design tech...
Macadamian product camp - uxd for product managers research and design tech...
Dan Arra
 
Gamification POV
Gamification POVGamification POV
Gamification POV
tcander
 
Cohesion brand intoduction
Cohesion brand intoductionCohesion brand intoduction
Cohesion brand intoduction
Paul Bailes MCSD
 

Mais procurados (20)

Skills matter marcm
Skills matter   marcmSkills matter   marcm
Skills matter marcm
 
Workflow: The Art of Getting Unstuck
Workflow: The Art of Getting UnstuckWorkflow: The Art of Getting Unstuck
Workflow: The Art of Getting Unstuck
 
User Experience Design
User Experience DesignUser Experience Design
User Experience Design
 
How to Overhaul Your Design Without Upsetting Your Users
How to Overhaul Your Design Without Upsetting Your Users How to Overhaul Your Design Without Upsetting Your Users
How to Overhaul Your Design Without Upsetting Your Users
 
Rapid User Research - a talk from Agile 2013 by Aviva Rosenstein
Rapid User Research - a talk from Agile 2013 by Aviva RosensteinRapid User Research - a talk from Agile 2013 by Aviva Rosenstein
Rapid User Research - a talk from Agile 2013 by Aviva Rosenstein
 
Lean Startup: Flowdock's Journey to Product-Market Fit
Lean Startup: Flowdock's Journey to Product-Market FitLean Startup: Flowdock's Journey to Product-Market Fit
Lean Startup: Flowdock's Journey to Product-Market Fit
 
MDW NY | Matt Howell_New Teams and Process for Making Digital Work
MDW NY | Matt Howell_New Teams and Process for Making Digital WorkMDW NY | Matt Howell_New Teams and Process for Making Digital Work
MDW NY | Matt Howell_New Teams and Process for Making Digital Work
 
Collaboration between design and engineering
Collaboration between design and engineeringCollaboration between design and engineering
Collaboration between design and engineering
 
Practicing What We Preach: designing usage centered deliverables
Practicing What We Preach: designing usage centered deliverablesPracticing What We Preach: designing usage centered deliverables
Practicing What We Preach: designing usage centered deliverables
 
Macadamian product camp - uxd for product managers research and design tech...
Macadamian   product camp - uxd for product managers research and design tech...Macadamian   product camp - uxd for product managers research and design tech...
Macadamian product camp - uxd for product managers research and design tech...
 
UxD For Product Managers (Heroes)
UxD For Product Managers (Heroes)UxD For Product Managers (Heroes)
UxD For Product Managers (Heroes)
 
Lean Enterprise
Lean Enterprise Lean Enterprise
Lean Enterprise
 
Evolving the Creative Process
Evolving the Creative ProcessEvolving the Creative Process
Evolving the Creative Process
 
Gamification POV
Gamification POVGamification POV
Gamification POV
 
Collaboration Tools to Create Better Products
Collaboration Tools to Create Better ProductsCollaboration Tools to Create Better Products
Collaboration Tools to Create Better Products
 
Curating Remarkable Experiences Through Experience Design
Curating Remarkable Experiences Through Experience DesignCurating Remarkable Experiences Through Experience Design
Curating Remarkable Experiences Through Experience Design
 
Pull | Experience Design
Pull | Experience DesignPull | Experience Design
Pull | Experience Design
 
iAxil Lunch Talk - Lean UX
iAxil Lunch Talk - Lean UXiAxil Lunch Talk - Lean UX
iAxil Lunch Talk - Lean UX
 
Defeating Babel: 4 Strategies for Better Design Communication in Agile
Defeating Babel: 4 Strategies for Better Design Communication in AgileDefeating Babel: 4 Strategies for Better Design Communication in Agile
Defeating Babel: 4 Strategies for Better Design Communication in Agile
 
Cohesion brand intoduction
Cohesion brand intoductionCohesion brand intoduction
Cohesion brand intoduction
 

Semelhante a Digital Process

So you wanna build something? Now what?
So you wanna build something? Now what?So you wanna build something? Now what?
So you wanna build something? Now what?
Siddhi
 
Take advantage of new trends in agile: Iterationless Kanban and Continuous De...
Take advantage of new trends in agile: Iterationless Kanban and Continuous De...Take advantage of new trends in agile: Iterationless Kanban and Continuous De...
Take advantage of new trends in agile: Iterationless Kanban and Continuous De...
Atlassian
 

Semelhante a Digital Process (20)

Portfolio Pitch
Portfolio PitchPortfolio Pitch
Portfolio Pitch
 
Customer Experience Strategy & Design Thinking Toolkit
Customer Experience Strategy & Design Thinking ToolkitCustomer Experience Strategy & Design Thinking Toolkit
Customer Experience Strategy & Design Thinking Toolkit
 
So you wanna build something? Now what?
So you wanna build something? Now what?So you wanna build something? Now what?
So you wanna build something? Now what?
 
Content Strategy for the Web
Content Strategy for the WebContent Strategy for the Web
Content Strategy for the Web
 
So you wanna build something now what
So you wanna build something now whatSo you wanna build something now what
So you wanna build something now what
 
50 UX Best Practices (By Above the Fold)
50 UX Best Practices (By Above the Fold)50 UX Best Practices (By Above the Fold)
50 UX Best Practices (By Above the Fold)
 
Design that Scales: Methods and best practices to grow gracefully
Design that Scales: Methods and best practices to grow gracefullyDesign that Scales: Methods and best practices to grow gracefully
Design that Scales: Methods and best practices to grow gracefully
 
What is Product Management
What is Product ManagementWhat is Product Management
What is Product Management
 
Co-Creation Forum presents: How Brands can Derive Insight from Co-Creation
Co-Creation Forum presents: How Brands can Derive Insight from Co-CreationCo-Creation Forum presents: How Brands can Derive Insight from Co-Creation
Co-Creation Forum presents: How Brands can Derive Insight from Co-Creation
 
Take advantage of new trends in agile: Iterationless Kanban and Continuous De...
Take advantage of new trends in agile: Iterationless Kanban and Continuous De...Take advantage of new trends in agile: Iterationless Kanban and Continuous De...
Take advantage of new trends in agile: Iterationless Kanban and Continuous De...
 
Stget final
Stget finalStget final
Stget final
 
Future Visioning
Future VisioningFuture Visioning
Future Visioning
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience Workshop
 
A Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface DesignA Developer’s Guide to Interaction and Interface Design
A Developer’s Guide to Interaction and Interface Design
 
Understanding Information Architecture
Understanding Information ArchitectureUnderstanding Information Architecture
Understanding Information Architecture
 
Plan, Adapt, Emerge: Unthinkable keynote to the Arts Marketing Association
Plan, Adapt, Emerge: Unthinkable keynote to the Arts Marketing AssociationPlan, Adapt, Emerge: Unthinkable keynote to the Arts Marketing Association
Plan, Adapt, Emerge: Unthinkable keynote to the Arts Marketing Association
 
Web Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More AwesomerWeb Usability: Making Your Sites More Awesomer
Web Usability: Making Your Sites More Awesomer
 
Agile 10 Step Story Model
Agile 10 Step Story ModelAgile 10 Step Story Model
Agile 10 Step Story Model
 
UX South Africa 2014 - Keynote
UX South Africa 2014 - KeynoteUX South Africa 2014 - Keynote
UX South Africa 2014 - Keynote
 
Leading Agile Product Discovery
Leading Agile Product DiscoveryLeading Agile Product Discovery
Leading Agile Product Discovery
 

Digital Process

  • 1. Creative Process Doc 1 By Crista Conaty September 2008
  • 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
  • 10. Creative Concepts: Brainstorm & Initial Sketches 10
  • 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