The Challenge

This project started as an exploration of design patterns. We tend to get used to patterns until they become invisible, so I wanted to trace back some of them and question their usability for digital devices.

Research

Keyboard Layouts
Most computers are equipped with QWERTY keyboard layout:

This layout was created over 140 years ago and while it still works great with physical keyboards, it’s also being blindly adapted to devices that do not use the same input.


The design principles that guided Christopher Latham Sholes 140 years ago are no longer applicable in the case of a game controller as an input.

Netflix for PlayStation 4 ditches the QWERTY layout in favour of alphabetical order:


This change greatly improves typing since in this scenario users find the next letter to type by looking for it on the screen. QWERTY was designed for physical interaction, not for ease of spotting a particular letter in a group.

Calculator Design
The calculator design as we know it came from the first pocket calculator created by Hewlett Packard in 1972:


The layout, display and basic UX is instantly recognizable and while maintaining this layout for physical devices might make sense, why is it repeated for digital calculators where no physical components impose limitations on the design?

I haven’t found compelling alternatives to this pattern, so I decided to design my own.

User Research

I know a lot of people who use calculators to calculate their budget. For a lot of them it’s a necessity as the their income is barely covering the expenses.

I decided to interview some of them and find out what are their goals and painpoints in relation to using digital calculators.

Insights

Goals

• calculate daily/weekly/monthly budget
  
• calculate event cost
• split restaurant bill
• calculate income from hourly rates/overtime

Painpoints

• calculations disappear after they’re completed
  
• hard to figure out what numbers in calculation stand for
  
• no way to edit calculations easily
  
• no way to return to a calculation later and edit it

Ideation

Solving for storing calculations
Digital calculators have almost no restrictions in terms storing past calculations, yet they repeat patterns of pocket calculators which are very limiting in this regard.

How do we store information temporarily on digital devices? The most common solution is tabbing:


Solving for readability

• bill view - bills, invoices, budgeting, excel sheets all present information vertically with a sum total down at the bottom.
  
• labeling - similarly, all of the above allow for labelling values for easier identification.

Solving for easy editing
Rearranging the display into a vertical line allows the information to be retained on screen and thus being editable. I played around with a few arrangements of elements on the screen but finally settled for this:

Wireframing

I’ve created wireframes in Figma and then prepared some gifs showing the final design at work. The gifs were done in After Effects.


Easy Calc Features:

• intuitive interface
  
• editable operations and labels
  
• operations displayed like bills & chat history
  
• tabs allow you to keep calculations for as long as you want

Basic Operations 
       

Editing Values


   

Editing Operations