Contact Michael

Use this form to contact Michael with questions, comments, or business opportunities. You can also reach Michael via LinkedIn, email, and Instagram using the social links at the bottom of this page.

         

123 Street Avenue, City Town, 99999

(123) 555-6789

email@address.com

 

You can set your address, phone number, email and site description in the settings tab.
Link to read me page with more information.

Blog

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum.

 

Designing a Topic Selector

Michael Walker

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. 

Problem

How might we make news content more relevant to colleagues, using the structure of a topic selection modal as a starting point?

The Team

  • Mike Moore, Developer

  • Michael Walker, UI/UX Designer

Research

Background research involved selecting personas to target (Susan Senior Business Leader and Chris Client Manager.) Personas we used 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 for use on desktop only, in alignment with the needs of our users. Our team decided to use Material Design standards set by our Global Design function. 

Wireframe

A wireframe for our topic picker modal. Created by my colleague Mike Moore.

A wireframe for our topic picker modal. Created by my colleague Mike Moore.

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

My first draft of the topic selection modal.

My first draft of the topic selection modal.

In the first draft of the topic selection modal I: 

  • Added Material Design styling to all elements. This aligned the modal with our system UI 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

My second draft of the topic selection modal.

My second draft of the topic selection modal.

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 Material Design library.

  • 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 Moore 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. 

The fixed search bar, while convenient, covers chips and reduces the space available for reading topics.

The fixed search bar, while convenient, covers chips and reduces the space available for reading topics.

  • 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.

In this example, the user receives little confirmation that “Learning” has been added to “Selected Topics.” They also select “Leadership” even though it is already a “Selected Topic” and the action has no effect.

In this example, the user receives little confirmation that “Learning” has been added to “Selected Topics.” They also select “Leadership” even though it is already a “Selected Topic” and the action has no effect.

  • 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.

In this example, a user adds “Your Career” and can easily delete it. However, adding too many items extends the “Selected Topics” list below the available space. This hides a visual cue that the topic “North America” has been added and requires the user to work (scroll down) to remove it from the list.

In this example, a user adds “Your Career” and can easily delete it. However, adding too many items extends the “Selected Topics” list below the available space. This hides a visual cue that the topic “North America” has been added and requires the user to work (scroll down) to remove it from 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

My third draft of the topic selection modal.

My third draft of the topic selection modal.

Draft 3 included adjustments made based on functionality. In this version, I: 

  • 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.)

A user tests the interface.

A user tests the interface.

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. 

11_UserTestingEmail.png

Final Design & Results

The final design allows the user to easily select and deselect topics that are relevant to them.

The final design allows the user to easily select and deselect topics that are relevant to them.

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

I added designs for a flat search component to our Material Design system after completing this project.

I added designs for a flat search component to our Material Design system after completing this project.

I added designs for a button-enabled search component to our Material Design system after completing this project.

I added designs for a button-enabled search component to our Material Design system after completing this project.

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 Material 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 shipped to our Development team in Gurgaon, India. It will be added to our platform and released when we launch our Global News page. In a beta release of the topic selection modal, we decided to make the pressed state of chips darker so that selected topics are easier to see. We also decided to have the modal fill the screen if the window is below a certain breakpoint.

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 (and a design unicorn.) You can read more about him at his LinkedIn profile

Thanks also goes to my manager, Barb Fiorillo, my team, and our development team in India for all the hard work they do. 


About the Author

Michael Walker is a digital product designer who lives and works in New York City. You can read more about him and get in touch at www.michaelwalker.co or via his LinkedIn profile.