UMN Twitter Search Widget
Overview
The University of Minnesota Press (UMN Press) is a publishing arm of the University of Minnesota that publishes roughly 120 books per year. They have a custom Twitter search widget used to capture conversations to help them engage in meaningful and relevant conversations about their publications. The widget can perform rudimentary tasks needed to search and view tweets. UMN Press is interested in opportunities to improve and add functionality to their widget. A team of UX Designers including myself was brought onto the team to dive into this problem space.
Through a cognitive walkthrough and contextual inquiry, we found opportunity areas in increasing the efficiency of viewing tweets, increasing the visibility of certain elements, and areas to boost user confidence in the widget. After our research, I was tasked to prototype and create an interactive prototype tour of our recommendations.
Role: UX Designer
Team: Sarah Monson, Jessica Huynh, Heather Scheil & Asef Chowdhury
Tools: Miro, Sketch, Craft, InVision, Google Sheets
Methods: Cognitive Walkthrough, Contextual Inquiry, Low to High Fidelity Prototyping, Interactive Prototyping
Design Cycle
Cognitive Walkthrough
We started our research by conducting individual cognitive walkthroughs. We wanted to be able to gain an understanding of what already exists and how well the current widget works. Areas to focus on uncovered from the walkthrough were viewing tweets, changing publication search, and filtering approved tweets.
After our walkthroughs, my team and I gathered key ideas and lingering questions onto a Miro board. This allowed us to gather our thoughts and really hone in on focus areas for the contextual inquiry.
Research Protocol
The following goals were identified for the protocol:
Gain a deeper understanding of the workflow for key tasks, especially flows that were not visible in the cognitive walkthrough (e.g., uploading a list of publications, search Twitter for a batch of publications) and the pain points/gaps within those task flows.
Better understand the decision-making process behind approving or rejecting a tweet.
Gain insights into the relationship between workflow navigation and the user’s context/environment.
Contextual Inquiry
The Web Marketing Manager, the primary user of the widget, was the sole participant for the contextual inquiry.
Our session was conducted via a Zoom call and lasted about 45 minutes.
A contextual inquiry was chosen for this project to gather insight on how this tool is used in relation to the user’s environment. Gaining this insight will help us make informed recommendations with an understanding of what the user does and what other needs they may have.
Synthesis
Our team Miro board to accelerate the synthesis of our data. Observations were grouped by pain points, successes, suggestions, and relevant quotes.
Opportunity Areas Identified:
Increasing the efficiency and workflow of viewing tweets
Increasing the visibility and feedback of filtering and viewing tweets to boost user confidence
Research Findings & Prototype Plan
After we synthesized our research, I individually moved forward with the research findings and prototype plan for this project. I created user stories surrounding our insights to help guide my prototype. This helped me narrow down key screens I wanted to focus on and allowed me to further rationalize our recommendations against budding ideas.
Select User Stories:
As a Web Marketing Manager, I want to view tweets chronologically and sort them by the number of tweets so that I am up to date with the most recent information about publications.
(severe) Tweets page: Have tweets be sorted by chronological order and increase the number of tweets on the page to increase workflow.
(severe) Publications page: Have the “Undecided tweets” tab be sortable by value so the user can work through publications with the most tweets first.
As a Web Marketing Manager, I want to go back to the page I clicked on after viewing a publication so that I don’t have to hit “next” to get back to the page I was on.
(severe) Hitting “back” from a title will take the user back to the corresponding publication page to increase workflow.
Select Screen Flows
After creating user stories, I sketched out some screen flows to get an idea of what our ideas looked like and how well they could work. This is an efficient way to see how well my ideas are communicating our intent before moving on to low-fidelity prototyping.
Ability to filter by undecided tweets under the publications tab
Ability to show chronological tweets for publications under tweets tab
Prototyping
After my prototype plan was finalized, I moved on to prototyping.
Low-Fidelity Prototypes
Select High-Fidelity Prototypes
Interactive Prototype
After finalizing the high-fidelity wireframes in Sketch, I imported them to InVision using Craft to create an InVision prototype tour.
Below is a walkthrough of my prototype:
Summary
I had a lot of fun with this project! It was most enjoyable creating the prototype and satisfying to see the complete interactive prototype at the end. At first glance, it was hard to see the opportunity areas with this project due to the lack of knowledge I had surrounding the space. The contextual inquiry really allowed me to see the problem space and empathize with the user which helped tremendously with planning for the prototype. This really gave me insight into the importance of research with actual users and creating stories or scenarios that help guide your work.
Be curious.
Keep dreaming.