Jodene Eikenberry

Information Architect/UX Designer

MicrosoftIdeoHornall Anderson Design WorksVulcanClassmates OnlineHomeGrocer

Designing a content policing/reporting process for a social networking website

Project Goals: • Create a mechanism to monitor site content utilizing members as reporters• Build a simple process to track reported content• Programatically “hide” reported content from site community (after specific criteria is reached)• Design notification, editing and appeal process for members with reported content

Community Policing Tool: Flow Chart of reporting process

Managing Business Owner Feature Request

• Business Owner (a legal team member) requested that each UG content item (photo, bio’s and announcements) have a “report” link appended to it

• My recommendation was a single link at the top of the page

• UX concern driving my recommendation was maintaining the primary purpose of the page (viewing a profile, reconnecting). Adding a slew of “report” links would clutter the page and create an unfavorable experience that content was there to be reported on.

Community Policing Tool:Link Placement

Design Strategy

• Single page aggregates all user-generated content items

•User initiated “reporting” task is thus met by a page designed specifically for this purpose

•Page provides user with a “one stop shop” for reporting multiple content types from one screen (if necessary)

• Reporters may report an item only once, so page provides feedback regarding items previously reported

Community Policing Tool: Report Page

Community Policing Tool: Final Page of reporting process

Community Policing Tool: Reported User’s “Action” page

Tagged Content Items

• User’s profile clearly shows that specific items have been hidden from the community

• User can choose to remove or replace the reported content item, or click the “learn more” button to file an appeal with member care.

Community Policing Tool: Reported User’s Appeal Form

Redesigning the Classmates Profile page:

Improving a core site page while working with some challenging UX business drivers • Profile page, a primary page for gathering and displaying UGC had not been updated in several years. • New profile page would act as a teaser to gather more UGC as well as drive paid subscriptions. • Unpaid members would be forced to build their own profile before viewing a limited version of another members content. • Only subscribers would be able to view a full profile

Business Drivers = UX concerns

• the profile page would act as a “teaser” to both generate more UGC and drive paid subscriptions.

• non-subscribing members would be forced to build their own profile before viewing a limited version of another members content

My Profile Page Redesign: Profile Page Business Drivers

• this page’s purpose was to communicate to the user why they were beginning a process they didn’t know they’d initiated

• I was unable to persuade the product manager to add a “back” button or link

Profile building process

• Q&A divided into 4 pages, to maintain maximum white space and prevent excessive scrolling

•Headers defined each pages Q&A focus

•Choose not to include a process timeline, believing that users might be scared off if they knew there were 5 pages in the process

My Profile Page Redesign: More UX concerns

My Profile Page Redesign: Paid and unpaid final views

• design incorporated extensive conditionality around member status and user-generated content; page layout conditionally shrinks or expands depending on content types

Design Drivers

• this design needed to incorporate new categories of profile information

• the tab system was used to allow the user access to all profile categories “above the fold”

• page designed to keep the first line of bio content above the fold

• page again designed to incorporate layers of conditionality depending on profile’s content types

My Profile Page Redesign: Phase 2 Redesign

Page contributed to a 188% increase in user-generated content and $772,412 in additional revenue in the first 60 days post-launch

Redesigning Classmates Navigation:

Designing a new navigation concept to increase business drivers AND improve the UX • Six week project to radically redesign the Classmates global and local/contextual navigation• One brief round of usability• Design needed to scale for several years of business unit growth• UX goal was to provide quick and intuitive paths to users’s primary pages (various directory pages, profiles, user accounts, help, etc.)

Design Challenge

• the original Classmates navigation system revolved around four primary categories on the left, only two of which drove substantial revenue

• “Friends” was a poorly labeled aggregate of two primary business units and revenue drivers - high schools and military listings

• Engagements drivers (the local navigation) were not visible unless the header was clicked

• More business units were to be added in the next 2 years

Navigation Redesign: Original Design

Design Factors

• given six weeks to complete this important project, I chose to focus energy on information architecture and let the design follow industry standard concepts

• the navigation scheme promotes all the affiliation directories to a global level

• local navigation for the home page is “open” and displayed upon entering the site, allowing the user to view available secondary options without clicking

• the design was scalable to allow for the growth the company had planned for the next two years (see below)

Navigation Redesign: The Navigation Solution

Design Concept

• the original dashboard unnecessarily occupied two columns of real estate and was only viewable on the homepage

• I redesigned the dashboard as a single column structure that provides one click access to the user’s affiliations as well a “new member” count

• one column design allowed the dashboard to be persistent to the far left column of all directory home pages

• links to additional affiliations from our growing community base are available directly below schools

• the growing popularity of contextual advertising links are promoted in a separate area below

Navigation Redesign: The Dashboard Redesign

Problems

• classmates names often appeared below the fold at 800x600

• no system of list filtration (except by year)

• “previous/next” links did not allow user to drill deeper into the list

• users could only view a single year at a time

• promotions took up precious real estate and were not integrated into a page system

• alumni ”total” count did not reflect class year represented

• tertiary nav difficult to see/find

Class List Redesign: The Most Important Page on the Site

Design Factors

• introduced tabs to filter list by roles

• incorporated dropdown menus into tab base for allowing list to be sorted by year ranges

• added pagination at top and bottom of page

• built a row into the list for contextual advertising

• made tertiary navigation easier to see by building in more white space

• promotional space incorporated into two modules at top of page separated from list content by orange header bar

Class List Redesign: The Most Important Page on the Site