Focus on Audience

A while back I worked on a project to develop an internal affinity-oriented social network for professionals which focused on collaboration.

I often referred to the project as “FaceBook for the Enterprise“, but we could also call it …

A Model for ‘Your Intranet on Steroids’

Wait a minute:  “Eeeeeew!    Intranets are geeky and boring“, you say

Bear with me here.  And take a look…

Index / Landing page

Introduce the 4 main Content areas:

  • Communication
  • People
  • Projects (collaboration)
  • Personalization (tagging, connections, and sharing)

Focus on features (What’s New)

  • 1-click voice access (integrates a Skype-like conferencing service :  transcend the channel)
  • the Relationship Navigator (your affinity map)
  • Feedback tools (crowdsource our knowledge)

Membership has its privileges

You can view info in passive/public mode or Would you like to sign in? (at the top of the page).  This invokes…

index-pnp

the MyCenter section

The MyCenter section is my active dashboard (It’s my default Landing Page, once I’ve established my presence).
By default it focuses on communication:  specifically my conversation threads and event notifications.
It also focuses on affinity attributes:  who I’m following/being followed by and my favorites

Conversations & Communiques

The default focus of myCenter is Conversations (topic Threads) and Communiques (event Notifications)

pnp-01-mycenter

Conversations & Communiques offers

  • the concept of Following (relatively new concept at the time  – it was 2009)
  • robust linking allows drill-down detailed info on (people, topic threads, subject items, etc.)
  • Status of “followers” (people affinity) and “tags” (topic affinity) for each message or thread
  • timestamp (light blue background indicates “urgency”/ “recency”

Note:  Conversation Item#4 (“RE: Virtual introduction…”) indicates a functional feature of Click to Call :  automated text conversion, which might be nice for automated language translation on beBee

The Sidebar at right

  • markets” new features, like Click to Call
  • gives you a quick Status thumbnail on “top topic areas”
  • Could be more/other things … but it’s a start

Note: There’s also a “Communication Archive” button, which brings together all of my communications (my own threads, “buzzes”, comments, event notifications, etc.) … in one place

 

Following

I didn’t ‘flesh out’ all pages in the model.  But the bullets capture the intent…

relationship-nav-pnpThe table headings indicate how the info might be presented:

  • Following (people/who)
  • Shared tags (affinity of interests)
  • [my] Rating of them (value/relevance)
  • [their] Rating of Me (value/relevance)
  • Note that “Affinity is mirrored” (How I feel about them / How they feel about me)

At a Glance:  Who I’m Following/being Followed by : Profile, Affinity, and Compatibility

Favorites

I didn’t ‘flesh out’ all pages in the model.  But the bullets capture the intent…

pnp-02-people

The table headings indicate how the info might be presented:

  • Favorites (people, projects, collateral, tags)
  • Shared tags (affinity of interests)
  • Following (people/who)
  • [my] Rating of them (value/relevance)
  • [their] Rating of Me (value/relevance)
  • Note that “Affinity is mirrored” (How I feel about them / How they feel about me)

At a Glance:  my Favorites : Profile, Affinity, and Compatibility

 

Let’s Frame the Environment

Okay, so that’s the intro and overview of our solutions model for an environment which encourages “professional affinity”.

the Challenge

Here’s an excerpt from the case study on my website:

The Intuitive Collaborative Design group (ICD) was charged with implementing a social networking and collaboration platform across Bell Labs. A primary focus was on integrated messaging and workflow collaboration .

There’s a bunch of info there, including a clickable demosite.

the Team

Small group (5), three of us were remote/virtual. A small group of really smart people.  Casual & collegial.  Agile style & affect.  One of my most enjoyable and productive engagements.

the Presentation

These screenshots were designed in 2009 for the desktop technology environment which was prevalent at the time.

Mobile was a reality, but not yet a de facto assumption – especially for a professional office environment – so this does not reflect small-screen design, much less “mobile first“.  It is what it is.

Here are a couple of challenges that I face whenever I’m designing a model.

Presentation challenge:  the tabfolders

They’re kind of “old-style”, aren’t they?

We humans need to “chunk” information in order to process it.  In the Bad Old Days, we chunked info by putting pages into tabfolders.  Nowadays we “swipe down” to scroll for more, “swipe left” for next item, etc.  But it’s all governed by the limited amount of info we can present at any moment in a tiny little screen.

Side note: The swipe-y mobile interface is triggered by visual cues (not text).  As info zips by, we are alert for icons and images that alert us to things that might be of interest.  “Hey, there’s a pic of John.  I wonder what silly-assed thing he’s saying now…”  The user interface is driven by conciseness (triviality) and attractiveness (seduction).  But that’s another rant…

From a UI perspective, the presentation challenge is often, “How can you indicate the information-you-can’t-see“?

If the old school tabfolder-chunking style here offends you, then just pretend that the ‘Following’ and ‘Favorites’ sections are appended underneath ‘Conversations and Communiques’.  Now it’s one long swipe-able, mobile-friendly page.  i.e. “Responsive Design

Presentation challenge: TMI (“There’s too much information”)

The page design is kind of “busy”.  No argument there.

Sometimes the subtext of this issue is actually “There’s too much text“.  Let’s face it, people don’t want to read… an interactive interface (“I want to focus on the content.  Don’t distract me with UI hand-waving.”)

We want concise images and icons to provide directional shorthand and we want helpful bots to “silver platter” one-click solutions for us.

And – I agree –  the finished UI should be lean and efficient.

But there are also a few steps before we can get to that.  Among the first steps:

1. Articulate the Potential : This early vision thing is a wishlist of all the good stuff we’ve thought of.  That’s why the early model is usually so info-busy.  But it’s just the first step…

2. Glean to make it Lean :   Now we (stakeholders, designers, marketers, tecchies etc.) can use this knowledge and a visual model to collaborate / make informed choices about what’s important, what’s do-able, what has priority, what is usable, and so on.  These informed priorities should be reflected in our design (layout, flow, icons, terminology, “how things are organized”, etc).

You often need to have a long list before you can make a useful short list.

It may seem counter-intuitive, but wise design is often based on editing, fine-tuning and ‘hiding’ (selectively revealing) necessary functionality – not adding it.

There’s more

… of course.  Lots more.  But we’ll take this process in steps…

 bell-pnp-ui-elements

Your intranet on steroids

… is sexier than it seems.  It assumes that any organization or business wants to “leverage the water cooler”, i.e. affinity among the people in the organization

I must admit, I have a soft spot for intranets.  But that’s another rant.

The company’s intranet is the Infrastructure.  The socialNet is the Model.

 

It’s how professionals connect.  Really connect.

… and Get Things Done / Collaborate (Don’t overlook that part)

The socialNet has a shot to do it right. Potentially.

 

© The Communication Studio LLC

Advertisements