Kara Hodecker's profile

Yahoo.com Design Language

Web Design
Yahoo.com Design Language
An initiative to let users customize and personalize what they see on their Yahoo.com homepage and follow topics they are interested in, so their Yahoo experience becomes much more relevant and meaningful every day.
While at Yahoo!, I became the visual design lead for a new homepage initiative. Working in conjunction with a fairly large team of visual, interaction and UX designers, my role was to develop a new visual language for Yahoo's content consumption experience. Beginning with the homepage, as well as "topic" pages, I developed a modular grid system in which to display different types of content – articles, photos, videos, tweets, etc. Each module would contain the content title, source, date, a topic, and other relevant information, such as if a friend shared or recommended it to you, or if it was a curated "Editor's Pick." 
 
Content Modules
Content can be given a social attribution (shared, recommended or read by a friend), a community attribution (most read, most shared, trending now), or editorally curated (breaking news, top news, editor's picks, specific events). 
 
The attributions would display on the bottom of the modules. Clicking or tapping on the attribution would navigate to an aggregated view of similarly tagged content (i.e. all of the top news). 
Topic Landing Pages
Follow topics and create collections of your interests to get the content that's relevant to you. 
A simplified reading experience
View articles with less distractions. Relevant associations such as related topics and content, user comments, and share options are all easily accessible when you want them, but not cluttering the page. Quickly swipe for more content instead of relying on the browser back button.
 
Page layouts are optimized so you get the ideal reading experience whether you are viewing content on desktop, tablets or phones.
Initial Explorations
Some early explorations of the visual design of content modules, page and article layouts.
Yahoo.com Design Language
Published:

Yahoo.com Design Language

Let users customize and personalize what they see on their Yahoo.com homepage and follow topics they are interested in, so their Yahoo experience Read More

Published: