Kanvas

What is Kanvas?

Kanvas is a mobile application where you can express yourself visually through live streaming, gifs, photos, and videos. You can add text, stickers, artwork, draw and add real-time effects on top of live videos, photos, and gifs. Targeted towards the millennial generation, users can easily make fun and creative mixed media content to share with friends, social media and to the Kanvas community.

Background

Kanvas was a pivot from a group photo sharing app called Tracks (2011-2013) which allowed people to share experiences among private and public photo streams called 'Tracks'. After awhile we started seeing more text based images, hacked collages and memes being shared among these albums. It was clear that users wanted to express themselves more than just with a photo or video. With cash running out we gambled and double-downed on the idea of a network around social self-expression and pivoted the product.

Users wanted to express themselves more than with just a photo or video.

Icon and Branding

From the beginning our CEO - Vic Singh, wanted the primary colors of the new app and brand to be black and white. We believed it was bold, strong and would differentiate ourselves from the other well known social networks like Instagram, Facebook and Vine. Because Kanvas was about self expression I wanted the word mark to have personality and feel some what organic and custom to stand out from the other networks. After a few iterations and refinements we decided the mark be in script and lower case to be playful, unique and fun at the same time.

Approach

We wanted to create a whole new wave of social self-expression by giving users the tools to easily make fun cool things. We studied the market and at the time no network gave users the power to do anything beyond filtered/collaged photos and videos. We came up with 5 tools built into what we called ‘Compose’ that allowed users to edit their photos and videos with text, stickers, doodles and graphic artwork to quickly let them create unique creative content.

We wanted to create a whole new wave of social self-expression by giving users the tools to easily make fun cool stuff.

The Problem

Although some users were making beautiful posts the rest of the users had no idea what to make. We quickly learned that the average user was not creative and the content they made was not always visually appealing. Although we had a short walk-through inside our compose tool, most would bypass it and were presented with a blank canvas not knowing what to do. They would tap a few icons but would not care to finish. We even treid updating the daily hashtag copy suggesting ideas and challenges but only a few users would actually create something around it. The process of creating a post also took a lot of time and creative energy.

New users had no idea what to make would tap a few icons and not care to finish.

😩

A New Approach

Up until Kanvas 3.0, there was only one creation mode. It was a photo editor on steroids - stitch together photos, gifs and videos, add text and animated overlays, draw and even shoot stop motion video. Was it too much? Was it too complicated? I wanted to explore other creative modes which would make creating posts faster, easier and more fun. I also wanted to provide a way for users to make different types of posts because content in the app was beginning to look the same. Everyone was using the same fonts and overlays.

We introduced a whole new set of creative tools to make kanvas creation easier, faster and more fun.

Each new mode was designed to be super simple without having too many steps involved. We left the original Compose as is for the advanced users who loved getting creative with all the custom editing features. The new Thought mode was a way to quickly say whatever was on your mind using only text. Because gifs were already popular in the app the new Gif Burst mode was a way for the user to shoot their own gifs anytime, anywhere. We made Flipbooks a standalone mode outside of our original Compose mode since users loved telling photo stories. We also added 4 new brush types so users could paint with different brush tips and not be limited to one stroke and weight like our previous drawing tool inside Compose. We were covered by TechCrunch and featured under Best New Apps on the Appstore.

🙌

Adding Live Video

With Meerkat and Persicope already leading live video our CEO believed Kanvas could be a third player in the live streaming market. He wanted to launch a new stand alone app that featured live streaming with Kanvas like editing tools. There were already a bunch of live streaming apps in the market and after some research I noticed a pattern among most of them - nobody was actually streaming live. There were maybe a handful of replays and most of them had no views. It was a complete ghost town. After some serious debates and discussions I finally convinced our CEO that we would most likely face the same problem if we tried to build a new social network from scratch. We agreed that live video could be built on top of our existing Kanvas network since we already had a good amount of users it could be added as new mode of self expression.

But there were a lot of questions - How do we let our users know about this new feature? Where do we put Live inside of Kanvas? Should Live be square or full portrait video? What kind of editing features would you put on Live video? What is the experience for the viewer and the broadcaster? Do we support replays? Can you also comment after a Live video is done? Can the comments also be scrollable?

Where do we put Live inside Kanvas? Should it be square or full screen? What would Live editing even look like?

Early Explorations

One of the first challenges was where to put the new Live mode and whether it should be square or portrait. We already had 6 options adding another would break the grid and having 7 icons felt too much. I tried combining video and live into a single icon along with an exploration of exposing all the compose options in a bottom bar with Live as the first option.

Concerns

Having Live as another option along side the other modes buried it causing it to be two taps away. We wanted Live to be front and center and set apart from the other options. Also unpacking all the compose options towards the bottom removed an extra tap but users could easily confuse that with a tab bar.

Adding Live as another option along side the other modes buried it causing it to be two taps away when we wanted it to be front and center.

☹️

Improving the Icon Suite

Up to this point icons in Kanvas were designed in the thin and minimalistic style of iOS 7. But by using this style the edit icons for Live were hard to see and not easy to understand. There was no sense of heirarchy and the icon themselves didn’t feel tappable. The ‘X’ icon to close a Live Stream was not intuitive and the smiley face icon did not do a great job implying you can add 'Gif' effects and stickers.

When designing for Live, I realized the UI and iconography could be improved to reflect the nature of the brand more.

Live Button and Compose Picker

Because Live was a new feature we wanted it to be prominent at all times. We decided to use a tab bar and put Live right in the middle to make it the primary action in the app. We still kept the 6 compose options in the top right so existing users won’t get confused with the sudden addition of a Live button. I also made the new Compose icons smaller and stacked them in a vertical stack which made it easier to navigate.

Broadcaster and Viewer Experience

Because Live Editing was going to be the differentiator from other Live streaming apps we decided that portrait was a better experience for both the broadcaster and viewer. It was a better use of real estate and the broadcaster can take advantage of the full screen when editing Live. I also placed the stop button towards the bottom so the broadcaseter can easily end the stream with just their thumb. This also made the screen feel more like a Live camera.

We wanted the flow for the Broadcaster to be simple and lightweight. We agreed that a title would give better context to the stream so we gave the user an option to add one and if they didn’t we autopopulated it with a default title. We also added an option to share a Live stream link to Facebook and Twitter. Once a streamer was Live we called out the editing tools with a tooltip to let them know they can edit on top of the live stream.

New Walkthrough

With the launching of Live, I also wanted to introduce the new feature with a short walkthrough which would be seen by existing and new users as they launched or updated the app. We were a little concerned that our existing users would have a fit if all of a sudden Kanvas looked like a Live stream only app.

👏

Live Challenges

One of the other challenges was how to display all the Live streams in our Explore page. We already had a two column grid layout in Explore and we knew it made sense to have Live as its own tab but we wanted it to feel different and new. I explored a range of different options using large, square and portrait thumbnails.

Problem

I was hoping for the best case scenario when we shipped the new Live tab but reality was far different from what I expected. Because of the way the thumbnails were being cropped, heads were being cutoff in weird ways and almost all of the thumbnails were blurry. The app was taking a snapshot of the first frame and it did not look appealing at all. There were a lot of thumbs with people looking down on the phone, the floor, ceiling etc. None of the Live streams looked inviting nor did you want to tap into any of them.

I was hoping for the best case scenario but reality was far different from what I expected.

😔

Live is hard

Another thing we quickly realized was that a lot of streams were just test streams. You would tap into a stream and it would be someone silently staring down into the phone adding a few gifs, doodling random lines on the screen. There were a few good streams but they would quickly get buried with new test streams coming in from the top. Scrolling through the Live tab would quicky become laborious as you had to scroll a good amount to try to find content worth tapping into it because of the large thumbnails. The large thumbnails was also a nightmare when there was inappropriate content. We needed a way to quickly glance through a bunch of streams and show how long an actual stream or replay was to avoid tapping into something that could only be 4 seconds long. I decided to strip out the titles and avatars and show an authentic snapshot of the Live stream by using the full portrait ratio as the thumbnail. This made discovery and scrolling a lot faster and easier to navigate.

Event based streams are great and engaging but most streams are not. There are a few people who love streaming their daily activities but only a few viewers would be watching. Getting a good amount of views on a Live stream is hard. Even if the broadcaster has a lot of followers it is not always possible to watch the person Live through a push notification. The connection could be bad, get lost and the broadcaster and viewer would both get stuck on a buffering screen. But the biggest pain is the amount of inappropriate content being streamed. Because everything is coming in Live it’s really hard to moderate content. Live is extremely challenging. It’s still a work in progress with plenty of room for improvement. It was brand new to all of us and will need a lot more iteration cycles but hopefully we can come to understand the problem better and make the right choices along the way.

Areas for Improvement

After designing Live, we needed to make a few changes and I saw other areas that needed improvement - the Live Button, Navigation, and Explore page.

Making the Live button the primary action was our first intent but new users of the app hardly noticed the plus icon in the top right. It felt and looked too much like a live streaming app. Also because the quality of the Live Streams were unpredictable having it as the main action button was no longer ideal. We decided that Live could live inside a single plus button which would be the home for all of the Kanvas creation tools. This way the options were now within thumbs reach and consistent among both platforms.

Our navigation was all over the place. We had relics of the old Kanvas app forced into the tab bar. Where users normally expected a notifications tab we had a spread the word (Invite friends) tab, and the common tab for user profiles was a Kanvas store tab. Your profile was actually an avatar in the top left of the navigation bar. Notifications were in the the Kanvas logo and our chat feature was also buried in the profile screen. I cleaned up our navigation by placing the spread the word and chat icon in the navigation bar and updated the tab bar with notifications and profile tabs to match the common pattern among most social networking apps.

The explore page was always a two column square carousel of grouped posts by content type - trending, popular, live etc. There was a lot of swiping involved and most users only swiped across a few pages. Most of them only cared about the popular tab. Finding people was also buried where you had to tap the search bar to see suggested people. Content and people discovery took a lot of work on the users end. To simplify and make discovery more rich I condensed everything into one screen. I took the tabs and grouped them into categories which you could now scroll through to quickly see what was trending in each category. Because we wanted users to gain more followers we introduced a trending active users section and displayed them prominently towards the top. We also introduced Kanvas rooms where users could post and share posts around specific themes and special events.

Kanvas for Android

Because Kanvas for iOS was already flushed out, designing for Android was pretty straight forward. Although there were some system differences I tried to keep the essence of the brand following Material guidelines and principles.

The Team

I was very fortunate to own the design of Kanvas but being the only designer is scary. Startups are scary. Was I making the right decisions? Was I too focused on the visuals and animations? Was I really understanding the problems at hand? My design process involved feedback from the CEO, our head of growth and the engineers. a lot of assumptions were made, some were right some were way off. I’ve made a ton of mistakes but learned tremendously over the years. I’ve learned that engineers are your best friends and clear constant communication between them is key. There will always be technical constraints and challenges but designing within those constraints can also be fun. Launching a product is truly a collaborative team effort and your designs and prototypes can only go so far, I am extremely lucky to work with great people on Kanvas.