Overview
MTVIggy.com was a music reporting site envisioned as an entry point for bands. When K-pop artist Psy’s Gangnam Style video broke a billion views on YouTube, MTV decided that Iggy could benefit from the online-first behaviors that drove this success. The result was an app-like design that prioritized quick gratification with distraction-free access to the content created by a team of editors, writers, and producers.
Role
UX was all me - UX Strategy, wireframing & prototyping.
Provided creative direction to art director.
Reported & presented to Director of Digital Products & Platforms for MTV World at Viacom.
Contract via The Hired Guns in NYC.
Project
Responsive web redesign of MTVIggy.com
Over 4000 assets - reviews, interviews, articles, videos, and more.
My deliverables were wireframes, prototypes, and specs.
Everyone asks… MTV Iggy was unrelated to Iggy Pop. The name was an inherited acronym for Intelligent Gratification for Global Youth.
Process
I made process my responsibility. This was a challenge because there was no project manager, the client wanted to see design work within the first week, had hired a visual designer to start work at the same time as me, and hard requirements got some unexpected updates. The result was a dynamic dual-track effort in which I worked on research, strategy, and architecture while also finding opportunities to create useful short-term results for review and design.
1) Discovery & Research
2) UX Strategy
3) Wireframing & Photoshop round-robins
4) Prototyping
5) Writing Specs
1) Discovery & Research
Getting to know millennial music fans
The creative brief included resources that I could immediately use: in-depth competitive analysis, product strategy, roadmap, and brand positioning. I also spent time talking to the editors of the site, who were very knowledgeable about their audience.
I maintained several mind maps for collecting ongoing insights. This one focused on reasons someone may really really love a piece of content, which informed several strategic principles and defining features of the final project.
My ongoing research followed four major themes:
Following some K-pop fan forums to better understand our audience.
Domain expert interviews, though these tended toward prognostication about the music industry rather than actionable insights.
Content analysis of the existing site, starting with establishing categories and content types and later the fine-grained analysis of things like title length, publishing frequency, and tag counts so I could create fitting designs.
Competitive analysis of other music and media properties to see how they were implementing specific features I was working on at the moment.
This was not an ideal approach to research, but part of my job was gracefully managing an unruly process and making the best of the resources I had. My top wishes are to have been able to have focus groups and testing of the existing site to hear directly from our audience.
2) UX Strategy
Focusing on content
I like to establish guiding principles at the start of a project. Given the compressed project timeline, I used conceptual illustrations of these as my first design delivery.
Immediate gratification
Two audience characteristics were short content sessions and minimal brand loyalty. This made immediate gratification essential to engaging and retaining visitors. The design result was putting content on the landing screen rather than a more traditional homepage, as with high-engagement apps like TikTok and Tinder - and broadcast TV
Minimum Distraction
A second insight was that distractions made the site less relevant and less interesting to the audience. This meant maximizing content and minimizing distractions on screen. The design result was maximizing screen area dedicated to content..
Deep Experience
Applying the principles of immediacy and minimum distraction at the potential issue of masking the depth of content on Iggy - thousands of articles, interviews, reviews, and more. During design, this meant balancing minimization of distractions with content discovery experiences.
Content strategy: A daily list stuck
The idea of giving visitors a quickly navigable list started as an illustration of these principles, but ended up becoming a core element of content strategy. It worked well because it facilitated quick access, could be navigated with little distraction, and reflected the unique voice of the editorial team.
3) UX Design
Wireframing & Photoshop Round-Robins
Wireframing was fast & high-level. So the visual designer wouldn't sit idle, I quickly settled on three core templates, defined their overall structure, and pulled sample content. To keep the overall design process moving smoothly from there, I switched to working with the designer’s Photoshop comps.
Video, text, and photo templates provided quick gratification with minimum distraction.
I chose to start with the core content types - video, text, and photos, which consolidated 7 types on the existing site, each of which also had multiple layouts. The goal in designing these was to maximize screen real estate dedicated to content, while still providing access to the depth of Iggy’s catalog.
Given the focus on the content experience, I started with videos, slideshows, and articles. Most of the remaining elements on the site map were implemented as navigation rather than pages.
Info panels provided depth.
I built the deep content experience using information panels at the bottom of content pages. Their order followed the inverted pyramid pattern of news stories, moving from specific to broad supporting details:
Freeform text (added later) for adding depth and context-specific to a content item, and manually created by producers.
Artist profiles, with bio and links to additional content, automatically generated by the internal tagging system.
Topics, often overviews of music scenes with links to associated artists and other content, also automatically generated by the internal tagging system.
The initial wireframe for a music video shows info panels that exposes the depth of Iggy's catalog.
Refining in Photoshop
I immediately passed these wireframes to the designer so he could begin work. My subsequent work was with copies of his Photoshop files, in which I roughed out updates or started new templates. While not ideal, this process meant less idle time for the visual designer, reduced overhead of maintaining a separate wireframe deck, and let us review work in higher fidelity.
A cleaner, better-structured video page emerged after several Photoshop round-robins.
4) Prototyping
Polishing behaviors
As these designs continued to evolve into something closer to an app, I found it necessary to start prototyping to work out behaviors and review them to get buy-in. The visual designer supported me by creating many of the assets I needed. The resulting prototypes fell into two broad categories:
Content behaviors
Early on in the project, I created focused prototypes to define how content and navigation would coexist. This evolved into a Today list that rolled up while a visitor was watching a video, and a hamburger menu that exposed additional lists and entry points for browsing deeper content. These decisions were also validated with informal testing.
Site navigation
Later on, a more comprehensive prototype focused on the deep content experience, with additional menu levels and screens dedicated to browsing and searching. This prototype was valuable because the design departed so much from traditional web behaviors that few interaction standards existed, and presentation of static comps was not intuitive.
5) Writing Specs
Capturing complexity
The prototype was great for working out and presenting Iggy's final design and behavior, but a lot of thought behind these needed to be captured for the developers. As a result, I created an overview deck that was used during vendor selection and a detailed deck of annotated comps for the full spec.
Looking Back
This project pushed a lot of boundaries for the time: being content-first, creating an app-like experience, and establishing a sequential browsing pattern. Iggy would be somewhat different today though:
A mobile app would be the starting point, and would also enable some functionality that would not work within a web browser.
Adobe XD & ProtoPie Adobe XD & ProtoPie would be a much better fit for the working process - both in terms of collaboration and prototype-heavy work. (I prefer Figma over XD, but XD integrates more smoothly with Photoshop.)
Standardized UI conventions would mean quicker design cycles and a final product more familiar to users. At the time, even the hamburger menu was new and engendered substantial debate.
More Case Studies
