MTV News Redesign

MTV News was relaunched as one of MTV’s first responsive web products almost three years ago. However, it remained in it’s MVP launch format for that entire time. Seeing this as an opportunity to breathe some much needed life back into the visual expression of MTV News, we began to develop a new visual language and prototypes of what the next iteration of the site could be. It was essential to base our updates on the current underlying product structure to minimize tech debt during implementation but we wanted to push interaction / visual design as much as we could within this constraint. After presenting to a few key stakeholders to get buy-in, incorporating their feedback, and working with the digital design director and SVP Design to finalize, we were able to go live with the new design in one sprint cycle. (www.mtv.com/news/)

My role was product designer, responsible for strategy & wireframe, UX/UI design, develop digital style guide, mapping modules and QA with engineers.

Home Page

Article Page

We also give editorial team content strategy tips:

Having more dynamic and well-curated imagery to make the content more engaging
List quotes to put more emphasis on the key points (didn't get launched due to tech limitation)
Limit the title and sub-header characters – keep it short and bold

HTML/CSS Prototype Video

Google AMP

Design System

Designed and coded a responsive site as design system for MTV News, listed all style needs for producers and developers, including:

Logo assets, colors, typeface guides
All the modules with css code (developers can also inspect the whole code through dev tool)
Interactive elements guide (hover, listicle, active, etc.)
Specific brand voice page

Responsive Quote Page for Digital Style Guide

The quotes in original version were from DANIEL FIERMAN (vp, editorial mtv digital), based on confidentiality I switched to other quotes.