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.

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.

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.

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.

Site Info

What is this?

Ryan Luu's Portfolio & Blog

Why does this look familiar?

The design mimics Dropbox Paper. It's what I use to organize my daily process, so I thought it would be a fun challenge to recreate its ux from scatch for my personal site.

How was it built?

This site was custom coded with React Hooks and Gatsby. I included a few unique features that I enjoy, like hovering over videos to initiate playback.