Next →← Home
I worked to develop the Code app’s visual identity, UX/UI, and its landing page.
thecodeapp.com

The Problem – Sharing your contact info with the people you meet is harder than it should be.

The Solution – The Code app consolidates all of your contact info and social media handles into a single QR code. This allows anyone with a smartphone to download your info with a scan, even if they don't have the app.

Identity

The code identity is comprised of two key components: The logo and the QR code. The Code logo is made from a custom font I created called "cilmi sans". The rounded letterforms create a smooth visual rhythm that communicates polish and modernity. The QR exists within the identity as both a standard QR made up of blocks as well as representational line work. The line work often works as a backdrop providing a sense of texture and paying homage to the underlying technology of the app.

Feed and Account

The primary goal for the Code app was to make it as easy as possible for a user to add their contact info to their profile and see the contact info of those they've scanned. After downloading the app, the user is prompted to add their basic contact info and any social media handles they want to include. The process of adding these handles is integrated with their respective apps for a more streamlined sign-up process. After logging in, the user is brought to the homepage of the app. The home page is a feed of all of the contacts they've added. If a user scans another user's code, both of their contacts will appear here simultaneously on their respective devices. Each contact on the feed links directly to the user's social handles and allows for quick calling, messaging, and emailing via popup. A user can also download another user's contact info as a standard iOS contact file. On the profile page, a user can easily edit their contact info and change their privacy preferences.

Feed
Profile
Edit Profile (scrolled)

Privacy and Sharing

To make using the Code app as frictionless as possible, I thought it was important for Code to work without having to open the app. The Code widget saves time and provides easy access to a user's QR code. To further the usefulness of the app, I made sure anyone could scan a user's QR code and download their contact info, regardless of whether or not that person has the app. If someone without the app scans a user's code, they are brought to the Code app website where they can download that user's contact info as a standard iOS contact file. In terms of privacy, because Code is responsible for the transfer of sensitive personal information, it was important to allow user's to take control of who can download their info. On the profile page, user's are given the option to have the app ask them to share their contact before allowing another user or nonuser to download their info.

Code Widget
Share Contact w/o App
Add Contact Confirmation