Marketing video from the launch of kik codes. (Kik / Youtube)
Find Friends, Faster
Find Friends, Faster
Find Friends, Faster
Few things can be more tedious than searching for someone by username - especially if they contain multiple hyphens or underscores back-to-back. How many are there?!? Two? Three? (:E) This was as much of a problem on Kik as any other service, with most of the user base consisting of teenagers - I’m sure we all remember our own highly questionable early usernames...
One way to solve this problem was to use personal QR codes to instantly find someone’s profile, once shared. That’s exactly what our team was challenged to do - develop a custom branded QR code to not only reduce friction finding your friends, but also encourage engagement and sharing from brands.
My personal Kik Code.
Not Your Father’s QR Codes
Not Your Father’s QR Codes
Not Your Father’s QR Codes
There was one fundamental problem with this solution - QR codes ain’t it, chief. At least not aesthetically speaking. Simply using brand colours and fitting a logo somewhere in there was not going to get our users excited about sharing their Kik Codes, nor would it be a good look for the brand.
So, we set out to develop something unique - something that users would immediately associate with Kik, even without seeing the logo. At the time, only Snapchat had done something similar. Many design reviews and conversations with our developers later we were able to settle on a design option that balanced both our functional and visual requirements.
Using circular bits instead of square ones gave our codes a more friendly appearance, and utilizing variation between singular and connected bits gave us enough bandwidth to ensure we would never run out of unique combinations while simultaneously evoking the typography in Kik’s logo.
Early Kik Code design iterations.
Designed for Delight
Designed for Delight
Designed for Delight
Kik’s brand had long been defined by bright and vibrant colours. Traditionally these had been focused on greens and blues, but Kik Codes needed to be more diverse. These represented each individual user uniquely - they needed to be personal, while still maintaining the brand’s playful persona.
We allowed users to choose from an exuberant collection of swatches from throughout the entire colour wheel as the backdrop for their code. What’s more, their chosen colour was identified in the code itself, allowing for custom animations and transitions that used whatever colour was chosen. Down the line, users were even able to customize their chat bubble colours to match their Kik Code - creating a visual identity for themselves within the app.
Kik Codes’ Interaction Design.