Understanding Context
There is no dearth of Tip Calculators available in the Appstore. As I tried a few, I started to uncover critical details that made the difference between a friendly and a painful experience.
The scenario when a tip calculator is most handy is when you are dining out or traveling with a group that splits the bill for meals, cab rides, events etc.
Common use cases are:
- One person pays the bill and collects the group's share in cash
- The bill is split by the business into separate receipts and everyone uses their own credit card to pay
- An individual needs to quickly calculate the tip for their own bill at a Salon, for pizza delivery, a meal etc.
This app was designed from the perspective of an individual or group paying the bill.
Inspiration
I reviewed and played with several Tip Calculator Apps for iOS. I also studied other types of calculators such as price estimators, mortgage calculators, tax refund calculators.
Goals & Intent
People rely on tip calculators so that they can get accurate results quickly (without taxing their brains). Especially when dealing with a large group, settling the bill can get chaotic and confusing. For the person paying the bill, they want to make sure they get what they are owed. People don't want to over or under tip. A tip calculator that helps them get to the answer quickly and with minimum effort wins.
I set out to design an app with the following characteristics:
- Simple and intuitive
- Presents relevant data clearly
Ideation
I rapidly sketched some ideas and jotted down features and functionality.
About the Design
Why iOS for the iPhone
I am an iOS user and more familiar with the platform's design principles, native interaction models and design patterns. A Tip Calculator is a utility that can be bundled with other utility apps. Such a utility is most useful on the go. Designing for the phone or the watch would be top priority.
Dropbox Visual Language
I spent time studying Dropbox's visual language and artwork. I started to recognize the careful use of iconography and color in various products and documentation across platforms. Icons and illustration both on web and mobile have a wonderful sketch like quality to the line work. The overall brand is playful and light. The Dropbox iOS Phone all is a blend of native elements + patterns and Dropbox brand colors and iconography. Carousel and Mailbox iOS apps have their own branding and style but there are overarching Dropbox themes present in all the applications that bind these products together.
What makes my app Dropbox like?
The final design mixes native elements with dropbox branding in the same manner as the Dropbox iPhone app. Input fields, menus, colors and typography were designed to closely match Dropbox's own applications.
I wanted this application to exude the whimsy and fun that dropbox’s illustrations and artwork bring to their products. The feature that presets a Tip % based on the category was the perfect opportunity to create graphics that would make this product ressemble and feel like Dropbox’s products. I found licensed icons that were close, modified them and applied Dropbox’s color scheme.
Icon Credits
Cocktail by Creative Stall from the Noun Project
Delivery Bike by Surendra Jayawardena from the Noun Project
Taxi by iconsmind.com from the Noun Project
If I had more time I would ...
- Continue work on the layout and micro interactions for the results
- Complete the app by building a prototype in Skala or Invision
- Define the animation and interactions (via prototype)
- Let people use it, play with it and get feedback
- Design and validate features that are unique and useful:
Localization: The app adjusts defaults for the tips based on the user's location. For eg. if I am traveling to Spain, based on "current location" the app will change the currency symbol and defaults for tips for various categories would be set accordingly to local customs. The app will provide "tips on tipping".
Auto fill via Image Recognition: A user can take a photo of their bill using the camera from within the app. From that point on, the tip calculator is filled out with a bill amount and # of people to split across based on scanning the phone. The app uses Optical Character Recognition (OCR) to figure out the number of people by looking at the entrees and finds the total bill amount on the receipt.
- Design a few screens for an Android app and iterate on bridging major gaps in the design for the two platforms while staying native where it makes sense
- Reconcile the design for the phone with a design for the apple watch. The app could have a different flow if it was meant to be cohesive with the apple watch leveraging some of the same design elements
What's in and what's not
There was temptation to include additional options and preferences in the application. For eg., a user may want to round their total or the tip. Also, technically, rounding can be standard (round up anything 0.5 and up, round down 0.49 and below), round up, round down or none. But how often do I use that functionality? I tend to do it mentally. Throughout the design process, I reminded myself that simplicity trumps too many options in this context.
On the other hand, I present a treatment for "additional options" that includes features for sending, saving and viewing bills. The main motivation for including these was to demonstrate how additional features can be accessed from the menu based on the paradigm set for getting to additional actions in the "Files" view in the Dropbox iPhone app.
Resources
5 Things to Know when Designing for iOS – By Ash Furrow
http://www.teehanlax.com/blog/5-things-to-know-when-designing-for-ios/
Designing for iOS 9 (Tremendously helpful!!) - By Design+Code @MengTo
https://designcode.io/iosdesign-guidelines
Dropbox.com & Dropbox Branding Guidelines
Designs were created using the DesignCode-iOS-9-GUI.sketch template
