SouthParkStudios.Com

Before & After Evaluation.This exercise took the Main Home/Landing page as well as the “Watch Full Episodes”

page and developed a new visual design for each.

The original Landing & Home page for SouthParkStudios.Com with 3 key areas that I focused on to re-envision:

The main Header/HUD

The featured content viewer

Content below the fold

SUMMARY of Homepage Analysis

Full size images in the Appendix

1. Revised header that can stay consistent from page to page and simplified.

2. A featured content carousel similar reprising popular visual language from higher traffic sites

3. Scrolling content visible above the fold

SUMMARY of Homepage Revisions

Full size images in the Appendix

1. Revised headerBREAKDOWN of Homepage Revisions

Original Version

Revised Version

• Reduced the amount of varying sizes of fonts and information groups• Prioritized user login & registration for encouraged interaction hierarchy

reading left to right• Simplified search bar removing the container to utilize space more effectively• Made the social network icons more prominent• Designed to have the ability to remain fixed while content scrolls beneath on

other site pages

Full size images in the Appendix

BREAKDOWN of Homepage Revisions

Original Version

Revised Version

Horizontal subcategories are very small and only active on mouse-over. Very easy to mouse-off when moving cursor from original category to far left

1. Revised header

Vertically aligned

mouse-over callout and

larger subcategory

buttons

Full size images in the Appendix

BREAKDOWN of Homepage Revisions2. Revised featured content carousel

Adopting a featured content carousel similar to more popular high traffic sites like Google Play can be less disruptive and more encouraging for to interact with the content

comfortably with the familiar visual language for presenting material.

Full size images in the Appendix

BREAKDOWN of Homepage Revisions3. More content immediately visible and accessible above the fold

Original version has a large quantity of content that is not visible when a

user arrives at the site.

Revised version allows space to include the previously unseen content on arrival by moving the banner ad to the episode

viewer page.

Full size images in the Appendix

SUMMARY of “Watch Full Episodes” Analysis

Original Versions

1. Inconsistent header/HUD and information than other pages.

2. Unused negative space requiring user to scroll to browse episodes. Also, the header is not fixed so when browsing episode content they lose the top navigation.

3. Horizontal browsing reveals information vertically segregating users ease of navigation

Full size images in the Appendix

SUMMARY of “Watch Full Episodes” Revisions

Revised Versions

1. Consistent header/HUD that can remain fixed when scrolling. Applicable to Episodes page as well as others

2. Vertically oriented browsing of episodes

3. Additional space below fold for additional engagement

Full size images in the Appendix

BREAKDOWN of “Watch Full Episodes” Revisions

Information and interaction now flows from left to right like reading.

Revised Versions

Taking cues from higher traffic sites like Google, Amazon, Facebook with categories to the left browsing is more intuitive. By tapping into pre-established visual language and navigation new and existing users will be able to access the content with less friction.

Category behavior expands and contracts like Google/Gmail sidebars & Amazon filters.

Full size images in the Appendix

BREAKDOWN of “Watch Full Episodes” Revisions

Revised Versions

n

Episode information is now in a mouse-over callout to optimize screen space and ease to access information.

With the episode browser at the side, users can simultaneously browse, watch, comment and share with deeper, less segmented engagement.

Full size images in the Appendix

APPENDIX: Full Size Before & After Images

Designs are based on a 1024x768 screen size and a 980x520 browser window.

Before

Full size images in the Appendix

APPENDIX: Full Size Before & After Images After

Full size images in the Appendix

APPENDIX: Full Size Before & After Images Before

Full size images in the Appendix

APPENDIX: Full Size Before & After Images After 1/4

Full size images in the Appendix

APPENDIX: Full Size Before & After Images After 2/4

Full size images in the Appendix

APPENDIX: Full Size Before & After Images After 3/4

Full size images in the Appendix

APPENDIX: Full Size Before & After Images After 4/4

Full size images in the Appendix

Presentation by:

Mike White510.851.1085

http://www.linkedin.com/in/mikewhitemwfproductions@gmail.com

Full size images in the Appendix