Octobox

An app that remembers better

For most of 2014 I've been spending evenings and early mornings working on Octobox, an app that helps people collect images, bookmarks and notes in a simple and visually pleasing way.

The app works by storing things as files in users Dropbox, which is pretty unique and makes the users collection impossible ot corrupt and accessible from anywhere. This uncommon choice of user-friendly storage format created a lot of interesting problems that had to be tackled along the way.

My Contributions

Landing Page

The core marketing artefact and in most cases, users first experience of the product. Landing page has one simple objective - get the right people to sign up. This requires a clear targeted message to encourage the users you most care about to take an action.

Final design for the landing page was done before I started designing the interface for the app.

With Octobox these ideal users were designers, developers and other tech savvy users that need a place where they can collect & process found images, links and notes.

Sketches and finished inked illustrations of icons used on the landing page.

The page uses scanned hand-drawn illustrations and a clever structure to quickly give the overview of the unique features and is focused on getting users to sign up to the mailing list.

As of 15th July the website received 12,000 visitors (mostly through Designer News, social media & BetaList) of which 2100 signed up for the early access. That's an 18% conversion rate - pretty good compared to the standard 3-4%! Two weeks later the beta had 1500 active users (and has more than 2000 activated accounts) - a solid user base gained with no marketing budget at all.

Designing the App

The interface itself was meant to be very minimal from the beginning, designed around users content. Many actions, like sharing, moving and editing items need to be done quickly and need to feel natural, despite the limitations of the web platform.

I finished designing the interface pretty late in the process — about half-way through building it.

I started by laying out and prioritising the actions. Even though I started from scratch, the interface ended up following common patterns with a sidebar devoted to changing the central view and header to modifying its contents.

Pinning down the exact structure and functionality of the app was a long process and required producing tens of diagrams like this one.

I explored a lot of interesting ideas that would allow me to add another layer of depth and immersion to the interface. The one that sticked was having the interface adapt to current collection. This helps break down the *fourth wall* and makes the app seem a bit more conscious of users content. The interface also features a lot of CSS3 animations to make the app feel smoother and more pleasant to use. This is particularly important when users are waiting for the thumbnails to load in.

CSS3 hover animation for the image tile.
Colour of the logo and other elements changes depending on active collection.
Flexible share functionality available in a modal. Share link is generated dynamically.

Building the App

Octobox was easily the biggest app I've built by myself. With every project I always try something new, so with Octobox I decided to go for a simple Node.js REST-ful API for the backend and an Angular.js client for the front end. Decisions made during database design make the app very performant. On just 2GB of RAM and 2 CPUs it can easily serve up to 12,000 users.

User Feedback

The beta went public on July 15th and with over 1700 active users feedback has been great. App itself is currently offline, but the website itself is still live at useoctobox.com.

Here's some tweets from Octobox users:

Post Mortem

I shut down Octobox at the end of August 2015. After a year, it had quite a few active users, but maintenance was starting to pile up and I just didn't have the heart or time to give it deserved attention.

This sounds like an unfortunate outcome, but the amount of experience, momentum and knowledge this project has given me is still surprising and affecting me today. Ultimately, I think that's the main purpose of side-projects. I decided to open source the code so that others can learn from it as well - it's on Github.


Thanks for reading. Have a project you'd like to chat about? I'm available for consulting and more on select projects! Send me an email