Fast, Beautiful, Smart: Focus Gallery
Brief: Focus is a new kind of gallery app, built for speed and simplicity before all else. Developer Francisco Franco and I worked together to craft a product and an experience that filled a niche and delighted users. Since Focus is a brand new product, I had the unique opportunity to work alongside Franco not only executing visual design, but also shaping the product itself from the very beginning.
Focus executes its unique experience by resting on a few key pillars: it's fast, it's beautiful, and it's smart.
First, it's fast. The main screen of the app can get users to any photo on their device with one tap, a cornerstone of the Focus experience which was planned from day one of design and development. All a user's tags and device folders are visible in simple two-row clusters, reducing physical travel to an absolute minimum.
But this wouldn't matter unless it performed beautifully, and Focus accomplishes this task with remarkable quickness, as demonstrated by Ron Richards of All About Android in the video above.
It's a fact that good design is becoming a selling point on Android (and increasingly other platforms too). Of course I'm proud of the overall design in Focus, but it's worth taking a closer look at what makes the app beautiful.
The first thing a user will notice when opening Focus is that it's different from most gallery apps. Instead of two or three columns of folders, Focus organizes folders into two-row groups with headers, providing a clean, open, and minimal interface from the very start. But as clean as it is, the interface shows more photos at once than most apps. And the structure of the screen means you can access literally any single image from your device from that screen with just one tap.
This screen was the starting point in my initial designs, and it was intentionally built to show a row of thumbnails and a strong hint at the right edge that would compel users to scroll and explore the rest of the collection.
But if you want, you can enter a collection and find a photo there. This is where animations start for Focus. To keep context, the tag label floats up to the app's toolbar (which itself is a coplanar piece of paper - only showing elevation when the main sheet slides under it) and the images glide into place. When the user touches a photo is lifts to their finger, and then expands to fill the screen.
Even simple actions like multi-select show users visual treats that make the experience feel light and pleasant. Images lift in response to touch, and a subtly rippling overlay indicates a user's selection. With the "selection" toolbar, users can delete, share, or tag any number of photos at once.
We also implemented an animation (shown below) where the selection toolbar gently slides in from the top of the screen. This is an important step because the multi-select action should feel like a smooth augmentation of whatever screen you're on, not a jarring jump to another mode of interaction.
The picture viewer is just as beautiful, instantly exposing important actions and current tag assignments, and dismissing system decor when the user wants to go full screen.
The decision to show tag assignments in the individual picture viewer was borne of a fast-fail moment where a much loftier goal, after exploration, was found in the end not to be worthwhile as the tradeoff between UX and technical feasibility didn't work out. Still, having the assigned tags visible instantly helps provide context to the user when they see their photo, and these chips also disappear with the rest of the UI on tap.
Even tagging a photo is a fun experience. The tag selector slides up using a paradigm familiar to Android users from Android's "share sheet," and creating a new tag allows users to choose colors with another fun animation.
Of course Focus isn't all beauty - it's smart too. With an upcoming release, Focus will write your tag assignments to each photo's metadata, meaning if you take photos from device to device, they'll still be tagged properly in Focus.
The app also has a "no snooping" feature to prevent viewers from swiping through your photos when you only intend to show them one. This feature will grow to include Vault, a method for hiding entire collections of photos behind a 4 to 6 digit passcode.
Users can also manage which collections show up on the main screen and in the tag selector, and switch Focus to its "dark theme" for easier photo browsing in the dark.
This case study was written with the release of version 1.6 of the app, and it will continue to evolve with new features and design enhancements 🙂