CalcCalc App Case Study

Objective

Design and code a simple iPhone app and launch it in the App Store to better understand the lifecycle of app development from an engineering perspective.

CalcCalc calculator app

The Problem

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

Style Guides and Xcode

A Solution

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

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. Although, as I’d later learn the brains behind calculators are relatively complex. Also from reviewing existing apps I saw an opportunity to make a stand-out visual design.

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.

Sketches

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

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.

Visual Design

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

Coding

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.

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.

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 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.

Check Out The App

Check out the CalcCalc product page or view CalcCalc on the App Store.

Next Up

While developing CalcCalc I simplified as much as possible since my goal was to design, develop, and launch an app. There are still some features I’d like to add in the future.

Thanks for reading!

Like what you read? Give Ryan Smith a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.