Synopsis

Who

Senior product designer for Cyanogen, a mobile OS provider

What

Offer ways for outside brands to enhance the Cyanogen camera platform

How

Partner with Microsoft to integrate their Hyperlapse and Cortana technology

Impact

A camera system both customers and brands can grow with

The year 2015 marked a shift in Cyanogen’s product strategy. Up to that point the company focused on internal feature development and device bring-up, but the team’s size made it difficult to keep pace with the advances of other mobile OS offerings. Thus, the MOD platform was born - a way for outside brands to offer system-level experiences while giving users more choice in their ecosystem than the typical locked-in nature of phones today. Companies could enhance Cyanogen’s OS or apps the same way Google did to Android, while users benefited from fairer market options.

Microsoft was an early partner in the MOD program, and I was tasked to explore how Cyanogen’s camera app could incorporate their technology. Two initial features were a selfie-taking voice command connected to Cortana and a new mode using their Hyperlapse video technology.

Goals

MODs were our way to give users more value without having to litter their devices with redundant apps. With Microsoft’s technology in mind, the project’s goals were to:

UX challenges and solutions

The first quality of a good camera experience is how responsive it is. Its purpose, after all, is to capture moments and memories - many of which are fleeting. This principle meant additional functionality couldn’t hinder how nimble our current camera experience already was. The app’s UI was usable with one hand and included dedicated video and panorama capture buttons for fast access.

Camera MOD interface

Several sketches and discussions with the team behind me, I landed on a simple idea - expanding the concept of a typical mode switcher. Camera apps from other major brands used these models to house their own features, but they tended to be obscured from users’ focus or built with a fixed number in mind. Our camera could have dozens of MODs, so it needed something obvious and flexible.

Theme store user flow map sample
Mode switcher sketches

Inspired by home screen folders, I drafted a modal layer that was opened from where the panorama button currently sat. Tapping it launched a flexible view over the normal controls and presented the modes with icons and titles. The user would tap the desired mode, closing the modal and present the mode and its controls based on the standard camera layout. In place of the mode button was a close button that would return the user to the standard camera state.

Open prototype
Mode switcher framer prototype

The solution was obvious, efficient, and intuitive. It sat inside the reach of one-handed operation, opened by a button free of an ambiguous icon. The modal's grid layout let brands express themselves in their icon. Finally, the modal itself was flexible enough to be iterated on as the portfolio of MODs grew.

Hyperlapse MOD

To create the Hyperlapse mode, I first studied the experience of Microsoft’s sample app to understand the feature’s operation. Inspired by its flow, I designed the MOD with two steps. The first was for recording, which fit into the viewfinder layout principle I previously defined. The major addition was a scale to understand how long a recording might be after processing.

The second step gave the user a slider to explore the various speeds (1, 2, 4, 8, 16, and 32x) and process their choice. The UX covered cases of both fore- and background processing, depending on the phone’s performance. The user would then return to the viewfinder, ready to record again.

Landscape view of trimming an existing video before choosing Hyperlapse speed
trim video step; opening video from gallery
Landscape view of choosing Hyperlapse speed for existing video
speed select step; Hyperlapse landscape layout

The second step gave the user a slider to explore the various speeds (1, 2, 4, 8, 16, and 32x) and process their choice. The UX covered cases of both fore- and background processing, depending on the phone’s performance. The user would then return to the viewfinder, ready to record again.

While the primary focus for the Hyperlapse MOD was the in-camera experience, I also included the ability to create them from existing videos in the Gallery app. This had an added step to trim the video before picking its speed.

Cortana selfie command

Selfie command animation sketches
Selfie command sketches

While I was working on the camera MODs, Cyanogen’s engineering team was building a way to deeply integrate third party digital assistants into the OS. One of the commands planned for Cortana, the assistant launching the platform, was a means to open the camera and automatically take a selfie.

Time for a bit of fun. Working with a developer on the project, we created a special interaction for the camera that would show the taken selfie before “pocketing” it into the gallery reel. The preview shrunk from the viewfinder into a white border and randomly-assigned tilt of 5°, making the image feel more like a memory.

Testing

With a prototype built, I tested the flow and tuned the interactions based on feedback from around the office and with others over informal coffee testing. Apart from the processing state waiting period for the Hyperlapse mode, participants found the experiences enjoyable and intuitive.

Impact

Cyanogen announced the MOD platform at the 2016 Mobile World Congress, and the two camera experiences were among the freshman round of integrations. The positive attention received from press and community for the concepts sparked further collaboration with Microsoft, along with new partners in the following months. The MOD platform was released following the event through an OS update.

WorkTop