PrintHerd

Helping students find printers fast

UI/UX, Mobile Application
Project Overview
How can we help Tufts students find printers on campus? For our Human Computer Interaction course, we created a mobile application that helps students navigate to printers and report issues.
Skills
  • Figma prototyping
  • Usability testing
  • Mobile UI design
Team
  • Me: competitor research, design, prototyping
  • 3 other designers
Timeframe
7 weeks
⚠️ The Problem

At Tufts, students print using a system called JumboPrint. Printers are located around campus, but there is no map to visualize where the printers are. There is also no way to check the status of printers.  

Imagine you are a Tufts student named Justin. You're late for class, and you need to turn in a printed essay. You run to the printer you always use. The printer is out of paper! It's the only one you know of. How can you quickly find a nearby printer that has paper? Enter PrintHerd.

Search within a building

Type building name to see all printers within that building. View printers in list or map view.

Search with filters

View filtered printers in list or map view.

Show printer details

Drag details dialog to minimize. Drag again or tap the map to clear dialog.

Report issue with printer

Printer status updates immediately in details dialog.

Manage favorite printers

Swipe to delete, or tap 'Edit' to activate delete mode.

Project Stages
Preliminary Design
  1. Competitor Research
  2. User Characteristics
  3. Definitions of App Functions
Prototyping
  1. Paper Prototyping
  2. High Fidelity Prototyping
Usability Testing
  1. Participant Survey
  2. Observations
Iteration
  1. Improving User Flow
  2. Printer Pin Iterations
  3. Revising Filter Icon
  4. Augmented Reality

1.

Preliminary Design
Competitor Research
Competitor 1: JumboPrint Website

The most direct competitor to our product is the existing Tuftswebsite about JumboPrint. Like our proposed product, the Tufts website has the locations of every JumboPrint printer on campus. The website also lists printing costs and has information about how to use JumboPrint on various devices.

✅ Pros
  • Has locations of JumboPrint printers
  • Has printing costs and some printer info
  • Is a subpage of Access Tufts, so it is connected to other official Tufts sites
❌ Cons
  • No navigational tools
  • No location information besides name of building
Competitor 2: Tufts EcoMap

The TuftsEcoMap displays recycling locations and other sustainability and transportation landmarks. It is integrated into Google Maps and therefore has detailed location information. However, the EcoMap does not show locations of JumboPrint printers.

✅ Pros
  • Shows locations within context of a map
  • Users can navigate to specific locations
  • Users can filter by which type of landmarks they would like to see
❌ Cons
  • Does not have printer locations
User Characteristics

Before prototyping, we outlined key characteristics of our users:

  • Tufts students
  • Roughly ages 18-25
  • Familiar with mobile apps
Functional Requirements

We defined several main functions that we wanted our app to include:

  • Identify printer locations. Visually locate printers on campus.
  • Search for printers with specific requirements. Be able to filter a printer search.
  • Report issues with printers. Submit a work order for an out of order or out of paper printer.
  • Check status of printer. Be able to see whether a printer is functioning or out of order.
  • Search within a specific building. See all printers within building.

2.

Prototyping

We began our prototyping process with paper prototypes. Then, we moved into medium and high fidelity Figma frames.

Paper Prototyping
High Fidelity Prototyping

I took the lead on our Figma file, bringing our paper prototype screens to life. I created several components and custom vector icons. These selection components were used in our filtered search screen.

3.

Usability Testing

For each usability test, we asked the participant to complete several tasks and "think out loud" while they used our app. The tasks targeted the five main functions of our app. Then, we asked each participant to fill out a brief survey about their experience. We summarized some key insights from both the survey and our observations of the users.

📝 SURVEY Key Insights

  • 4 of 5 users said they would use our system if they needed to print something
  • 4 of 5 users said our system was "easy to use"

🔍 Observations Key Insights

  • Users were unclear on how to go back to the main map
  • Filter icon was not recognizable
  • A user wondered how an out of service printer would appear on the map

4.

Iteration

After usability testing, we got to work revising our prototype.

Improving User Flow

We have three main screens involved in showing a printer's information: home, minimized info, and info. Here are the three screens before and after our revision:

Initially, the printer info dialog could only be minimized by dragging down. The minimized dialog could only be cleared by clicking the "X" button. This created a complicated flow for returning to the main map from the printer info screen. We took feedback from our usability tests and created a more efficient and intuitive way to navigate these three pages. Our revised design allows users to either drag the printer info dialog or tap on the map outside the dialog to return to the main map.

Printer Pin Iterations

One challenge brought up from our usability tests was how to communicate that a printer is out of order, or, more broadly, how to communicate each printer's status without creating too much visual noise. We tried several different printer pin designs before settling on the one in the bottom left.

Revising Filter Icon

Initially, our filter icon resembled a funnel. However, users revealed that they did not associate the funnel with filtering and would expect to see something like sliders or toggles. Therefore, we updated our filter icon to fit what our users expected.

↪️ Takeaways
  • In a mobile application, navigation is key; the home screen should always be no more than a few taps away
  • Intuitive gestures, like swiping, are preferred over tapping buttons
  • Icons must be instantly recognizable
👊 Impact

Before our revision, 4 of 5 users said they would use our system if they needed to print something. 4 of 5 users also said our system was "easy to use."

⏳ If we had more time
  • Run another usability test on our revised design
  • Integrate cash balance into display so that users can see how much printing money they have
  • Create actual printing interface and connect to existing JumboPrint system