Microsoft Integrations for Cyanogen Camera
- Who
Senior Product Designer at Cyanogen Inc, a mobile OS provider, with Microsoft as strategic partner
- What
Offer ways for outside brands to enhance the Cyanogen camera platform
- How
Partner with Microsoft to integrate their Hyperlapse and Cortana technology
- Impact
Updates served to millions across CyanogenOS devices
- Product design
- UX / UI design
Brief
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.
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:
- Rethink the camera app as a platform for expanding functionality
- Use Hyperlapse as a model for deep camera integration
- Provide a seamless experience to the camera when launched by other apps
UX considerations
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 mode 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.
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.
- 1
User launches camera from lock screen or home screen. The new mode action is within easy access - 2
Tapping the mode action transitions it to a close action while revealing the mode menu - 3
Microsoft Hyperlapse is a mode among the other photo modes available. Tapping Hyperlapse closes the menu and transitions the camera viewfinder. - 4
On first run of the mode, new permissions for the integration gate before the user confirms 1/2 - 5
On first run of the mode, new permissions for the integration gate before the user confirms 2/2 - 6
The integrated mode is ready to record. Secondary options are swapped to reflect the mode's capabilities. Along the top displays the elapsed time for the recording and a sample conversion giving an idea of the time-shifted video's runtime.
The solution felt 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
With the Cyanogen camera app ready to accept mode MODs, it was time to tackle the Hyperlapse experience.
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.
- 1User is ready to hit record!
- 2
During recording a pause button appears which allows the user to take multiple shots and cuts in the same video. The user finishes the video by pressing the stop button. - 3
On some phones with limited processing capabilities, an intermediate waiting period is required. A dark scrim and progress indicator overlay appears as the hyperlapse is readied for tuning. - 4
THe post-recording stage offers a simple slider to select between the available speeds. THe current choice changes the conversion of runtime at the top of the view. A user tip hints that the user can choose simply to smooth the video rather than change its speed. Holding down on the display hides the UI. - 5
Dragging the staged slider displays its speed, up to 32x. The upper runtime conversion changes in kind. - 6
With the choice set, the user confirms the speed - 7
The new video is generated and saved - 6The camera returns from post-recording to the ready view of the mode
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.
Additional concerns for cases, such as where users canceled processing, if the phone could run processing in the background while the user could continue on, or were interested in the MOD's settings, were also accounted for.
Cortana selfie command
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 between -5° and 5°, making the image feel more like a memory.
Testing
With prototypes built for the various experiences, I tested the flow and tuned the interactions based on feedback from around the office and with external testers over informal coffee sessions. Testing was also done by our partner team at Microsoft at the design and technology level and provided feedback as we progressed.
We found that, 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 features sparked further collaboration with Microsoft, along with new partners in the following months. The MOD platform was released later to millions of devices in a CyanogenOS update across its portfolio of supported devices from Alcatel, OnePlus, WileyFox, YU, and more.
