• Like
South Park Studios Case Study
Upcoming SlideShare
Loading in...5
×

South Park Studios Case Study

  • 241 views
Uploaded on

Take your favorite website or online Application and explore ways of visually improving it. Include an explanation or narrative for why your suggestions would be better.

Take your favorite website or online Application and explore ways of visually improving it. Include an explanation or narrative for why your suggestions would be better.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
241
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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.
  • 2. SUMMARY of Homepage Analysis The original Landing & Home page for SouthParkStudios.Com with 3 key areas that I focused on to re-envision:The mainHeader/HUDThe featuredcontent viewerContent below the fold Full size images in the Appendix
  • 3. SUMMARY of Homepage Revisions 1. Revised header that can stay consistent from page to page and simplified.2. A featuredcontentcarousel similarreprisingpopular visuallanguage fromhigher trafficsites3. Scrollingcontent visibleabove the fold Full size images in the Appendix
  • 4. BREAKDOWN of Homepage Revisions 1. Revised headerOriginal VersionRevised 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
  • 5. BREAKDOWN of Homepage Revisions 1. Revised headerOriginal 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 leftRevised Version Vertically aligned mouse-over callout and larger subcategory buttons Full size images in the Appendix
  • 6. BREAKDOWN of Homepage Revisions 2. Revised featured content carousel Adopting a featured content carousel similar to more popular high traffic sites likeGoogle 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
  • 7. BREAKDOWN of Homepage Revisions 3. More content immediately visible and accessible above the foldOriginal version has a large quantity Revised version allows space to includeof content that is not visible when a the previously unseen content on arrival user arrives at the site. by moving the banner ad to the episode viewer page. Full size images in the Appendix
  • 8. SUMMARY of “Watch Full Episodes” Analysis Original Versions1. Inconsistent header/HUDand information than otherpages.2. Unused negative spacerequiring user to scroll to browseepisodes. Also, the header isnot fixed so when browsingepisode content they lose thetop navigation.3. Horizontal browsingreveals information verticallysegregating users ease ofnavigation Full size images in the Appendix
  • 9. SUMMARY of “Watch Full Episodes” Revisions Revised Versions1. Consistent header/HUDthat can remain fixed whenscrolling. Applicable toEpisodes page as well asothers2. Vertically orientedbrowsing of episodes3. Additional spacebelow fold foradditional engagement Full size images in the Appendix
  • 10. BREAKDOWN of “Watch Full Episodes” Revisions Revised VersionsInformation and interaction nowflows from left to right likereading.Category behavior expandsand contracts likeGoogle/Gmail sidebars &Amazon filters.Taking cues from higher trafficsites like Google, Amazon,Facebook with categories tothe left browsing is moreintuitive. By tapping into pre-established visual languageand navigation new andexisting users will be able toaccess the content with less Full size images in the Appendixfriction.
  • 11. BREAKDOWN of “Watch Full Episodes” Revisions Revised VersionsEpisode information is now in amouse-over callout to optimizescreen space and ease to accessinformation. nWith the episode browser at theside, users can simultaneouslybrowse, watch, comment andshare with deeper, lesssegmented engagement. Full size images in the Appendix
  • 12. APPENDIX: Full Size Before & After Images Before Full size images in the AppendixDesigns are based on a 1024x768 screen size and a 980x520 browser window.
  • 13. APPENDIX: Full Size Before & After Images After Full size images in the Appendix
  • 14. APPENDIX: Full Size Before & After Images Before Full size images in the Appendix
  • 15. APPENDIX: Full Size Before & After Images After 1/4 Full size images in the Appendix
  • 16. APPENDIX: Full Size Before & After Images After 2/4 Full size images in the Appendix
  • 17. APPENDIX: Full Size Before & After Images After 3/4 Full size images in the Appendix
  • 18. APPENDIX: Full Size Before & After Images After 4/4 Full size images in the Appendix
  • 19. Presentation by: Mike White 510.851.1085http://www.linkedin.com/in/mikewhite mwfproductions@gmail.com Full size images in the Appendix