When an app idea became a reality…

Leaf Cherngchaosil
5 min readApr 7, 2016

--

This blog is about the development progress of my first actual app, Kontac. It’s in the app store! Or…check out the video of it! Or…link to the source code!

Hold up. What is Kontac?

Kontac is an app that allows you to easily share your contact information with people you meet. Ever wanted to keep in contact with awesome people you met at a party or an event but you can only exchange phone numbers and emails? What if you could easily exchange your social media info? Simply type in your info, choose what you want to share, and share by generating QR code to scan. Here’s a preview.

How It All Started

It was in December of 2015 when I had an idea of the Kontac app. I asked myself, “What if I could just save all my contact information along with my social media info such as Facebook, Snapchat, Instagram, and bunch of other stuffs and just easily share it with people I meet?” At the time I have not built any large iOS app before, all I did was bunch of small iOS projects at hackathons. Thus, I began by drafting the layout of my app on a whiteboard.

First sketch of the app. Jan. 10, 2016
Things the app should do.

Basically, what the app does is store links to user profiles and save contact information of added users. Tapping on each row should open the native app or webpage that link to the selected user’s profile.

First sketch of app icon, it’s a share icon + QR code
Second icon. It’s the common contact icon and since the app is about swapping contact information, hence the swapping arrows.
More sketches of app icons.
Very first prototype. From left to right: Setting page, User Account Info page, Sharing page

In this first prototype, instead of having the users manually type in their information, I thought that it would be easier to have users log in their social media accounts and the app would automatically fetch and store their information.

New Version. From left to right: Sharing page, QR Code used for sharing, Setting page, and User Account Info page

Unfortunately, after researching and digging into APIs for fetching account information, it became clear that manually typing in information is better because of internet connection and the common trend that some users dislike logging in their accounts in other apps. There are also no API for fetching account info for every social media. In addition, I thought about using HTTP request if there is no official SDK for logging in the users, but the information returned is not exactly what I needed to direct to user’s profile.

From left to right: Page after scanning QR code, Test page.

In this version, I added a test page which allows the user to check whether if the information he/she typed into the system works. If user has the native app installed, Kontac should open the native app and go to his/her profile. If no native app is installed, it will open the web page. After scanning the QR code, text fields will ask for first and last name, then a description will show up.

Redesign TableView. Not perfect but it’s not boring anymore.
I had to dig into one of the open-source library on Github and modified the code to get this popup UI with QR code, which I think looks better than the previous version(left) that pops another view with the QR code and a white background.
The test page, this is where the users check to see if his/her information is working.
For social media service that does not have the profile page, the popup will be shown along with the user account info in which the user can tap and hold to copy the info.
In this version, I used an open-source DZNEmptyDataSet to avoid blank white screen and to instruct the users of what they need to do.
A cleaner design. I removed the Test page and combined testing in the Setting page. By tapping Edit button, the user is able to edit his/her informations and tapping the cell by default will test the account(direct to profile).
The improvement.
Also a cleaner design on the first page. Tapping each row will select what the user wants to share, as indicated by the checkmarks.
Added a splash screen when the app is launched.
An alert telling the user not to leave the textField empty.
A cleaner design with the official account of the app for user to follow on social media.
Added slides of tutorial of how to get info from social media.
Redesign of the new contact page.
Some of the test users complained that they did not know they were supposed to tap each row to select what they wanted to share since it wasn’t so obvious. Therefore, I made the process clearer by adding switches instead of the checkmarks (just like Apple’s Clock app).

After talking to several test users, they said they disliked the idea of manually typing in the name of the person they’re adding. One of them suggested to pre-generate the first and last name so they don’t have to type it themselves. As a solution, I added a button and text fields so user can save their names. The user’s name will be pre-generated after scanning the QR code.

In the pro version, the app allows users to select and save their profiles.

I wanted to have a unique QR code that distinguishes Kontac’s QR code from other QR codes. I wanted to have a brand. After looking at Snapcode and Kik Code, I researched on how to make custom code. Unfortunately, implementing my own custom QR code is costly and the implementation would take a long time. What I ended up doing was using the API provided by Apple that generates normal QR code and added the app logo as a background. Doing so allows people to see the distinguishable Kontac app QR code.

This version works well, but I also added a feature that allows the user to detect QR codes from images in addition to manually scanning the QR code. The library, however, had trouble detecting the QR code when there’s a background like the above photo (not the logo). Combating this problem, I put a black background along with the name of the user to make it easier to detect the QR code. Doing so allows the user to take a screenshot, crop it, and send it to other users.

The final version.

If you have come this far, I hope you have enjoyed and continue to enjoy the progress of my app.

--

--