south park studios case study
DESCRIPTION
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.TRANSCRIPT
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/[email protected]
Full size images in the Appendix