Phi - Gestural Calculator

Phi - Gestural Calculator



The objective of the activity was to re-visualize a common utility app, and I ended up choosing Apple's default iOS calculator. I let Dieter Rams' voice guide me. I often put myself in his shoes and pretended to be him if he were a young man designing digital products today.


Good design is thorough down to the last detail
— Dieter Rams


I began the reviewing various calculator apps, and I decided to go back and visit Dieter Rams "classic" calculator design. The ET 66 calculator, which appears to the right, uses shape sizes and colors to create visual hierarchy.

I didn't want to deviate too far from his color palette but quickly took to removing elements that I didn't find necessary: M+, M-, MR, MC, CE, C. To be honest, I had to Google them to find their meaning and make sure they weren't a necessity. 

Before you pass judgment on my calculator naivety, the last 2 calculators I owned were a TI-89 Graphing Calculator that I used from 9-12 grade and then a HP 12C Financial Calculator. One was in Reverse Polish Notation and irreplaceable for calculating the Time Value of Money and the other was for playing Snake.


This series of images reflects an exploration that I designed when experimenting with how to replace the M+, M-, MR, MC, CE, and C buttons. I opted for a pull-to-reveal gesture where a "flick" or "drag" reveals hidden functions. In addition, different modes change the layout. For example, a financial calculator has a large equal button on the HP 12C, so I decided to replicate that here as an additional visual cue that the calculator had switched functions. A user can change TVM calculations to Reverse Polish Notation in settings.

Slide to Reveal

Reveal Panel - Math Functions


This series of images reflects an exploration that I designed when experimenting with how to clear the calculator tray. It didn't seem elegant to have the whole app interface pulled down to refresh, so I opted for a swipe to the left to refresh gestural interaction. The thinking behind is much like Loren Brichter's when he created pull-to-refresh. Originally, he had a refresh button in the top nav bar that he desperately needed to remove to clear up space for other items. He noticed that it was an activity that he did over and over and eventually made the leap from scrolling up to hit refresh to using iOS's built in inertia.


The following series of images reflects my experimentation with adding an undo and redo to a calculator app. 

“Good design is innovative”

The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.

“Good design makes a product useful”

A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasizes the usefulness of a product whilst disregarding anything that could possibly detract from it.

“Good design is aesthetic”

The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.

“Good design makes a product understandable”

It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.

“Good design is unobtrusive”

Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.

“Good design is honest”

It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.

“Good design is long-lasting”

It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.

“Good design is thorough down to the last detail”

Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user.

“Good design is environmentally-friendly”

Design makes an important contribution to the preservation of the environment. It conserves resources and minimises physical and visual pollution throughout the lifecycle of the product.

“Good design is as little design as possible”

Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.