My role:
Design lead for project team, learned a complex external app to understand pain-points, integrated external app into Connections, worked with OM on strategy and prioritisation, worked side-by-side with development on wireframes, coordinated team sprints

Project overview:
In 2018 my design team was asked to focus on a mission called ‘Delight the Base’. This meant looking for ways we could offer more value to our existing customers & get these improvements to market in a short time-frame to be more competitive.

To support this goal, IBM acquired a product called Connections Engagement Centre - also known as ICEC - which some customers were already using to enhance their organisations intranet. I led the integration of this external app into Connections Communities so that it would became a seamless part of the existing experience and bring added value to users.

Benefits of Highlights for a community owner:

• New selection of layouts to choose from

• New selection of widgets for displaying content

• Aggregate content from multiple sources

Assessing the Scope of the Proposed Integration

A huge part of my work on this project involved learning how to use IBM Connections Engagement Center - which is complex for non-technical users - and investigating how this could be integrated into the Connections Communities environment. I identified multiple areas where the two applications had conflicting user experiences and duplicate UI elements. I consulted senior development architects to ask if it would be possible to resolve these issues. Here are some examples of the challenges we faced:

ICEC had it’s own visual style that didn’t match

• ICEC style clashed with the Communities 6.0 style

• Default state of widgets wasn’t intuitive

• Widgets displayed community name instead of their title

• No help or guidance on widgets for context

ICEC and Communities had separate layout options

• Highlights layouts didn’t apply to the entire community

Connections app menu and ICEC widget menu

• No clear explanation about the difference

• Adding a Highlights widget didn’t add the corresponding Connections app

• ‘Create widget’ list had no categories or help text

User experience of parts of ICEC was not intuitive

• Configuration and personalisation too complex

  • Users required additional help

  • Too many superfluous decisions to make

  • Users couldn’t enter a title with a space in it

  • Research showed our customers wanted a solution that required no technical expertise

• Terminology too technical and inconsistent

• UI didn’t follow best accessibility practices

• Placement & size of widgets is unpredictable

• Unfriendly error messages with inconsistent styles

• Unnecessary visual clutter in customise mode

• Poorly designed CSS templates as options

We discussed all the issues above and prioritised what fixes we could realistically achieve in a very short time-frame. So we made the decision to turn off the ‘Personalisation’ feature until we had the time to completely re-design and simplify that experience. We turned our attention to re-skinning the Highlights app page, making tweaks to the most glaring UX issues, and improving the Widget Configuration experience over incremental releases.

Due to a limited scope, we worked within tight constraints and made compromises where necessary. Instead of completely replacing the existing overview page - which would have been a vast and complicated undertaking - we opted instead for letting users add ICEC as an app in their community. Working closely with our talented senior front-end developer and supported by a team of brilliant engineers, we successfully integrated the app, improved the look and feel, updated the widget editing experience, and re-named it as ‘Highlights’.

Visual Consistency

• Updated visual style is a combination of the Communities 6.0 style and the ICS Design Guide. This was hard to resolve due to the complex way ICEC was coded.

• Empty widgets on Highlights page have helpful text

• Correct names displayed for Highlights widgets

• ‘Communities Overview’ doesn’t appear by default

Before

After

New Capabilities

• More options for customising widgets and displaying information

• Community owners can include navigation that corresponds to wiki pages

Improved Editing Experience & Preview

• Re-designed to make it full screen

• Much easier to focus on the task

• Visual style uses ICS Design Guide components

• Settings are now organised into sections

• Edit settings on the left, live preview on the right
  

A. Highlights app name

• App name changed from ICEC to ‘Highlights’

B. Highlights widget menu

• Icon visible for owners without hover

• Icon changed from hamburger to ellipsis

• Configure option re-named as ‘edit’

• Configure option surfaced to menu list

• ‘Remove Widget’ functionality previously hidden

C. ‘Customise’ mode

• Cleaner and simpler

• Dashed lines replace dark blocks in ‘Customise’ mode

D. Widget re-naming

• ‘Community Overview’ widget is now the ‘Featured Communities’ widget

E. Customise options panel

• Updated with ICS Design Guide styles

• When an admin logs in, the extra tabs that appear are also updated (Page Settings, Page Management, Settings)

F. Admin dashboard

• New visual style is turned on by default for Highlights

• It is important for admin users to have the option to turn these off in companies where they use the original ICEC standalone product. They may have existing CSS based on edits of the original ICEC styles.

• When Highlights is turned on then the ‘About’ tab is not visible on the customise panel so that we don’t show any references to the Connections Engagement Center.