Stories by Design

Overview

It’s one thing to see images or videos of an experience you had, but it’s another thing to have an experience of the experience.

Snapchat is about uploading raw experiences as they happened. Lacking a data plan I couldn’t participate conventionally. June 2016 is where it all started, I modified my iPhone to allow me to post content straight from my camera roll (not possible at this time). Having to upload my experience after it had happened, I decided to edit the video first. This was well received in my circle as no one really did something like this or would even put time into expiring content.

My Role
Deliverables

Graphic Design, Videography, Editing, Web Development

Content that expires inspires me.

Being a more forgiving format, I found myself more focused the next video. Expiring content is more freeing, spontaneous, leaving less of an urge to be perfect. Instagram Stories is a success as it diverged from the perfectionism culture on the platform. Public likes and comments are absent from the story format but private messages are open. Receiving one is more personal as it is a 1:1 conversation of appreciation of my work.

Sample of feedback I've received for my videos

True to the format yet still having an archive.

After 200+ videos I knew I wanted to develop an archive. To simulate the expiring content experience, thumbnails of each video appear randomly for a second through Javascript. The audience has to decide at that moment if they are interested by clicking in to watch the video before the next one appears.

Prototyping

Two rapid prototypes to determine scope

I used Flinto to build a mock prototype to understand the scope of features I will be needing for development. Through HTML and CSS I built a prototype as a base of how visually it would look in a browser before functionalities were implemented.

Rapid Flinto prototype of functionalities to implement

Html and css prototype for visuals

Development

One feature at a time.

By stripping away the aesthetics and focusing only on achieving one feature at a time I was able to accomplish the functionality I required for the website. Being new to Javascript, complexity was built overtime.

See the Pen mZMGre by nathan (@itsnathanlam) on CodePen.

Test environment to build one Javascript feature at a time

My Playground