intro image

Intro

When I was challenged to take a portion of the Instagram app and rethink and redesign it. It threw me for a loop. I often think of different things in apps that I like or don't like. Transitions, app design, behaviours. The way you upload a photo, post an update, tag a location. What I don't often do is get around to being pro-active about flushing out my ideas. Sometimes they end up in sketches. Other times their initial thinking make their way into a dribbble shot or even into a client project.

The rest of this page is a collection of thoughts, sketches and semi-tight comps. My goal was to help show how I work. What I thought about and why I did what. This is a beginning of a larger conversation. I hope it continues...

Process

With this project I followed a process I've done for many many years. Sketching. I often find sketching a great way to get ideas out. For this project I spent some spare time getting a screw taken out of my cars tire (second one in 3 weeks ugh...) sketching on my daughters iPad with the paper app (thanks em!) I followed up with a bunch of sketches and notes in a pad at home. Since I don't have a whiteboard at home I was reduced to paper and the iPad. But often if I can get myself in front of a large whiteboard I love to sketch big and standing up. Even better is sketching with people on the same project as me as I'm a fond believer in collaboration within projects. Below are the sketches I captured in the beginning stages of this project.

Sketches

These are some of the sketches I made in the early stages and throughout my tinkering with this idea. While the ink ones have been photographed. I did some on the iPad with the paper app. Click here to view the Paper app sketches in PDF.

Wireframes

These are some cleaned up wireframes from the original sketches. I've been making my own wireframes to varying degrees in Illustrator for a few years and have settled on a style that often works for me and the agency life I lead. Truthfully in the agency world wireframing and user flows aren't that common in most of the places I've worked in 12 years. These are a culmination of personal experience and the interactions I've had with friends during my career.

Wireframes are on their way, they got lost in the shuffle and the busyness of my day job. Rest assured they will find their way to this section of the project for your viewing pleasure shortly. Thanks for understanding.

Ideas

I settled on the Explore tab within Instagram since I felt it was an area that could use some reinvention. When I picked this area to explore I did so with a few points in mind that I thought might be intriguing to users.

Explore - Home

The new Explore home screen currently shows off two different featured "sets" of photos. Each of these sets is powered by user hashtags. In one case we have the Weekly Hashtag Project featured. We know this is a stream curated by Instagram since its icon is associated with the hashtag. The images in these stream boxes are directly from the sets of photos. These would be updated as new photos get added. Optionally you have the ability to see "More". Users pressing on the more button will have the next streams push the page south to display those streams.

While hashtag powered streams have take the more prominent space in the upper portion of the screen. popular photos get their own division and appear further down. While space may seem slightly limited in this example. New larger screens will allow for more of the popular grid to peek up from the bottom. (i'm still waiting for my iPhone 5 to arrive)

click to see 100%

iPhone screen 1
iPhone screen 2

A dip in the stream

If a user dips into a hashtag stream, say the #WHPgreatheights tag. We slide to the right and see the Stream Explore screen. This screen shows everything to do with this weekend hashtag project. You'll notice that the upper photo mosaic contains some of the images found within the stream. THese will slide to the left ever so slightly constantly revealing and hiding images in the background. You can swipe the info panels to the left to reveal more information about the project.

Swipe up and scroll through the stream of photos with this hash tag. You can use the familiar view controller to see grid, list or map views of photos in this stream. This stream is a continuous updating stream. When you reach the end of the loaded content you'll get more by scrolling south. This is nothing new but still a habit I love in apps ;)

click to see 100%

Snap, tag, done.

At the top of the image thumbnail stream you'll see the top left-most box isn't a photo but rather a plus icon. This lets users add to this particular hashtag steam. This plus icon launches the camera, allows a person to select or take a photo in the same familiar manner they are used to. Upon completion their photo will have that streams hashtag auto tagged to the image. Adding it to the steam.

The ability to view and then immediately participate in the stream is whats really intriguing to me. Blending this new consumption method with the familiarity of taking photos and posting them is really a neat gesture to me. You can turn passive viewers into active participants.

click to see 100%

iPhone screen 3