Collect: Building an iOS app for organising screenshots

Collect: Building an iOS app for organising screenshots


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

Why I built Collect

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.


Designed 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.


The flow of the app is designed to cover the three basic tasks. The only extra thing is a simple management of tags.

The main idea was to import screenshots upon the first launch so that people can get value of the app as soon as possible. Then the next step is opening screenshot details from the gallery where tags can be added. Once some screenshots are tagged, people can search in them.

I laid out the flow of the whole app before jumping into anything high-fidelity though to have a clear big picture.


Initial concepts

Based on the flow, I designed an initial concept of the app and prototyped the basic interactions.

I included some extra stuff such as favourite tags on the top of the home gallery screen.

Armed with something tangible, I decided to validate the idea.

Initial concept of the Collect app

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.

Iterating within constraints

After a round of feedback, I went back and looked at the concept from a more practical point of view. Given my very limited iOS app development skills, I knew I'd have to make some trade-offs. I decided to cut off anything that didn't directly support the three basic tasks.

I created an alternative visual design that was simpler and used more native-looking elements. I decided to go with the simpler design, since my own ability to code was the biggest constraint.

Here's how each key part of the app is designed in more detail:

Collect: 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.

The NavBar is reserved for the import button and also access to settings where you can manage your tags.

Collect Gallery
Collect: Tag screenshot


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.


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 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 design during development

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 how much influence engineers have  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.

Let's talk

Let's talk

Whether you just want to chat about design
or you want to discuss an opportunity, I’m all ears.
I’m not available for freelance work though.

Drop me a line:

Connect with me on Twitter:

(c) 2020 Adam Amran