UMN Press Twitter Search Widget

DigitalWireframe_SearchType.jpg

Project Overview

The Challenge

Extend the design functionality of a Twitter search widget intended to automate the process of searching for and retrieving tweets about University of Minnesota Press publications. Design improvements would increase system efficiency and support the client’s goals of promoting, selling, and creating conversations around their books within and beyond academic contexts. 

The Users

The primary users are the marketing staff at UMN Press and, in particular, the Web Marketing Manager. 

The Solution

Findings from usability evaluations indicated that while the widget adds value to the primary user’s work, the process of manually rejecting irrelevant tweets is time-consuming and inefficient due to the system’s decreased flexibility. To increase system efficiency, I recommend adding a hashtag search to the widget algorithm and adding “Title AND Hashtag” and “Hashtag AND Author” to the database search types. I also recommend adding a filter to sort tweets by date and adding a search bar to search tweets by hashtag. Finally, I suggest updating wayfinding functionality to allow the user to more easily scroll through publications.

Methods and Tools

Methods

  • Cognitive Walkthrough

  • Contextual Inquiry Interview

  • User Stories/Scenarios

  • Hand sketched and digital wireframing

  • Mid-fidelity Prototyping

Tools

  • Zoom

  • Miro

  • Google Sheets

  • Pen and Paper

  • Sketch

  • Invision

Project Objectives

Evaluate the usability of the UMN Press twitter search widget, identify key areas for improvement, and propose design recommendations to the application which support business goals and the primary user’s needs. 

Contextual Inquiry screenshot for portfolio.jpg

Easy to Use But Time-Consuming

To better understand what already exists and evaluate how well it works using a list of primary tasks, I first conducted a cognitive walkthrough of the UMN Press twitter search widget using the following set of questions for each identified action step:

  • Will the user try to achieve the right outcome? (Mental model)

  • Is the correct action visible? (Visibility/Hierarchy)

  • Is there a clear connection between the control and the resulting action? (Mapping/Consistency)

  • Is there sufficient and/or appropriate feedback? (Feedback)

Results from the evaluation indicated that the application displays system visibility for a batch search in progress and clearly shows buttons for approving and rejecting tweets. Additionally, the hierarchy of content is clearly organized, with a header navigation menu directing the user where to complete primary tasks. However, there is a lack of feedback once a search type is changed for individual titles under the Publications tab (i.e., does the widget updated its search results when a search criteria is changed?). Additionally, there is a lack of feedback after a tweet has been approved or rejected. 

Contextual Inquiry screenshot for portfolio.jpg

Understanding the Context

Next, to gain a deeper understanding of what the primary user actually does in their context, what their mental model is, and their expectations of how the application would work to complete key tasks, my team and I conducted a contextual inquiry session with the primary user of the twitter search widget in the UMN Press marketing department. 

Results from the contextual inquiry session indicated that while application “adds value” to her work and is relatively easy to use, the process of manually rejecting irrelevant tweets (i.e., tweets unrelated to UMN Press titles) is incredibly time consuming. That is, while the widget provides clear navigation and consistency of design elements, the decreased flexibility within the system (flexibility-usability ratio) makes the process of sorting through tweets inefficient. 

The user identified three key issues that slow down the process of sorting through tweets associated with UMN Press titles:

Key finding #1: Under the Tweets tab, tweets culled from the batch search process are sorted alphabetically by book title instead of date (when tweet was published), which prevents the user from identifying recent tweets that mention UMN Press book titles and authors.

Key finding #2: Under the Publications tab where the user can view tweets associated with a particular book title (where books are listed alphabetically by title), the user is currently unable to go back to the previous screen. The back arrow takes the user all the way back to the start (the beginning of the alphabet), which forces the user to manually arrow down to where she left off within the alphabet. This is inefficient and adds time.

Key finding #3: The current search criteria most utilized (Title, Title AND Author) works successfully for books with unique titles or subtitles. However, books with general titles that are not specific will retrieve lots of irrelevant tweets which makes it time consuming for the user to manually go through and reject irrelevant tweets associated with a particular publication. 

An additional finding related to the last point above, the user indicated that she uses hashtags associated with particular academic associations when using Twitter as a means to find conversations about particular books associated with those hashtags.

Working from the above findings, I developed a set of user stories to identify what the primary user needs to accomplish with the application. These user stories formed the basis of my recommendations for design changes to the application.

Wireframes

I sketched out the following wireframes with connect with my overarching design goal: Increase the system flexibility and enhance navigation to allow the primary user to more quickly and efficiently retrieve relevant tweets and identify which UMN Press titles are generating discussion on Twitter.

Filter and Search Box

I added a filter on the Tweets tab to allow the user to sort tweets by date. I also created a search box to enable searching for tweets by trending hashtags.

Additional Search Criteria

I updated wayfinding arrows and added page numbers for easier navigation between pages of book titles. I added additional search criteria (Hashtag AND Author, and Title AND Hashtag) to the Search Type Form. I also included columns for Hashtags and Catalog season.

Tweet Filter

I added a filter to enable sorting tweets by date for each publication title.

Working from my hand sketches, I then created higher fidelity wireframes in Sketch.

Filter and Search Box

I added a filter on the Tweets tab to allow the user to sort tweets by date. I also created a search box to enable searching for tweets by trending hashtags.

Additional Search Criteria

I updated wayfinding arrows and added page numbers for easier navigation between pages of book titles. I added additional search criteria (Hashtag AND Author, and Title AND Hashtag) to the Search Type Form. I also included columns for Hashtags and Catalog season.

Tweet Filter

I added a filter to enable sorting tweets by date for each publication title.

1 Publications.png

Prototype and Tour

I developed an interactive Prototype with built-in tour of the enhanced application. Until I embed the video here, click on the following link to take a tour of the prototype:

https://invis.io/25ZVKPEQP8M