Petco Re-Design Final Set

Here is the entire set for the Petco Re-design project. This set includes the design brief, the mood board, the site map, 6 wireframes and 6 designed pages.

Re-Design Brief

This page shows the Petco home page before being signed into Pet Talk Place.

This page shows an example of a shopping page for a dog owner when they are signed into Pet Talk Place (with the answers module open)

This page shows the settings under the customize button. The user can select what they would like to view.

This page shows the customization of a small animal owner and the answers module open.

This page shows what the user would see when they click on news feed (current friend updates and posts)

This page shows the Friends and Images module open.

Petco Re-design Finals

The wireframes have come to life and this is the complete set of six new examples of the new re-designed site for Petco (using Pet Smart and Facebook)

Home page of the new Petco when the user is not signed in.

Example of a shopping page (Dog) also showing the signed in, collapsed side bar.

Settings to customize (what the user will see on their primary nav, home page, and news feed)

Side bar showing the friends and images modules open.

Shows the most recent updates in the module

Shows the entire news feed, including old posts too

Updated Wireframes

Here is the set of new wireframes that were created by our group incorporating a different look to the Pet Talk Place side bar. Showing off the features and aspects of different pages that we are creating for the finals.

Home page (not signed in)

Shopping page

Settings for customization

News feed in the side bar

News feed when clicked on from the primary navigation

Side bar modules (friends and images)

Design Phase cont.

After the first round of separate designs, our group came together to improve our design to incorporate a humorous and clean look for the petco site. We incorporated different elements from each design and came up with this set of webpages for the first round of comps. Each group member worked on two pages and we came together to make sure everything looked consistent.

New home page before the user is signed into Pet Talk Place.

Settings option 1 (customizable by the user)

Settings option 2 (customizable by the user)

News Feed and sample of side bar with updates to check out.

About/Profile page for the user

Images page including profile pictures and uploads from the user

Friends page that the user can navigate to find their friends’ pages.

Design Phase

The first round of design for the new Petco site. Each group member was assigned to create a look for the website. Here is the design direction that I explored during the first round of the design phase.

Home page full view

Home page that cuts off on the fold line of the some browsers

The users’ about opage when signed into PTP

Design Sketches

Here are some sketches that were done with the group to decide what would be shown on each new page for the Petco Re-design.

Petco Wireframes Round 1

This is the first set of wire frames including all aspects of the our new re-designed website.

When the user is not signed in

Another idea before being signed in (after the first critique)

After the user is signed in to my Petco

Settings options

For example of a dog and cat owner

For example a reptile owner

This would be displayed dint he notifications bar that can be expanded to view the new updates

Notifications furthered explored

Used as a profile page for the user to see their own information

This is where the user can view their own photos (profile pictures & uploads)

Users can see the friends they have made

Large version of the Pet Talk Place news feed

Petco Site Maps

Our group created two site maps. One for the main website when you first pull it upon your browser and then one for the my Petco site when you are logged into the new feature of Pet Talk Place. The site map for the re-designed site shows an example of what someone might choose to view in their primary navigation if they owned a dog and cat. The Pet Talk Place category on the end represents the new side bar and what would be showing right hand side of the site, which not be located in the primary navigation.

The different tiers show the navigation of the user.

The different tiers show the navigation of the user.

Petco Re-design Brief

Below is a link to the design brief that our group wrote up describing our new and improved re-designed Petco site.

Petco Re-Design Brief