Project Image

ABOUT THE PROJECT

Typify was a self-initiated project of mine. I really enjoyed building the WKND iPhone app and I wanted to do another just for fun. Typify is a quick tip calculator for people who tip based solely on the quality of their service.

MY ROLE

I was responsible for the conception, user experience design, visual design, and implementation via Xcode.

The Challenge

Nothing was really super challenging about this project other than figuring out the different states the app should be in at certain stages of user input – automatically clearing fields when clicking back at the starting input, etc… There was only one way to find out…

Sketching It Out

I had a rough idea of the layout I wanted to use already in my head but I had to go through a few sketch iterations before deciding what would work best.

Making the user choose the quality of service first seemed a bit odd and I validated that by administering a few user tests while I was sketching at a bar one night.

I showed multiple sketches and people seemed to gravitate more toward putting in their bill total first, how many people to split the cost of the tip between second, and then selecting the quality of their service – so I went with that flow.

Sketch

Prototypes

There was only going to be a single screen ever so I didn’t feel the need to do any sort of digital wireframes. I was curious about how I was going to end up implementing the number pad in Xcode so I actually dove right in and started to experiment and prototype there.

I got a simple version of the app prototyped out with fake data completed in about 1 hour so I decided to go ahead and start working on the visual style.

Visual Design

Since this was a personal project I was able to come up with a color palette that I thought felt great (and also purple is my favorite color if you couldn’t tell by now). The top row of colors are the shades for the main UI of Tipify. The second row corresponds to the colors the emoticons turn when they are selected.

Color Palette

UI Library & Icons

I didn’t think a launch screen was necessary – I didn't want users to wait for a single screen app anyway. I mostly used default iOS buttons for this (just styled with the app’s main colors). The only custom elements used were the emojis.

Mood Emojis

Screens

Below are the final screens for Tipify.

User Interface

Results

After the visuals were completed, it took me another hour or so to finish programming in all the logic for the calculations and do some final testing before submitting to the app store.

I got some feedback after releasing it that I plan on implementing for the next release. Some people expected the emotions of Very Good to Terrible to be reversed and that makes total sense now that I think about it. Almost all rating systems go from low to high, bad to good, etc... I’m actually surprised this didn’t come up with people I was testing with initially.

You can no longer download Typify in the app store. I'm doing a complete rewrite and design coming soon.