A Sweet Life Without Sugar

We helped Happy Whisk design & build an iPad app to share their delicious sugar-free recipes.

Background

Happy Whisk approached us to take their existing cookbook and make an engaging iPad experience out of it. We set out to tell a story with ingredients, making sure everything from our photoshoot to our design choices reflected that decision. Our experience goals were to create a friendly, warm & inviting app. By using familiar colors, textures, and typography we created an atmosphere reminiscent of baking with a good friend.

Photography

We decided to shoot all of the photography for the iPad experience. Our vision for the recipe screens revolved around being able to tell a story with our images. Each dish would have to visually relate to the others while showcasing their individuality. We achieved this through backgrounds, surface textures, utensils, and, perhaps most importantly, the lighting.

Our lighting set up was set up around the concept of strong, even light. We used three soft boxes, two as strobes and another as constant fill light. The two strobes had varying intensities as one was over head and the other was the key light. Each set up had its own unique lighting challenges but for the most part this lighting setup worked universally. Also, shoot with a reflector. We discovered that is the best way to accentuate the subtle highlights on surfaces. Depending on what material the reflector is made out of it can also be a great way to add or subtract warmth from the composition.

After our two days of shoots wrapped up, we headed into Photoshop for the post-production work. We shot all of our images RAW & found a nifty trick when opening the image once the initial corrections have been made. There's a setting that allows you to open the RAW image as a smart object. By opening the image that way, you can easily hop back into RAW editing mode to make any adjustments along the way. Most of our major adjustments had to do with color balance and levels for selective areas in each composition.

App Design

When we were first planning out the architecture for A Sweet Life, we focused on what the primary action of the application would be; viewing, and enjoying, recipes. Our goal was to showcase the recipes with inspiring photography. After a couple of sketches, we decided to go with a carousel view. This would allow us to insure that the photography takes center stage for browsing & the recipe content easily available when needed. The menu gallery view is another way to navigate to recipes and educational information. We decided to include badges on the content that is marked as a favorite for quick and easy access.

The UI for A Sweet Life has direct references to the experience of flipping through a loved recipe book. We wanted to make an experience that was friendly, warm & inviting. By using familiar colors, textures, and typography we aimed to create such an atmosphere. The menu gallery uses a wood cutting board for a surface with a grid of small recipe cards on top. Each card has its title on a decorative label that picks up a cheerful color from the accompanying photograph.

Icon Design

Our original design for the app icon was a top down view of a cupcake. This turned out to be a larger undertaking than we had planned. We scoured Portland for it's fanciest cupcakes & proceeded to photograph them with high hopes. Unfortunately, none of them turned out. Some were too detailed, some didn't look as pleasing from the top as they did the side, or some met a disastrous end before arriving to the photo shoot.

In the end, as you can see, we moved away from the cupcake concept and on to a dessert that was a favorite of ours from the app. Candied orange truffles are not only absolutely delicious, they are also quite lovely. We started by mocking up a quick concept in Photoshop before moving into Cinema 4d. Creating a 3d model allowed us to achieve the correct perspective & lighting on all of the shapes. Entering back into Photoshop wasn't as hard as you might think. When we rendered the truffle, orange peal, and wrapper out of C4D, we used multi-pass rendering to create separate alpha channels of each element. This allowed us to add textures, adjust the color balance & tweak each individual shape as much as we needed to. The end result turned into a delectable iOS squared truffle. We're pretty excited about it.

Services

  • Photography
  • User research
  • Product strategy
  • iOS design
  • iOS development