Index_Communities_D8D8D8half.jpg

IBM Communities

IBM Communities


My role:
Lead user experience designer, wireframes, user-testing, visual design, hi-resolution mock-ups, specs for implementation, coordinating with development, presenting demos to clients, coordinating team sprints

Project overview:
In 2015 I was tasked with improving the design of Communities within IBM Connections. IBM Connections is a powerful social and collaboration software solution combining wikis, discussion forums, blogs, file repositories and more. While you can use any of these apps in a standalone fashion, Communities combines all of them into a cohesive whole.

Though hugely successful and widely adopted in it’s previous form, it was time for Communities to get a face-lift. I lead the user experience design work for the IBM Connections Communities 6.0 release, working together with a junior designer. Together we were able to achieve some impactful changes that received a positive response from our users.


Addressing User Needs

In the months leading up to this project, feedback & insights were gathered by our design researchers that led to a set of user needs that had to be addressed.

Some of our users pain-points included:

  • Apps were buried in vertical left navigation in drop-down

  • No horizontal navigation option

  • Limited template options

  • Out-dated look and feel

  • No way to copy an existing community structure

Our OM helped us to prioritise which issues to solve first, based on what would be most feasible to fix while still providing enough improvement. It was imperative that our changes be effective & ease the users pain-points enough to provide the most delightful experience.

Updates in the Connections 6.0 release:

  • Modern & clean visual style, white widgets on grey

  • Horizontal navigation for a website-like experience

  • New layout options

  • Rich content widget in top banner position

  • Create a new community by copying an existing one

  • New loading animation when a community is being created

’Users were getting turned off by the out-dated style and didn’t feel like it was keeping up with modern web standards’
— anonymous user
 

Default Visual Style - Before & After

The existing product needed freshening up! It had an out-dated visual style with a square community avatar, a confusing layout of widgets, and it was hard to differentiate between content at a glance.

I contributed to and gave feedback on visuals for this new look & feel and applied it across all our wireframes for specs. The page is more organised, the content is better aligned, the community avatar is now a circle, and the widgets appear like white cards on a pale grey background.

BEFORE - Communities old out-dated visual style

AFTER - Communities 6.0 new fresher look and feel

 
 

New Style Customised

The new layout with horizontal navigation makes it easier for users to create a community with a website-like experience. Having the Rich Content widget promoted to the top banner by default makes it easier for users to see the benefit of this customisable area.

 
 

Choosing New Layouts with Horizontal Navigation

When a user clicks on the 'Change Layout' option in the 'Community Actions' menu, they see two new layout options that introduce horizontal navigation.

'Community Actions' drop down menu

'Community Actions' drop down menu

 

'Change Layout' menu with new horizontal navigation options

'Change Layout' menu with new horizontal navigation options

 
 

Updated Create Flow with ‘Copy Community’ Option

I worked with our junior user experience designer on improving the creation of a new community. In response to our users feedback, we designed a way for people to create a new community by copying the structure of a existing one.

We discovered however that this piece was not straight-forward. It wasn’t possible to copy over all of the community members and content such as files and blog-posts due to the nature of access permissions and privacy restrictions. So while It was not as simple as creating an exact duplicate, it still improved the experience for customers who saw value in being able to copy the structure of a community and re-use the same widgets that were added to a previous one.

They can now choose to create a new community from scratch or they can search for an existing one to copy, or choose from their most recent communities.

‘Start a Community’ drop-down menu

‘Start a Community’ drop-down menu

 
 

‘Copy an Existing Community’ create flow

‘Copy an Existing Community’ create flow

 

New Loading Animation for Create Flow

For this release I worked with a junior visual designer who created this animation in support of our work to improve the ‘Create Community’ flow.

 
 

Communities Demo at IBM Connect

I traveled to San Francisco to meet my team at the IBM Connect conference. My task was to demo the new IBM Communities designs with business partners and potential new customers. It was a great opportunity to gather feedback and to find new sponsor users.