Collect: Building an iOS app
for organising screenshots

Collect: Building an iOS app for organising screenshots

About

Collect is an iOS app for organising screenshots on your phone easily with tags searching in them.

I designed, built and shipped this app with three goals in mind:

  • to solve a problem I had
  • to build something of my own
  • to learn about developing for iOS in the process

Problem

People like to collect things. My favourite thing to collect are screenshots of apps. I have hundreds of screenshots on my phone. Most of them are taken for inspiration when I see something I like in an app.

But that's where the story ends for the most part. Default Photos app provides almost no means for categorising screenshots or searching in them. And I couldn't find an app simple enough that would allow me to do just that. So I set out to build one.

Screenshots

Designing for Simplicity

The goal for this app's design was utmost simplicity. It should allow people to do 3 basic tasks: 1. import screenshots, 2. tag each screenshot, 3. search the whole collection.

Flow

Before jumping into anything high-fidelity though, I laid out the flow of the whole app to have a big picture. The main idea was to import screenshots upon first launch and then open screenshot detail from the gallery where tags can be added. Once some screenshots are tagged, people can search in them.

Collect_flow

Validating the Idea

I reached out to a few designers in my network and had a short chat with them around the problem I was trying to solve and I showed them the concept to get feedback.

What I learned was that I wasn't alone with taking a bunch of screenshots of apps and others shared the problem of not having an easy way to organise and search in them.

Highlights

Collect: Onboarding

Onboarding

The first goal is to allow for easily importing many screenshots. First-time launch screen is designed around that and it also shows a small preview of how the app works.

For the import, I used a library that allows selecting multiple images, because the default iOS image picker allows selecting only one at a time.

Gallery of Screenshots

The main screen shows all imported screenshots that you can browse and open. There is a fixed search button in an easily reachable area under the premise that searching is more frequent than adding new screenshots.

There's obviously the import button and also access to settings where you can manage your tags.

Collect Gallery
Collect: Tag screenshot

Tagging

For the whole concept to work, adding tags to screenshots is necessary. This can be tedious so I did my best to make it as easy as possible.

The app comes with a set of default tags so you don't have to create them from scratch.

On the screenshot detail, you can open a tagging sheet and easily select the tags you want. You can also add a new tag here and it's added to the screenshot right away.

Searching

Looking up screenshots is a matter of selecting tags that you want to see. The search is additive: it gives you results for any of the selected tags. The idea is that when looking for inspiration, it's better to see more than less.

Because over time you can have loads of tags you can quickly filter them by name.

The search button shows the number of results you'll get for your selection for immediate feedback.

Collect: Search

Building the App

I knew from the start that I didn't want to outsource the development. One of my goals was to learn a bit of Swift and to build it on my own. This proved to be the biggest challenge on this project. I've never learned anything beyond basic HTML & CSS. Luckily, I discovered designcode.io and their lessons helped me immensely to get started with Swift and developing for iOS.

I believe in learning by doing and so my approach wasn't to learn Swift first, but rather learn bits and pieces needed to build this as I went along. It helped, of course, that the app was completely offline and the feature-set was very limited.

Iterating the Design

As I was progressing with the development, I was making small design tweaks along the way. I also reconsidered some features that I had in mind earlier – e.g. an integration into a system share dialog.

My very limited development skills were the main project constraint at that point and I had to make some sacrifices to be able to ship the app. Done is better than perfect.

What I learned

I shipped the app in Autumn 2018 and I was happy to tick off all the goals I set out at the beginning, but the most important were the lessons I learned from working on this.

Knowing some code is very useful

Even though I had many sticking points during the development, I learned that knowing some code is really useful. I discovered that some things are actually easier to implement than I imagined before. It also gave me a new understanding and appreciation for engineering work—I learned that engineers have a lot of influence on the UX of a product, because lots of design decisions lie within their work.

Best insights come from using a real product

It was useful to start with the overall flow and a simple prototype to materialize the main idea. However, once I could actually use the app with real data in it, it enabled me to discover improvements I would've never seen in the prototyping phase. Using real products leads to the best insights.

It was useful to start with the overall flow and a simple prototype to materialize the main idea. However, once I could actually use the app with real data in it, it enabled me to discover improvements I would've never seen in the prototyping phase. Using real products leads to the best insights.

Get the app

Collect is available for free on the App store:

appStoreDownload

(c) 2019 Adam Amran