Product Design / Screenshots

I take screenshots to save things (books, movies, music, events, etc) I want to come back to later. I wanted a way to categorize them so when I do want something new to read or watch, I have a place I can quickly find something.

Some features I thought of for a first version:

  • Tag a screenshot as something to Read, Watch, Listen or Remember
  • Use OCR to gather metadata to make it easy to find things on other platforms (books at the Library, music on Spotify, movies on Netflix, etc)
  • Search through my library of saved screenshots
  • Screenshots that are categorized in the app are removed from the iPhone photo library for better organization
 

Swiping to the right brings up some categories, to the left discards it and brings up the next image.

2018-08-13-17_32_28.gif
Screenshots_v4_Discard.gif
 
 After choosing a category, the app scans the image and detects whatever text it can.

After choosing a category, the app scans the image and detects whatever text it can.

 The found text is presented when adding metadata about the screenshot.

The found text is presented when adding metadata about the screenshot.

The results from the OCR processing allow you to add in the details about a screenshot without doing much typing.

 
 

The search screen lists all screenshots in your library, allows you to filter by category, and is indexed on all the text found in the OCR process.

 Screenshots in the list are sorted by the date, newest first.

Screenshots in the list are sorted by the date, newest first.

 This feature would really only come in handy if you had hundreds of screenshots, where searching just by text might not be enough and you want to narrow it down to a category.

This feature would really only come in handy if you had hundreds of screenshots, where searching just by text might not be enough and you want to narrow it down to a category.

 
Screenshots_v4_Detail.gif

The library tab shows a grid of categories that, in the future, could be customized. Tapping on "Read" lists all the books or articles you have saved. When viewing a single screenshot, relevant outside links show up near the bottom.

 

Process

I designed everything in Sketch and made quick prototypes along the way in Flinto.

 
Screen Shot 2018-08-15 at 10.18.10 PM.png
Screen Shot 2018-08-15 at 10.18.45 PM.png
Screen Shot 2018-08-15 at 10.19.11 PM.png
 
Screenshots_v3_Filter_v1.gif

At first I thought the library would be a chronological list of saved screenshots. This felt clunky since the most common use case is to look through one category at a time.

 

Another rejected prototype, this one is an idea for filtering search results. This version obstructed scrolling and when friends tried it they were confused by the placement of the filter button. I ended up with a very similiar solution, but moved the button next to the search field.

Quickly making these prototypes and showing them to people let me know if I was heading in the right direction. You can download all of these designs and prototypes below.

 

Files

sketch-mac-icon@2x.png

Screenshots.sketch

twitter_summary_card-a2e1a23c2eefd5a1d1cc29b8ccd8c264580b81d868932ecb2f9b02d6d6a399a7.png

Screenshots.flinto