Ryan Smith

iOS Calculator App

I designed and coded a simple iPhone app to learn more about the developer toolset and what's involved in launching an app on the App Store.

Hand holding an iPhone with a custom calculator app.

The udpated CalcCalc design, launced in 2019.

Objective

Design and code a simple app and launch it in the App Store.

The Problem

I wanted a deeper understanding of the process engineers go through to implement designs.

My Role

This was a solo, self-directed project. I did all the work from design, to code, to deployment.

A Solution

I settled on a calculator app because structurally it’s simple. I wouldn’t have to deal with navigation controllers and passing data between views.

iPad with a calculator app open laying on a staack of papers with columns of numbers being added up.

The original CalcCalc running on an iPad.

Process

Competitive Analysis

To start, I researched existing calculator apps to see how they approached the placement of the controls and the look and feel. The layout of the number pad was pretty universal, but the placement of the zero and the decimal varied, as well as the operator and other function buttons.

Side-by-side screen shots of four iOS calculators.

Competitive analysis – the stock iOS calculator, and three third-party calculators.

An Opportunity for Improvement

Most of the calculators on the App Store looked pretty bad and seemed thrown together. I was excited by the opportunity to make a stand-out visual design.

Sketches

Research in hand, I sketched multiple layouts to explore button placement.

Pencil sketches on paper of six different calculator button layouts.

Wireframes

Then, I wireframed the layouts and previewed on device in order to simulate how easy or difficult it would be to tap different buttons.

A hand holding an iPhone with a calculator app open

Visual Design

With a preferred layout, I explored different visual treatments, settling on the darker style.

Three iPhones side-by-side showing a variation of visual styles for a calculator app.

Development

Learning Process

Congruent with design, I studied iOS development through resources like the Big Nerd Ranch, Udemy, and the iTunes Stanford course. Using a handful of calculator tutorials I put together a working app.

A Mac desktop with Xcode open in split view showing two windows with code.

Interface Builder

Interface Builder is one of the most impactful skills I learned in the process. In some ways, it’s very similar to how a designer lays out an app in a program like Sketch or Photoshop.

Learning Interface Builder gave me a real appreciation for how elements are added, measured, spaced, and constrained to a view and what a developer goes through to get it done.

A Mac desktop with Xcode open to interface builder, with a calculator being laid out on a storyboard

App Store Submission

I also found it interesting to learn about Apple’s submission process for the App Store, including preparing screenshots and artwork, writing descriptions, and classifying apps.

Results

In April of 2016 I launched CalcCalc on the App Store. I learned a ton in the process, including how to layout an app, some basic coding, and the App Store submission process.

I feel a lot more empowered knowing it’s possible to build and launch a simple app and am hoping to use this knowledge to empathize and communicate better with developers.

An Update

In early 2019 I updated CalcCalc, refreshing the visual design and fixing some bugs.

Hand holding an iPhone with CalcCalc calculator app open.