Symphony Bookmarking | UX Portfolio

SYMPHONY

Bookmarking

Summary

Symphony provides messaging services via chats, chat rooms, and "walls" where users could post more static content. There was no convenient way for users to save messages or wall posts to read or follow up on later, which forced them into inconvenient and unintuitive workarounds.

Project goal

Implement a new feature that enables users to easily save messages and wall posts to a searchable, sortable list.

My role / project scope

Lead designer responsible for all UX deliverables and final visual designs. I collaborated with stakeholders and design team members throughout the project.

Bookmarking was one of five separate projects under a meta-project “Inline Message Actions”. I worked on all sub-projects in parallel.

The feature was released in Q1 2019.

Clickable Prototype

PROCESS

Initial research

After the kick-off meeting I started by digging into feedback from technical account managers, sales, and service teams to validate user needs. I looked at what our competitors offered as well as social media apps and browser patterns. Most competitors and social media sites offered only a basic "save" function with minimal to no searching, sorting, or other post-save actions, and there was no consistent naming convention.

Naming (bookmark, save, star... ?)

There were a few naming options I found when looking at competing products. We tossed around some other ideas in a brainstorming session, and I surveyed users internally to list all the types of content users might want to save and the actions they might want to take after saving.

Card sorting

We needed to understand users' mental models around labels related to saving content, so the research team partnered with me to do a card sorting exercise.

Findings:

Bookmark and save were equal

Favorite, star and tag were associated with people

Clip was associated with articles

Flag was associated with content, but in context of a review process

Some actions were associated with tasks

Although tasks were seen as having associated actions, they weren't necessarily associated to content

Both exercises confirmed the hypothesis that people tend to associate saving content with the terms Bookmark and Save.

I selected Bookmark because people consistently referred to “bookmarking” during testing, and some users felt “save” would potentially indicate that the content would be saved locally.

Visual pattern

Once a message is bookmarked, users need an easy way to find it later in both an aggregated list and in the chat or wall.

Bookmarked messages needed to be clearly visible when scrolling through a chat so they can be easily located without having to navigate away. After a few iterations and some user testing, I landed on the below pattern.

I used the Material design vertical flag style icon since users we tested with were familiar with the pattern and had no trouble identifying it.

Responsive and scalable menu

Part of the inline actions meta-project was to design an extensible, scalable menu that supports any number of possible actions.

Other inline patterns I explored didn't work well with Symphony's condensed mode, so I used an inline icon with overflow menu. We planned to instrument the menu so we can move some of the icons out from under the overflow once we know which actions are used most often.

Testing this pattern on UserTesting.com confirmed that users are generally familiar with the "3 dots" to indicate there are actions available. 100% of the test participants located the bookmark action even though it's initially hidden.

Menu hover states

Icons appear in the menu to help users recognize the available actions at a glance.

When bookmarked, the menu entry changes to "Unbookmark". This terminology is familiar to users and common across applications.

Menu responsiveness

Because of Symphony's grid layout the menu had to be responsive to small module sizes (300 x 300 px).

For consistency, this pattern mirrors an existing pattern in the left navigation bar.

Naviation to bookmarks & user testing

After bookmarking an item, users needed to be able to find the list of bookmarked items. I tested 3 options for entry points for the bookmark list:

Profile menu
Left navigation bar
Top navigation bar

Testing entry points

Testing internally and on UserTesting.com showed that most users missed the profile menu option, instead looking in the left and top navigation bars.

Results for left and top navigation were roughly 50/50, but because of a planned client redesign I chose to place the bookmark entry point fixed to the bottom of the left navigation bar.

This entry point is always visible, so the bookmarks page required an empty state.

Searching and sorting

None of our competitors offer the ability to search and sort bookmarks but users were requesting more advanced functionality.

Initially we considered the option to group bookmarks by chat, but as I sketched out some ideas it was more complicated than expected.

To keep it simple and in scope, we used a text filter that allows users to enter a text string without requiring complex operators used in global search.

Sorting was limited to Last Added / First Added. I partnered with the copywriter on this terminology because of possible confusion between the date added to bookmarks and the date the message was posted.

Final design / flow

Final designs incorporated all above features and included the ability to add a note, which served as an interim solution for users who might want to use content as a means of creating tasks and adding reminders. Internal users were surveyed and felt this was a useful feature so it was added and instrumented to track usage.

Next steps

Analyze usage patterns to determine how people use bookmarking and explore whether task management should be a separate feature
Explore adding more actions that could be taken on the bookmarks page
Add labeling or foldering for organization
Add auto-collapse for long messages

Learnings

In hindsight, I could have reduced churn by helping to keep the product team more focused on completing the project before de-prioritizing and moving to another project. I jumped around a lot in the process of designing this and other message action projects, which made it difficult to finalize on decisions.