Neat
Idea: Visual Media Collection
Role: Creator, Product, Frontend
Team: Osebo Akhigbe, Diego Quispe
Tools: React, Redux, MySql, SCSS, Sketch
Timeline: 2016-2017
Problem
It started with a problem that my friend Osebo experienced in 2016. Osebo is a digital designer and was having trouble keeping track of his design inspiration and digital resources. His saved content was scattered across multiple different services making them difficult to recall when needed.
Question
How could we create a visual way for designers to collect and organize their digital resources?
Solution approach
A web app that enables designers to save any url, embedding the content and visuals for easy recall.
Research
To see if others had similar challenges, we interviewed designers asking them about the tools they use to organize their digital resources. The primary responses were bookmarks, Pinterest and Slack, so we did competitive discovery to understand the strengths and weaknesses of each.
- •
Bookmarks are universal and simple to use, but they lack visuals which can make them difficult to quickly recall.
- •
Pinterest pins are great for visual collections but limited to certain forms of content missing the ability to collect articles, webpages and 3d experiences that creators use in their workflows.
- •
Slack has a plethora of places for collecting resources, but content is easily lost across chats and channels due to the quick pace of conversations.
Those learnings gave us the confidence to move into user flow mapping and information architecture.
user interview
interaction mapping
Design
During our design process we prioritized making saved items as visual as possible for ease of recall and appealing to our designer target audience. We also heard from early users that it can be frustrating to have to sign up or log to begin saving, so we built a way for users to create anonymous collections that would temporarily save their content to local storage and then signing in would permanently save the items to their account.
wireframe list view
wireframe login
wireframe collection
grid view
list view
mobile
Development
Enabling users to save and recall quickly was the focal point of our efforts. Users could drop any link into the tool and it would either pull the relevant image or take a screenshot of the webpage to be used as the primary image that users could refer back to in their collection. We also made returning to content extremely simple with everything from videos, music and full webpages all opening within an overlay so users never had to leave their collections to interact with content.
add link to collection
embed rich media
Reflection
Although we had created a clean and intuitive experience, we ran into a blocker when we weren’t able to allow users to create multiple collections. Our backend wasn’t as sophisticated as it needed to be and our lead backend dev left before bringing that functionality to fruition. That led to collections get unruly and ultimately became the downfall of the experience.
Despite the outcome, I’m very happy to have had the opportunity to work on Neat. It gave me the excuse to learn React/Redux, I was able to get more reps running through the product development lifecycle and most importantly I was able to collaborate with some awesome creators that remain close friends.
