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.
Primarily for females 18-45, who follow fashion and like to connected to trendsetter and fashionistas.
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.
Early stage of the photo-sharing ecosystem. Breaking the grid layout and designing for a rapidly evolving new tablet space.
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.
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.
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.
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.
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."
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.
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.
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.
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.
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.
Allows users to organize, delete, and edit their collections.
User can directly shop from the app by tapping on a photo tag that contain the shop modifier on the tag icon.
