Image Browser

The Image Browser project was developed as a testbed for validating a UX/UI rendering engine which I had proposed to the graphics engineering group.  Over the previous 6 months prior to starting on Image Browser, I developed the architecture and specification of the engine .  Working with graphics engineering teams I investigated the existing technologies available at the time that would effectively render next-gen UI and interactions within Android. At that time, no solution was found which was capable of meeting the challenges of the UX we were attempting to achieve, while satisfying the business requirements.  As a result, I worked to spec the design for an engine which would meet the needs of the visual and interaction teams.

At a high-level, the architecture I proposed for the engine would provide:

Image Browser was designed with a simple premise:  exploring captured images should be delightful and engaging.  When considering approaches for IA on which to build the product, we were struck by the following issue:

Users are comfortable with content existing in several contexts;  a single piece of content should be available in as many contexts as desired.

I sought to come up with a solution that would allow this notion of an arbitrary contextual grouping while leaving the core data set of images unaltered.  The research resulted in a set of basic assumptions which would allow for immediate implementation in the product, while providing a path for future growth:

• Images should be considered as a persistent data set which could be arbitrarily aggregated into folios
• A single image can exist within many folios simultaneously
• Folios can be created and destroyed without deleting the images within them
• User agency or automated methods can be used to create folios
• Algorithms could be developed and extended to automatically create folios based on a user’s preferred criteria.  For example:

Location | People | Time of Day | Color | Event | Search term

Auto-generated folios would be populated by an algorithm allowing the user to examine their content in new and meaningful ways.

After much discussion as to how to build an MVP from this concept, we decided that the application should have an “image-first” philosophy for the design, making the content the focus.

After exploring different options for the representation of the images, we decided the less interface the better to keep the images the heros.  We minimized any elements which would distract from the imagery in favor of using text labels overlaid over imagery.

IA and Rationale

The IA decided upon in order to achieve this approach provided a two level hierarchy where appropriate:

1. A category type would contain albums created by that category;
2. An album contains an array of images in a single level arranged in potentially different methods.

Employing that directive, we chose 4 categories which drove the visual representation of this concept on the main page of the application:

To keep the content fresh on the main page, images from each of the first three categories would transition gently,  within their respective sections in a simple and elegant manner as the application remained on the home screen.

The overall flow map of the Image Browser uses a consistent pattern of diving into the hierarchy and surfacing back up to higher levels of the hierarchy.

After validating the UX and Interactions I proceeded with the visual design exploration.  Based on the guiding principle of an image-first strategy I investigated ways to represent the components of the screens for the interface.  I referenced natural lighting of objects as an option for visual style.

Images set within frames have a unique look as a result of the frames casting shadows on the images that makes the images feel less stark.  I investigated how this method could be used as a method of representation for the imagery in the interface.

I also investigated how leaves of paper and their shadows could allow interface elements to feel less like an interface, more inviting, while subtly adding a sense of depth.