We put a lot of thought into the aesthetics for our iPhone app, Serving Sizer recipe converter. We wanted the app to follow Apple’s Human Interface Guidelines, but also set itself apart by polishing the basics to an appealing, graphically designed user interface. Let me take a little time to give insight into our design process in this post.
We put a lot of thought into the aesthetics for our iPhone app, Serving Sizer recipe converter. We wanted the app to follow Apple’s Human Interface Guidelines, but also set itself apart by polishing the basics to an appealing, graphically designed user interface. Let me take a little time to give insight into our design process in this post.
We previously released Serving Sizer on an older platform (PalmOS), but graphics were not as important, 
nor as easy to do, as on the iPhone. Most of the User Interface (UI) work for our new iPhone app was ‘zazzing up the existing functional application. Since Serving Sizer is a cooking app and also a measuring app, we thought we’d start our idea process by checking out what we had in our kitchen. We also had an existing graphic for our CDROM labels for our PalmOS installation disk, which utilized a still-life of measuring instruments, from which to pull ideas.
A couple of measuring cups became our inspiration and basis for the design elements of the app, from the color, to the background (it’s the measuring cup without the markings), to some of the design elements used in the main screen. It didn’t hurt that one of the elements on the cup was the shape of an iPhone back navigation button (but reversed).
From the inspiration, I started some sketches for the main input:
I was going for the curved surface of a measuring cup, using the dots and lines as separators, subtly providing the familiar feel of the iPhone table view, but using it a bit differently for the functionality of the app. I rendered the main screen sketch in GIMP (Linux equivalent to Photoshop),
but the curved segmented control did not seem to work the way I wanted. I opted to lose the curve and go with straight lines and dots, maintaining the idea of the measuring cup divisions, but staying more along the table view feel. Instead, I removed all the lines from my cup photo (using GIMP)
and then reduced the opacity of the cup for use as a background image. For the color theme, I used the red-orange color from the measuring cup divisions for the navigation and tab bars. The transparent glass image provided a subtle greyish-blue look, which went nicely with the bold red-orange. I used the red triangle-like arrow element of the cup as the detail disclosure icon.
Finished product:
The next design approach was of the measurement picker screen. Keeping with the cooking theme, I used a cutting board background that provided the right amount of contrast with the red-orange navigation bars, yet didn’t fight with it. I made the keyboard transparent to bring forth the cutting board background as a subtle design element. Later I hope to evolve the keyboard into a metallic measuring spoon-like quality, but because that requires a custom-coded keyboard, we opted to postpone that concept for now.
The picker screen concept was part of the Serving Sizer Pro (which adds a recipe storing feature) storyboard sketch and flow diagram. Serving Sizer Pro is still being developed; release is expected soon. Note in the bottom right corner is the sketch of the ingredient picker screen:
We designed a slider for the fractions and units, with similar qualities of the scrolling of pages, including the bounce at the end. The slider is designed to mirror the look of a glass graduated cylinder (on its side).
Since fractional measurements are rather standard in cooking: 1/2, 1/3, 1/4, etc., we opted to keep the same amounts we had used in our earlier PalmOS design. We also had a finite number of standard units used in cooking (both for Imperial and Metric), so rather than pure input, we provide these as a picker, grouped into three different types: volume, weight, and items. These types break down the number of selections into groups for quicker selection. Because these units are hard-coded and not just a label, we can take into account the selected units when calculating and reporting the new measurement–each new measurement is optimized for the minimum number of steps for measuring (i.e. 1 cup + 1 T instead of 17 T). It’s a win-win–the user has less to enter and we can provide an essential feature. We repeated the red-orange design element in the rectangles used to highlight the selections. Finished product:
Lastly I worked on the icon. I started with a still life of cooking items, but it was too busy when reduced to the 57×57 size of an icon. I wanted to create something that would get the idea across of what Serving Sizer does–it takes an ingredient and scales it from one serving size to another. Not only can you easily halve, double, or triple an amount, but the main key differentiation of our app is doing custom sizes, such as scaling from four servings to three–all the fraction thinking is done for you by the app. So, in the end I decided on a recipe shown in a cookbook with the original serving size and measurement crayoned out and the new serving size and measurement penciled in, much like you’d do in your own cookbook. I used the same red-orange color on the icon, adding a ribbon bookmark to add more color to the icon. Originally we let the icon shine be added by default, but since we felt that washed out the original icon too much, we changed the icon in a recent release. Here’s our latest icon:
In the end, we have a simple main screen that gives both the feel of cooking, by using familiar cooking colors and elements, while also maintaining familiar iPhone navigation elements. We added a certain pizazz to the measurement picker screen with custom designed slider pickers for the fractions and units, again using design elements from cooking instruments, while keeping the well-known scroll-like qualities in the iPhone UI design. We added the cooking element, a cutting board, as background, for interest and to bring everything together. The result is an app that provides for intuitive and simple entry, plus graphically feels good to both the cook and iPhone user, our target audience.
You can find Serving Sizer on the AppStore and more information on our website.
