Side Project — Collectful

ann chichi
7 min readSep 3, 2018

Problem statement

The digital world holds a bunch of resources for us to consume. The resources (articles, videos, etc) we store across multiple lists in the computer seem like the digital equivalent to endless piles of folders over our desks. While we hopefully keep up and digest the information, we also face another challenge of finding our resources effectively.

User Interviews & Survey

I made a survey and sent out via online community such as Facebook and Slack to gather some feedback. I targeted people who are around 24 to 35 age group. Some work in full/part time.


… Basically I have so many lists all over the place. It would be nice to a place to consolidate all the lists.

I often look for multiple locations for the stuff I save online.

I share with my friends or others when I think the materials will benefit them, especially if they are in the same profession that I am in.

… (I) used other tools but some need to keep pretty detailed organizational structure in it and stick with it; not really a fan of it.

Analyze the survey


  • Quick to add things
  • Have multiple lists & unorganized messy bookmarks
  • Hard to find items from the lists
  • Share info with friends or coworkers

After the interviews and survey, I was able to form a persona based on the common theme and discovered my findings below.


Based on the above mentioned, I was able to develop a list of potential solutions based on users’ needs:

However, we don’t include all the functions in this MVP. Some are placed in the backlog of our Trello board as we don’t want to jam a bunch of functions that are not the priority at this phase.

  • Easy to file, quickly add an item and categorize it
    (My research indicates that users want them done just a few clicks away.)
  • Easy to find, have search function
    (My research shows that users find it difficult to find items from their lists)
  • Set some constraints on folder creation.
    (Make it easy to save resources. The structure should be as simple as you can get away with, not huge, hierarchical perplexity. Reduce the friction.)
  • Make the list collection in Public or Private
    (Users store resources that for their own use while some collect for sharing purposes.)
  • Make it sharable
  • Favorite the collection
    (Users are able to favorite the collection and use the collected resources.)
  • No-unlimited nested folders. You want your structure to be as simple as you can get away with.

Which way we choose to measure success?

When I discussed this with Gloria, we found that there are some stats we probably can use such as:

1. The number of the items are clicked or not clicked in the collection in a month time frame. Since we also want the materials we save reusable, it might be good to know if we are actually using them.

2. We also like to know how many users have gone through the search and click the targeted item. If they don’t, it might be the search is not helpful or the process makes it not easy to do so, etc.

So we are looking forward to this when we can see some real user data. (Go Gloria!).

High-Level User Journey & Apps Actions

User journeys

Here I noted down the possible user journey paths. This way, they can help me define and understand the flow and what interface is needed for users to accomplish their goals.

User Journeys

Site Map

Site Map V1

Style guide

Since we will store different items here, the background color preferred is light gray here to bring out the content which will be set in a white background.

Style Guide

UI exploration & iteration

Initial concept testing

  • Users get confused with the words “highlights” and “favorites”. The former represented as the collection that I frequently accessed while the latter means the collections that I favorited from exploration. Users will naturally go to favorites to look for their links and didn’t know what highlight means to them. So Gloria suggested that Favorites be those we marked favorited which we access frequently and “Liked” are those we have liked from the collections of others.
Tags are replaced by the recently viewed on the left

Regarding the tags on the left side shown above. Some users are not that diligent to organize or ‘edit’ their tags. Most just leave it there and as a result, it ends up having a long batch and similar ones that they might not go through. This is an interesting find given that I was hoping to provide a convenient way to help users get to their content quickly. But I was wrong thinking the perfect scenario for using tags instead of our laziness (including my own habit). Instead of the tags that might be left unattended, users indicated that it might be more helpful for having the recently viewed section to remind them of their stored items. We can still use tags to help search when users add items to the collection.

In this case, users prefer V1 than V2

During testing, users prefer the horizontal menu (All, Favorites, Shared, Liked) rather than the vertical one. The reason being that it’s easier to digest and directly associates the menu with My collections as mentioned by one of the users.

V1 & V2 iteration inside the Collection

In №1, as the tags are no longer on the left side, it might be helpful to have a little intro about the collection along with the Private/Public button as well as share grouped together on the side. In №2, V1 didn’t accommodate well with long titles in edge cases. Some users got confused with the Create button as they were not sure if it was to create a collection or add an item to the collection.

I added the “add section,” (watch here 📺) because I try to avoid creating the unlimited nested folders where it seems like forever clicking through to get the items you want. However, when there are certain number of links accumulated, it might be great to have a section acting as a divider so users can scan through the info quickly and take them there. And of course, users are able to create a new collection as an alternative.

What I Learned, and What I Could Have Done Better:

💪In this project — Work In Progress.

We can spend plenty of time iterating to improve our design, but somehow no matter how much I try to understand users’ needs, there might still be a gap between what we know and what is out to the real users to avoid the revising cycle of what the users might not really want. Gloria is coding it now and we are looking forward to the real users feedback so we can improve.

But here are a few notes about what could already be done better. The design scale consideration can be done better here as well. When we use it individually, chances are high to add links to our collections. When teams or communities are using it, the lists might be too big and makes it hard to scan through the items. We can offer a better category template to help users categorize items and are able to make a differentiator among other categories.

There is no perfect way to organize digital information. Information overload has been around since the world wide web boom. With a bit of digital management applications may allow us to turn these piles of information into something organized and helpful to others. A lot of people love to share these days. They are able to structure and organize the information effectively into a big collection of useful information and share it with other people online. We benefit together and learn from each other. When information is organized in a more effective way, we also make it easily accessible for others when we share it.

💪Team up with a side project partner. Set clearer expectations for both sides. When we decided to collaborate, we see it as a learning process. No matter what the result is, we both grow in understanding better in our mutual profession and it strengthens our communication skills, bringing users to use it and hear feedback and improve. Whether the result is a good one or a failure, we gain and grow a lot in the process. That’s the most valuable part to me.

👉 Awesome Gloria. 🔥

💪Code My UI section When I volunteered to practice coding small parts of the UI components, Gloria agreed with patience. :) I enjoy learning to code because it helps me think from another perspective and improve my design in general.

Code My UI section

I used to think too much which stopped me from moving forward. Then I treat it as an experiment and just do it, then the rest will follow. No matter what the result is, I gain tremendously again and again. 💪😎

Thanks for reading this!!

🔥 Awesome Gloria’s medium.

🔥Awesome Gloria’s twitter.



ann chichi

ui ux designer / / I am from Kaohsiung, Taiwan and currently working in Victoria, BC Canada :D