1. Jodene Eikenberry
Information Architect/UX Designer
Microsoft
Ideo
Hornall Anderson Design Works
Vulcan
Classmates Online
HomeGrocer
2. 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
4. Community Policing Tool: Link Placement
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.
5. Community Policing Tool: Report Page
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
7. 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.
9. 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
10. My Profile Page Redesign: Profile Page Business Drivers
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
• 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
11. My Profile Page Redesign: More UX concerns
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
12. 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
13. My Profile Page Redesign: Phase 2 Redesign
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
Page contributed to a 188%
increase in user-generated
content and $772,412 in
additional revenue in the first 60
days post-launch
14. 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.)
15. Navigation Redesign: Original Design
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
16. Navigation Redesign: The Navigation Solution
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)
17. Navigation Redesign: The Dashboard Redesign
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
18. Class List Redesign: The Most Important Page on the Site
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
19. 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