Dynamic Image Collections

Jive Software (acquired by Aurea in 2017) was an early pioneer in the enterprise communication and collaboration space, with a suite of products used by millions of people across a broad range of industries. Organizations used Jive-x to build external communities with customers and Jive-n to build their own internal communities. I was the UX lead on a new feature that enabled community managers and members to tell visual stories and curate visual assets. These dynamic image collections could be used for social sharing or project collaboration.

Note: This feature was released in February 2016. These are screenshots of a demo collection using images from a company event two years prior.

Image collection (released product)

Jive was quick to explore how popular social media interactions might enhance the user experience of everyday work software. Community members could like, share, and comment on images. Tagging images facilitated browsing and curation of thematic collections. Images could be viewed in a lightbox over a collage of the entire collection or in a full page view with additional metadata and impact metrics.

Image lightbox view with social reactions (released product)

Problem Space

Within a Jive community, teams could set up short and long term work spaces for collaboration. Members of a space could publish blog posts, collaborate on documents, start discussions, and share various types of content, including images. Prior to this project, there was a simple widget that could display images in a linear slide show format. It was built on older technology that we were phasing out. Rather than rebuild the same widget on newer technology, our product manager wanted to take a fresh look at images across the platform and explore opportunities for innovation.

Conceptual Models

My discovery process began with an examination of all existing features involving images and basic patterns of interaction with images. I also conducted a precedent study of popular applications for browsing, sharing, and managing images. From this examination of what we had already built and what was already out there, I abstracted the essential goals that motivate a person to collect and share visual media and highlighted the ones most relevant to our customers. While keeping the full range of goals in mind, I focused on the most essential use case scenarios.

Image detail with social reactions (released product)

Conceptual model of how people interact with images across the entire product

Affinity diagram of essential user goals

Next, I mapped out the essential user tasks our new feature needed to afford, and how it would manifest in various areas of the platform. The task map is my bridge between conceptual design and interaction design. As I cluster bubbles together, I begin to visualize screen interactions. As I explore design solutions and lay out screens, I reference the task map — crossing out bubbles I’ve already accounted for and making sure I didn’t forget anything.

Affinity diagram of essential user tasks

Interaction design

I created medium-fidelity mockups introducing the concept of dynamic image collections. We would replace the little slide deck widget with beautiful, expansive collages. Users could quickly assemble these collages by filtering images — by thematic tag, category, type, and author — and saving the filtered images as a named collection. I shared the mockups with the engineering team early in the design process to ensure that the technical level of effort was realistic for our project timeline.

Below are some of the low fidelity mockups I created for those early scoping conversations.

All image collections and a feed of all images

Image collection selected

Expanded image with details

Browsing images by thematic tags

UI design and prototyping

After getting sign off from the product manager and engineering team, I worked closely with UI Designer David Doms who designed the visual look and feel, final layout, and UI details. He created the high fidelity mockups below, that I assembled into a clickable Invision prototype. A UX researcher did user testing on the prototype, and we made a number of design changes based on the outcome of that research. We streamlined the display of named collections to reduce visual complexity, and changed the layout of image filtering elements to make them more discoverable and intuitive.

High fidelity interactive prototype of image collections

Expanded image with details

Uploading images to the community

Project details

My role: I was a Senior Product Designer, embedded in engineering teams as the design lead on a per-project basis.

My Contributions

  • Needs analysis

  • Precedent study

  • Goal and task analysis

  • Interaction design

  • Medium-fidelity mockups

  • Interactive prototype

  • User stories and detailed use cases

  • Acceptance testing

Collaborators