Eukanuba.com and Iams.com

Design and development process for responsive web site

the PROBLEm

Users can’t find anything. The lack of maintenance, reusability, content management and integration management are the key factors identified as the defects in the current website.

our Solution

The objective of the Iams Website is to administer the site from a single CMS managed platform. The intent of the redesign is to create a scalable, robust architecture so that the site can be rolled out for any other locales with minimum set of changes and efforts. This will help in low website maintenance cost, easy integration process with other 3rd party systems using freely available open source frameworks on Java based platform. The website will also fulfill all P&G Accessibility, Security and Privacy guidelines, which will thereby minimize security risk and maximize business activity on a B2C protocol. 

my role

I was Lead of the UX team and responsible for the experience strategy and managing the design process of the responsive web application. I led the UX work, producing all major deliverables and artifacts, presenting these to the client. I lead the team in design sprints to diverge and generate concepts and then converge and validate those concepts.

Maintenance, reusability, content management and integration management are the key factors identified for current website development.

Following are the recommendations for redesigning:

• Modular based approach is recommended for website low cost maintenance. This involves breakup of the website into independent modules and management of these modules separately.

• Reusable components for Channel Intelligence, Bazaar Voice, Salesforce.com and Facebook integration will be reused. 

• Identification of Content based Configurable Items and employment of a highly efficient CMS tool for managing website content. This also includes SEO based recommendation guidelines to be configurable at the CMS end for high page ranking on Search Engine

Improvements in DESIGN and re-platform website over the existing website

1 Accessibility Issues - We discovered multiple accessibility issues in the existing web sites. All these issues will be taken care of in the re-platform version of the website.

2 SEO Issues - We reported some SEO issues on the existing iams websites. We will follow both iProspect and We SEO guidelines to ensure there are no accessibility issues.

3 User Interface Issues - There are several UI issues in the website that does not work across browsers. The re-platform website will have all these issues resolved and the website will appear same in all agreed web browsers.

4 Performance Issues - There are performance issues on the website and there are several pages on the website which have very high response time. We will ensure that there are no performance issues on the re-platform website. We will perform load & stress test in SIT to check performance issues.

5 Nutritional Consultant Overlay - The re-platform website will have a separate Nutritional Consultant page. The Nutritional Consultant flash file will open in a new window. This will help in avoiding JavaScript and cross-browser issues.

6 Site search - The re-platform website will use Google Search Appliances to search within the website. The GSA is known for its performance and relevance of search content.

7 Skip Navigation - The skip navigation is not implemented on the website currently. The re-platform website will Skip Navigation feature that will help users to use navigation through keyboard rather than only using with mouse.

8 Related Articles Component - In the re-platform website, the related article component will be configurable to show number of articles in the section. So, there won't be a limitation to show 3 articles every time.

9 Printer Friendly Pages - The current website does not have well defined Printer Friendly pages. The new re-platform website will have the same.

The key requirements/considerations for this project are as follows:

Site - Create and develop the Eukanuba and Iams website templates for UK, France & Russia to support the brand with the primary goal of educating visitors about the brand and product offerings with drive to purchase as a secondary goal.

Mobile - Provide on-demand engagement through mobile in a meaningful and easy to use way

• Leverage the premium look & feel with dramatic imagery that reflects the Eukanuba and Iams brand equity

• Integrate content sections into the master template architecture

• Add the calendar, notification and cart tools to guide the consumer

• Integrate the Facebook/YouTube elements into the site

• Promote the newsletter and business stage content

• Improve visibility in search by converting flash content into format that can be indexed by search engine

• Flexibility and easy to add modules to allow for versioning for other local markets

Audit the existing Eukanuba and Iams content to get a detailed understanding of the material and the relationships within the content. This understanding will allow us to develop an information structure that provides users with easy access to the most compelling content and a frictionless experience in navigating the site.

• Ensure that the tone and messaging support the overall goals of the site.

• Insight into the metrics and analysis that formed the basis of the site refresh goals

• Data that is helpful in metadata tagging, copywriting, and other SEO activities

• Messaging points, metrics, and customer journey insights for both Eukanuba and Iams and Eukanuba and Iams that provide a framework for understanding the marketing goals

• Detailed understanding of Eukanuba and Iams page templates that will be helpful in mapping Eukanuba and Iams content to those templates

• Description of software interaction with external environments and functional application design

• User satisfaction information that will inform navigational structure decisions

• Accessibility and privacy guidelines

My contributions included:
DISCOVERY & RESEARCH
Product Strategy
User Persona Definition
UI/UX Assessment
Focus Groups
Content Audit
Taxonomy
Experience Maps

IDEATION
Design Workshops
Card Sorting
User Stories & Scenarios
Customer Journey Mapping
Usability Audit
Storyboarding
Rapid Prototyping
Information Architecture
Site Maps
Low Fidelity Wireframes

REFINEMENT
High Fidelity Wireframes
UI Visual Design
Clickable Interactive Prototypes
Pixel Perfect Comps
Design Assets
Visual Design Style Guide
Interaction Library Development
Technical Specifications