tippin

tippin is a tip calculator iOS app built with Swift. The app helps you split the bill easily amongst your friends.

I built the app for several reasons:

• I needed an app for this whenever I would dine with friends. The other tip calculator apps available were not modern and visually pleasing, which made me reluctant to use it.
• I wanted to build a product from beginning to end, from design to development to release. I believe this would give me greater knowledge of what it takes to bring an idea from scratch to a live entity.

Github iOS app: https://github.com/vickihlee/tippin
Github website: https://github.com/vickihlee/tippinsite

Landing Page

Behind the Scenes

Loading Screen

This is what you see when you tap on the app icon on your phone. The purpose of the loading screen is to re-highlight the brand (logo and name) while also hiding the time it takes for the app to open.

Opening Screen

Once the app opens, the number keyboard automatically appears with the blinking bar at Bill to encourage the user to enter the bill amount. The number of people is automatically set at 1, so technically a user can calculate their bill if they are not splitting it.

Typing Screen

While typing the bill amount, the bottom 4 total costs automatically update to show the costs. It’s much easier than other apps since it appears immediately. There’s no need to press “enter” and wait for those costs to appear.

Final Screen

After inputting the bill, the next thing to do is to enter the amount of people that it needs to be divided by. Again, the total costs will immediately appear below it. Users can also change the tip percentage, though the default is at the lowest at 15%. 15, 18, and 20 percent are chosen because they are the standard tipping amount in U.S. restaurants.

Building Out Designs on Xcode

Using storyboard, I refer to the mocks to build the app. I try to get it as close as possible to the design. Sometimes, inconsistencies come up between the mocks and actually building it. For example, the status bar and keyboard in the mocks can’t be shown here since it’s natively on the device.

Using Code to Add Animation

An animation I discovered while coding was the speed of how the costs appear. When the numbers appear, the numbers speeds up a bit (Alpha = 0.7) and then slows down (Alpha = 1). This highlights the appearance of the cost and fades out to make it feel smoother to the eyes.

Prototype

Testing the functionality on Xcode simulator before pushing it live on to the Apple Store. Interestingly, testing on the simulator and an iOS device sometimes produced different results. I found out that the simulator does not replicate an iPhone and the iPhone results were the most accurate.

Preparing App Icon for Apple Store

By Apple’s requirements, the app icon needs to come in 5 different sizes so it can be used in a variety of use cases.

Brainstorming App Names

Originally, I liked tippy and tipster. However, they were already taken. I also liked tip the table, but wanted a name with one syllable so it can be easier to say and remember. Finally, I decided with tippin.

Finding the Right Font

I chose the typeface Helvetica Neue with a thin weight at a size 24 to convey sentiments of modernism, cleanliness, coolness, and youthfulness.

Analytics Post-Release

After the app was submitted, reviewed, and approved by Apple, the app was officially released in the Apple Store on February 11, 2018. I check in to the analytics page to see how well it is doing.

Original Design and Tradeoffs

This was the first idea I had, with a sliding scale for tip percentages and an emphasis on the total cost per person. However, the sliding scale may make it difficult to get the correct number (what if you want 20% but your finger can’t move it accurately?) and the horizontal boxes takes up too much space that there’s no room for the necessary numerical keyboard.