Manhattan Neighborhood Network

UX/UI Designer, Project Manager    Media Website    April - August 2018    Completed at Ironpaper

Manhattan Neighborhood Network

  UX/UI Designer, Project Manager

•  Media Website 

  April - August 2018

  Completed at Ironpaper

Manhattan Neighborhood Network

  UX/UI Designer, Project Manager

  Media Website

  April - August 2018

  Completed at Ironpaper

Manhattan Neighborhood Network

  UX/UI Designer, Project Manager

  Media Website

  April - August 2018

  Completed at Ironpaper

PROJECT OVERVIEW

Manhattan Neighborhood Network (MNN) is Manhattan’s free, public access cable network. Founded in 1992, MNN works to ensure the ability of Manhattan residents to exercise their First Amendment rights through moving image media. They create opportunities for communication, education, and artistic expression.

MNN contracted with Ironpaper for a full overhaul of their digital presence, which acts as both a digital archive for MNN-produced television content and a hub for enrollment in community courses.

OBJECTIVES

  • Create opportunities for an optimized, segmented user journey depending on the visitor’s intent in coming the MNN website.

  • Integrate new conversion points at relevant points to increase enrollment in MNN educational programming. Increase the emphasis on multimedia functions of the site by integrating relevant imagery and videos.

  • Develop an elevated visual design that speaks to the personality, professionalism, and audience of MNN.

Original MNN.org Homepage

mnn-original-homepage

THE APPROACH

Information Architecture

Since the latest iteration of the MNN website launched back in December 2014, the navigation had sprawled beyond its original scope. I pitched the client on a streamlined nav that highlighed key actions within the site.

mnn-sitemap-v1

After a few revisions to the Education courses listed within the “Learn” section of the site, we arrived on a final architecture that split out the key interactions: Watch, Create, and Learn.

mnn-sitemap-v4
Wireframes

After establishing the key website pages, our team created a list of screens we wanted to prototype, starting with the homepage.

For the first version of the homepage, we highlighted the live programming active on each channel of MNN within a card carousel. Based on feedback from the client, we decided it would be advantageous to ensure that all seven channels were visible without any action on the user’s part.

As a result, in the second round of wires, I opted for a simpler layout for the channel icons and titles. I also moved the section that highlighed MNN’s educational offerings higher on the page so visitors would be more likely to see it.

Version 1

mnn-homepage-wire-v1

Version 2

Version 2

mnn-homepage-wire-v2
Moodboard Exploration

Before diving into the high-fidelity page layouts, I created a simple moodboard that reflected the visual patterns we wanted to explore with the new website design.

Website Audit & Information Architecture

Using Screaming Frog and the existing sitemap.xml files, I crawled and exported the entire website contents into Google Sheets. I then used an updated taxonomy to determine which Categories should migrate to the new site and sort out where we expected each project to fit in the new site architecture.

mnn-key-styles
mnn-moodboard
User Interface & Visual Design

After receiving positive feedback from the client, we moved on with the homepage template. The patterns from this main page of the website would inform the interior templates of the site.

The hero design of the site features a main piece of content with an interactive tray that can be expanded to showcase additional news and recent releases on the MNN site.

Immediately below the hero, I updated the layout in our second version to include key information about Manhattan Neighborhood Network in conjunction with the links to each of the organization’s seven channels. This served to get the organization’s mission above the fold and tighten up two formerly disparate layouts.

Website Audit & Information Architecture

Using Screaming Frog and the existing sitemap.xml files, I crawled and exported the entire website contents into Google Sheets. I then used an updated taxonomy to determine which Categories should migrate to the new site and sort out where we expected each project to fit in the new site architecture.

Version 1

mnn-homepage-v1

Version 2

mnn-homepage-v2

Once the homepage was approved, we moved forward with key interior templates, including screens for featured programming, video production courses, and event registration. Here’s a small sample of the 25+ screens/states documented as part of this project:

Show Overview   •   Video Player      Course Overview      Orientation Registration      Calendar      Event Details

KEY TAKEAWAYS

Following formal client approval, I’ve annotated these designs based on their component pieces, adding documentation for UI elements like buttons and link styles. The template development work is being completed by a Drupal development partner, so all designs have been handed off via annotated Zeplin screens. I can't wait to see the final result once the build is complete!

More Work

CHPC New York CityProject type

MobilewallaProject type

GZERO MediaProject type

JoynProject type