I’ve been the sole designer at ClipDis working on a creative, audiovisual messaging platform for iOS, Android and the web. Our app transformed simple text messages into video mashups and was used by more than 2,3 million people. ClipDis was chosen by Facebook to be a tier 1 partner for Messenger relaunch at the F8 Developer Conference. We've been featured in Adweek, Engadget, Gigaom and Forbes. Our chatbot has been included among the featured bots of KIK's Bot Shop.

Challenge ¹

Simple text messages are boring

Our platform had a target group consisting of those born in 1995 or later. Generation Z communicates in a more visual way. They multi-task across 5 screens as opposed to millennials preferring to communicate on 2 screens and via text. Generation Z’s attention spans are getting shorter as well, explaining their preference for video and images rather than text. They are the ultimate consumers of snack media. They communicate in bite sizes, preferably in emoticons, emojis and symbols.

I'm not allowed to share more content than what is presented in this case study.

Process ²

My tasks at ClipDis

Our iOS and Android apps were performing well. However, the real milestone was for us to be featured among the best clients for Facebook Messenger's revamp. These clients could bring the messaging experience to a whole new level. Our app transformed text messages into video mashups. We wanted to close the loop by letting our users create the content. A web app for video editing and creation. We've also experimented with our chatbot on KIK's platform. I've been involved in all of the mentioned tasks.

Throughout my time at the company, I've honed my skills in Platform Guidelines, Wireframes, User Interface, Interactions, User Onboarding and Chatbots.

Platform Guidelines

Our app has been built for both Google Play and the Apple App Store. It was important for us to keep an eye on the platform-specific guidelines and design pattern libraries for iOS and Android. We wanted to keep our app independent and to speak a design language that can live on both platforms. Without studying them, we couldn't come up with the unique style of our own. Designing with the platform-specific rules and requirements in mind decreased the friction of the final user experiences.

Wireframes

Our editor has been a great playground for us to experiment with different approaches, visual elements and interactions. We maintained this online tool for creating and editing content in a much more complicated, advanced way as opposed to the mobile apps. In the native apps users were able to record themselves or edit together short clips. With this web application, users could import specific video file formats. Moreover, they could add, edit and slice content from GIPHY and YouTube videos.

User Interface

ClipDis already had a visual identity when I joined the team, I could build on that. The product has been targeting young Americans, mostly teenagers. The colour palette consisted of 3 vibrant, strong colours. The visual language also included bold labels and buttons. High contrast gave us the ability to intensify differences. Modular patterns work well across a variety of screens and window sizes.

Transitions & Interactions

Motion can help human beings to communicate better with a machine through an interface. Animations can reduce cognitive load for the user. They make an interface feel tangible and realistic. Quick, understandable transitions contribute to a more polished experience.

User Onboarding Flow

We've been trying out different approaches for welcoming our new users. One version aimed for an interactive, stage by stage tutorial for the first time user. It wasn't successful, less than 30% kept reading the instructions. We switched to a simpler, text-based, screen after screen edition with a clear focus. It performed better. The final version, which as you can see has simple yet informative illustrations resulted in a reading rate of more than 60%.

I'm showing the final version of the welcoming screens.

Designing A Chatbot

The incredible potential of chatbots lies in the ability to individually and contextually communicate one-to-many. In 2015, our specially crafted chatbot could transform the received text messages directly into video mashups or reply to a slash tagged phrase with thematized mashups. The video could then be shared with users across social platforms. The ClipDis chatbot was a top performing, featured bot in KIK's bot shop.

Solution ³

A fun way to visualize messaging

Conveying the right emotions through messaging can be hard, so we created a platform that lets people communicate a wide variety of emotions while having fun in their virtual interactions. Serving the needs of an exceptionally mobile social generation that values personalized experiences and instant gratification, ClipDis puts creative power into the hands of the consumer.

More than 45 million mashups have been created, over 5.4 million mashups have been shared with others.