Photo App with Lens-Ring Navigation
A media-sharing app for a global cloud storage company, navigated by a ring of camera lenses rather than a tab bar.
Overview
A cloud storage company was walking into the media-sharing category years late, against players everyone already had installed. A grid of photos with a tab bar would have been invisible. I built the navigation around a ring of lenses you rotate to change context, the way a photographer changes glass. One idea, carried across capture, organization and sharing, on both platforms, without stepping outside Apple's and Google's guidelines.
Context & Constraints
The client already had the storage business. Media sharing was the land grab, and they were arriving after the category had settled on what these apps look like.
The brief had a contradiction in it: be recognizably different, and follow the Apple and Google platform guidelines that make everything look the same. Differentiation inside the rails.
My Role
I owned UX and UI for the photo app on both iOS and Android: the competitive teardown, the navigation concepting, site-map validation, sketches, wireframes and the final visual design. The call that made it distinct was building navigation around a ring of lenses you rotate to change context, then keeping everything around that ring strictly conventional so only one idea was ever unfamiliar.
I settled the navigation principles with the product team before any concepting, through weekly scrums, so the ring had something to be judged against rather than winning on looks.
How I Approached It
I started with the competitive teardown, run through weekly scrums, and what it mostly proved was how little room was left. The media-sharing category had converged. Everyone had the same grid, the same tab bar, the same three icons.
Navigation principles came before any concepting. I settled what the app had to do first, so the interaction idea had something to be judged against rather than winning as the prettiest sketch on the wall.
The lens ring came out of brainstorming around classic camera controls. Rotate the ring, change the lens, change what you are doing. The lens ring gave the app one metaphor that a photographer already understands, and it carried capture, organization and sharing without a second navigation model bolted on underneath.
Key Decisions & Trade-offs
Committing to the lens ring was the whole bet. A tab bar was never going to make this product memorable, and memorable was the job.
The learning curve was a real trade: a ring you rotate takes longer to understand than a tab bar. I managed it by keeping everything around the ring strictly conventional. One unfamiliar idea, and no others competing with it.
Results
The lens ring shipped as a complete cross-platform media-sharing experience: capture, lens selection, organization and sharing. The navigation system stood apart from industry leaders while staying true to mobile design guidelines.
Michael is an excellent addition to any team! He is not only an amazing product designer, he also incorporates user perspective through interviews, research and pure knowledge. He adds value by contributing with a mindset of a product owner and puts effort to make sure the product will succeed in all phases from planning to go-live. We have worked together in six different projects that started from the ideation phase and include mobile, widgets and web. In all projects Michael has been fundamental to the team!
Reflection
One coherent interaction idea does more for a product than a long feature list. The lens ring gave the app a point of view.
The honest gap is what happened next. I designed the model and the cross-platform experience. I do not have adoption data on whether the learning curve paid for itself. On a bet like this, that is the number I would want.