Completed May 2012
roles: UX/UI, Interaction Design

Pose App

Created the companies first iPad app and the first social sharing, direct to purchase app.

Go to Pose App
Background

Pose is a social fashion website, heavily based on mobile interaction of its users. Pose's content is primarily product shots or uploaded images of themselves posing. Users are able to tag the images of the individual garments they're wearing, generating a database of products.

Demographics

Primarily for females 18-45, who follow fashion and like to connected to trendsetter and fashionistas.

Goals

Design a tablet experience that feels like a never ending curated magazine. With the ability to interact with the images, allowing users to see information about the items as wells as the ability to make personal collections and directly shop the tagged items. 

Challenges

Early stage of the photo-sharing ecosystem. Breaking the grid layout and designing for a rapidly evolving new tablet space.

User Experience
Organic Layout
User Experience
Organic Layout
Magazine Feel

We began by gathering magazine spreads that enabled us to breakdown patterns and composition layouts. This allowed us to capture similarities and common threads, bringing the organic feel to the mobile space.

Architecture Challenge

When the user swipes it makes a continuous stream of images morph into an organic changing layout. Capturing the experience that each swipe is a new content exploration vs a symmetric grid which is more of a utilitarian experience.

UX Exploration
Messy Grid

After brainstorming multiple approaches. We decided to explore the idea of pictures fanned out over a table with endless layering possibilities. While confining the content to the screen area allowing the screen size to dictate the algorithm's parameters. If the experience showed promise the plan was to continue refinement.

Go to messy grid prototype

The prototype gave us insight on loading performance and limitation on random scaling. Which made it very difficult to create a curation feel without some sort of order. We took a step back and looked for a design first solution.

Final Execution
Film Strip

Instead of an algorithm that controlled the content feed and had to create a screen logic. We separated the screen logic into a design architecture technique called film strip. Which meant designing a layout long enough that the user would experience an endless changing layout, while maintaining high performance with load progression based on "directional tracking."

Architecture

After multiple calculations we came up with 4 main sizes. When placed in the right combination it would create multiple framed layouts that felt organic. While allowing the 4 specific sizes to easily ratio down from the original uploaded photo without any loss in quality. This combined with the user's own photo treatments and cropping would create a controlled randomization.

Progressive Loading

The final order was based on "directional tracking" the way users absorb content. By using internal testing and random testers, we found the correct balance between loaded images and the users' expectations.

User Interface
Design & Features

The UI approach was simplicity without obstructing the content. {Left} navigational items, {right/bottom} collections. Aesthetically we focused on layering, texture and intuitive animations to give a vibrant user experience.

Navigation

An abstract strip located on the top left is used as a nav indicator that's activated by dragging or tapping, animating the navigation to slide out from the left.

Collections

First product feature of its kind. Personalized curated collections with drag & drop capabilities. Users can drag the full image or individual tagged garments the posers are wearing into custom collections.

Manage Collection

Allows users to organize, delete, and edit their collections.

Shopping

User can directly shop from the app by tapping on a photo tag that contain the shop modifier on the tag icon.