03 ——— Colllect

Designing a Visual Bookmark Manager as a Side Project

Introduction

Colllect.com is an open-source project. It lets you save everything that inspires you and store it anywhere you want. Organise, on a board, all your visual resources, links, notes or colour. Create projects and collaborate with your team.

Year

2017

Work

Side Project

introduction colllect
introduction colllect
01 Context & Epitaph
The original idea

I’ve always used services to store my inspiration resources. I like to save images and links with an interface to organise and share them when working on a project. This is a time-consuming task when it comes to doing it with a new service. Unfortunately, all the services I used shut down, so I decided to build one.

The end

This was my first side project, and it helped me to improve my design skills but also how to build something from the ground. Finding motivation, how to rationalise decisions, working as a team. I decided to not pursue working on this project because the excitement and the momentum were gone.

02 Process

With a good knowledge of the different bookmark and resource managers like Zootools, Kippt, Iceber.gs or Octobox, I added to my research, sites with the same problematic-like blog or news feed. I made a list of basic functionalities and kept the elaborate ones for a second version.

icon goals Defining goals

The basic tasks of Colllect are to add, remove and organise files (visual, link & note). The point was to have a decentralised tool than could be installed on your server or plugged with Dropbox.

icon prototype Building the experience

I was frustrated by a lot of interfaces I’ve used. They were not built to deal with the import of a hundred of files the first time and were not quick enough for daily use. Efficiency was key to design the experience.

icon ui Designing the product

The content you add in the interface needed to take most of the space and Colllect needed to be distraction-free, but it should also be a fun interface with its own personality.

03 Wireframes & Prototype

Colllect is designed to organise your resources with tags. You can add multiple tags to an element and filter all elements with that tag on the page. You can also create collections if you want to be more organised, or projects where you can export your project to show it, for example, like a mood board to your team. You can also connect your Dribbble or Behance, and get your social feed directly into Colllect.

wireframes
Main focus

The purpose of Colllect was to be an easy day-to-day interface where recurrent actions needed to have as less friction as possible. And we tried to build some features in that way :

  • Tag manager

    I wanted to create an intuitive tag manager that was fast to use. The tag manager opens itself near the button so you don’t have to move your mouse far from where you clicked to do your next actions.

  • Multiple selection

    If you have tons of files to manage and you want them to be organised by tags, it takes a huge amount of time. I tried to simplify the process by adding a custom menu when you select multiple elements.

wireframes thumb
wireframes tag
Popup

Working mainly with popups was the solution, because it feels like they aren’t cutting the user flow. If you add content to a collection, it’s better if you constantly see the collection in the background to make sure you add the element to the right collection. The account page is also a popup.

wireframes profile
Prototype

Working on a quick prototype helped us to realise the things that were not working. For example, the hover on the thumbnails, since I always put my cursor in the gutter, it felt that the action on hover was frustrating.

prototype
04 Building the interface

The masonry grid-based design was chosen to not alter the content. I wanted to keep the ratio of the pictures rather than having everything the same size, to keep that total overview on the content. Sometimes when you save a picture, the interesting part is at the bottom of it, so by using cropped thumbnails, you won’t remember why you saved this picture. All of the actions, like adding an element, works with popups.

default interface
Default grid interface
popup upload
Adding a new picture
popup picture
Popup after opening a picture
popup collection
Collection's settings
popup tag manager
Tag management
05 Interaction

Building the interaction in motion, helped us determine the efficiency of the animation. I didn’t want that animation to slow down the process of adding content. I used After Effects at first, but an HTML prototype gave a much better result when trying these interactions.

06 Logo

We had a couple of iterations for the logo. We selected the one displaying the idea of collecting pictures in a book, so I used a paperclip with a simple sans-serif font. We wanted something minimal and simple that would be easy to play with.

logo black
logo white
07 Landing Page

This landing page was probably the first satisfying project I did. I have a ton of iteration, from playing with illustration and a character behind their desk at night to 3D mock-up. But it never felt right. The illustrations were not ‘mature’ enough, too cartoonish and 3D mock-ups were too overused. I didn’t want to show the interface because it was too bland, just a grid of pictures. So, I tried to work on something around displaying illustrations or pictures like the grid in Colllect. I didn’t want the product to have the appeal of someone else’s work, so I used flat illustration to show content. See it live!

colllect landing page
Playing with SVG

Every project is a chance to learn and explore something new. With this one, we tried to play with SVG to understand the boundaries of it. We played with SVG and mask to create interaction. It helped us in displaying more information without showing the same picture.

Interaction content
Home animation (don't mind the compression)
Thanks for watching! Back home