Switch

What is Switch?

Switch is a standalone camera app from Kanvas that lets you create expressive selfies with face tracking technology. Users can swap their face with a variety of content such as 3D avatars, masks and 3D stickers. You can shoot gif, photo and video selfies to share with friends and social media.

Background

With the popularity of Snapchat Lenses our CEO felt strongly that face-tracking would be a killer feature for Kanvas Live and a strong addition to our set of creative tools. To make this happen we acquired Nito - a small start up based in New York that specialized in face tracking and 3D avatars. We decided to launch Switch as a standalone app without a network so users had the freedom to create unique selfies and share them anywhere they liked. This was also a good way for us to test and explore new features before adding the technology to Kanvas.

Users could create unique selfies and share them anywhere they liked.

Icon and Branding

Because Switch was part of the Kanvas brand we wanted it to have some resemblence to Kanvas but also feel new at the same time. Black felt natural and a good base color connecting Switch to Kanvas. I also wanted to keep the app icon simple but have it stand out and be easily recognizable on the phone. I was inspired by the empty transparent layer and used an outlined silhouette of a face to illustrate a face changing app. Using a bright gradient also made the icon pop against the black background.

The Camera

Switch’s objectives were simple - shoot selfies, share and save. Besides snapping photos and videos we also wanted to output gifs which was a hit in Kanvas - it was also ideal for quick sharing through SMS and other social media channels. We decided that the camera would be multi-mode and switching between these modes should be intuitive and easy. I designed a tab system labeling each mode with text for clarity and prototyped micro-interactions for the camera button to show how it would animate and change according to each state.

Using swipe gestures

Because this was a selfie app I wanted to make it easy for users to use with one hand. I explored a swipe gestured UX so users can easily exit and access screens by using only their thumb. You could also quickly go back to the camera after you take a selfie by swiping down on the preview screen. Swipe down on the camera to access your settings and go back to the camera by swiping down on any of your gallery shots.

Launching Switch

Because iOS requires access to certain permissions I didn’t want the user to be annoyed with permission popups after they launched the app. Although this might be accepted behavior among camera apps I find this experience to be very distracting. I tried to soften this experience by letting the user know what was required by the app first by designing a simple reminder screen for permissions and a custom dialog reminding the user why we would like to send them push notifications. We officially launched Switch at the Kanvas booth at Vidcon 2016 and received some press from Mashable and VentureBeat.

3D Stickers + Masks

For the next feature update we wanted to explore ideas of pinning 3D stickers that would track to your face. We also wanted the ability for users to mix and match 3D objects and face masks to create unique one of a kind selfies only possible with Switch. Because there was already a lot going on in the camera UI we agreed that it would need some kind of update to make room for the new 3D sticker feature.

Because there was already a lot going on in the UI it needed some changes to make room for the new sticker feature.

🤔

One of the first things I did was simplify the camera UI by stripping away the text labels and to combine the camera button and modes into a single unit. This made the camera UI a lot simpler, cleaner and easier to understand. To keep the interface simple I added a mask and sticker button under the camera buttons which would bring up the new 3D stickers and face masks.

Improving the App

The 3D stickers was a fun addition but you couldn’t toggle between the two modes. If you had a mask on your face you had to exit out of mask mode and tap the stickers button to add a sticker. You were forced to be in one mode at a time.

Because the app started out in Camera mode first the main feature of adding stickers and masks was two taps away.

I decided to expose the sticker picker first so the user could play with the stickers and masks right away without having to make an extra tap. I placed Stickers and Masks into a tray with tabs so the user could easily toggle between the two modes making it faster and easier to mix and match content. Swipe down or tap the screen to shoot your selfie and tap the plus icon to bring back up the stickers and masks.

Deleting a sticker also felt like a chore. In order to remove content off the screen you had to make sure the sticker was exactly over the trash icon. This was not easy and frustrating for some users. To make this easier I made the entire bottom area a trash target so you could drag down anywhere to delete.

👻

Team Effort

Apps with Face Tracking technology have recently become very popular in the Photo & Video category. Not only does the quality of the masks and effects matter the face tracking engine itself is the most important part. There is still a lot of room for improvement as our tracking is constantly getting lost with any sudden movements of your face. The engine is also not forgiving when it comes to battery consumption. These pain points will have to be addressed soon or later but the future of Switch and Face tracking in general is very exciting. Switch has been a true collaborative team effort between Nito and Kanvas. It will probably go through many iterations but the journey and experience will be a fun one.