Digital Process
0 likes2,122 views
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.
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 babys 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 babys 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 moms 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. Its 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
- 19. Thank You! 19