Collaborating With Engineers to Build a Topic Selection Modal
Helping Users Select Interests for a Personalized News Site
--
Note: This article was originally published on an early version of my personal site in approximately 2016–17. For my most up-to-date work please visit my current website, www.michaelwalker.co.
Background
My team and I designed an internal news site that allows us to push content to individual users based on their interests. Content will initially be pushed to users based on demographic information available in our colleague database. In order to make sure that this targeting is relevant to individuals, we want to give each person a chance to customize the list of news topics they will see.
The Team
- Michael Walker: UI/UX Design
- Mike Moore: Development
Problem
How might we make news content more relevant to colleagues, using the structure of a topic selection modal as a starting point?
Research
Background involved selecting user segments to target. Segments we chose expressed the need for at-a-glance views of news relevant to their roles. They also wanted the ability to distinguish between internal and external news.
Third-party research was done to see how similar sites such as LinkedIn, Medium, and Foursquare let users select topics and hashtags they would like to follow.
Designs were tested with users organically during the design and development of this modal. Research was done on different types of search functionality in order to supplement the design.
Concerns
My primary concern was that the list of news topics had not been finalized when we started to build this component. The design was based off of the structure of our current news categories. A secondary concern was that the final list of topics could potentially be lengthy and ever-changing. A tertiary concern the was the limited amount of space for displaying the list of topics.
Constraints
This modal was built using design system standards set by our Global Design function.
Wireframe
My friend and colleague Mike Moore drafted a rough wireframe for the modal (above) based on the technical capabilities of our platform. Mike sent the wireframe to me for UX evaluation and UI design.
Design Edits: Draft 1
In the first draft of the topic selection modal I:
- Designed all elements. This aligned the modal with our product interface and allowed designs to be incorporated into our style kit for future use. It also allowed the development team to reference our design standards for detailed information on component states.
- Formatted selectable topics as chips. This make it easier to select the topics and differentiates them from links (preventing users from incorrectly thinking that they may be taken to another page on click.)
- Explored pressed states for the chips. This helps the development team understand what happens when a topic is selected and what happens if a topic is present under multiple topic categories.
- Clarified copy on buttons at the bottom right of the modal to more clearly explain what happens after press.
- Visually extended content beyond the topic selection field. This indicates what will happen when content extends below the available space.
- Added a “close” button to the upper right of the modal. This makes it easier for users to opt out of selecting topics. While users can click on the scrim to close the modal, the button reinforces a familiar pattern and makes the process clear and intuitive.
Prototyping Functionality
After sending a first draft to my colleague Mike Moore, we had a quick conversation about how the modal would function. Mike asked what would happen when the user scrolled. Would the search bar remain fixed in place? What should happen when a user started to type into the search bar? We decided to test how the component would work if the bar was fixed. We also decided to test adding a predictive dropdown feature to the search bar to allow users to pick from available topics more quickly. While Mike Moore sent about coding this option, I updated the visual design.
Design Edits: Draft 2
I made adjustments to the modal based on my discussion about functionality with Mike Moore. In the second draft of the modal, I:
- Added a button to the search to make it clear to users that they would have to press the button or press “enter” to return results. This button was removed later in the design process, but did lead to the addition of a button-activated search component in our design system.
- Reduced the horizontal width of the “Selected Topics” section to allow for more room for the user to browse “Available Topics.”
Testing Functionality
By the time I finished a second draft, Mike More had a working prototype ready for us to test. I took it for a spin and found the following usability concerns. I also made suggestions for improvement:
- The buttons on the modal don’t have a hover state.
- The fixed search bar, while convenient, covers chips and reduces the space available for reading topics. A possible solution is to have the search bar remain at the top of the modal on scroll.
- When selecting a topic from the search suggestions in the search drop down, it is not apparent that the topic is added to “Selected Topics.” A possible solution is changing the design of search suggestions by adding a visual indicator that items can be added or removed.
- The user cannot tell if a recommended topic in the search dropdown has already been added to “Selected Topics.” A solution is to remove already selected items from search suggestions, but this may also be confusing if the user purposefully searches for something they have already selected.
- It’s difficult to remove an item from “Selected Topics” if list items extend below/behind the bottom bar. A user has to scroll to the bottom of the “Selected Topics” list to delete a recently added item and can’t instantly see if something they click was actually added; they don’t get visual feedback without doing extra work. One solution is to add items to the top of the list instead of the bottom of the list.
Design Improvements Made During Prototyping
Mike Moore also made the following improvements to the design while he was coding:
- Mike Moore changed “X” icons on the chips to “–” icons. this provides a greater distinction from the “+” icon and makes it easier for the user to scan the list and see what they have selected.
- Mike Moore added an empty state to the “Selected Topics” section. This will help a user figure out what to do if no topics are selected.
- Mike Moore added a “Trending Topics” category to the “Available Topics” section. This will help our team highlight topics that might be most relevant to the user.
- Mike Moore added the search bar to the header to save space and give the user more room to browse.
Design Edits: Draft 3
Draft 3 included adjustments made based on functionality. In this version, I:
- Moved the search bar to the “Available Topics” header via feedback from Mike Moore. This prevents it from covering chips and increases the amount of space available for viewing topics.
- Designed a new search bar component for our Material Design style kit. This “flat” search bar has less visual prominence and has more apparent active states. I removed the button because Mike Moore and I decided that search would provide suggestions instantly while the user types; there is no need for them to press enter or click a button to complete the search.
- Extended the grey header at the top of the modal to cover the section titles. This further differentiates them from topic section headers and helps provide contrast for the white background of the search bar.
- Added checkboxes to the search suggestions dropdown list so that the user can easily select or deselect items they search for. Items they have already selected will still appear in suggested results, but the check box will display a selected state (it will be filled.)
User Testing
Mike Moore and I were satisfied with the progress we made and decided to test it with a user. Because this is not a major launch, we did an informal observation and asked the user to select topics from a blank state. I recorded my findings in the email below and suggested we do at least one more informal observation before launch.
Final Design & Results
Working collaboratively helped my team make the following improvements to the modal design:
- Usability problems were identified and corrected quickly.
- Users can easily browse categories or search for specific topics.
- Users can easily add or remove topics using chip functionality.
- Search results are presented in a way that allows the user to intuitively add or remove topics from their selection from within the results dropdown.
- The design process allowed us to expand space for displaying topics so the user can scroll through them more efficiently.
- The design process clarified options the user has for closing the modal, either by clicking on one of the buttons at the bottom right of the modal, clicking on the background scrim, or by clicking the close button at the top right.
Updating Our Design System
When I was working on this project I created a new flat search component. I designed and documented relevant states for this component and added it to our design system. I also created a button-enabled search component and added to our system library for future use. This documentation is shown above.
Status
This modal has been added to our next release. It will be added to our platform and released when we launch our Global News page.
Credits
Thanks to Mike Moore for working with me to build this modal. I wouldn’t have been able to design this component without the critique, code, wireframes, and feedback from my friend Mike. Mike is a Platform Manager at Mercer. You can read more about him at his LinkedIn profile.
Thanks also goes to my manager, Barb Fiorillo, my team, and our Engineering team in India for all the hard work they do.
About the Author
Michael Walker is a Product Designer at Mercer. He lives and works in New York City. You can read more about him and get in touch via his LinkedIn profile.
