Background

The premise of the Face-Jack Me app isn’t an original one – I’m sure the client won’t mind me saying that, and for that reason at the beginning of the project I had some doubts about it. Essentially you take a picture of yourself, or someone else, that photo is then broken up into 3 segments, and you swipe your finger left and right to shuffle through different face combinations. There are sample faces that come with the app, or you can take more photos of your friends or family and combine your face with theirs for some really quite funny outcomes.

Whilst doing some research it was clear that this idea had been done before. From looking at and playing around with some similar apps, I felt that the slick look and feel and simplistic ease of use of these existing offerings was missing and due to that there was a definite gap that this app could fill if done well. In short to make this iPhone app a success it had to be easier to use and better looking.

Planning / Wireframing

As always the first stage consisted of wireframing the main screens of the application. This was so important because it allowed myself, the client and also the developer (Kriss Bennett of Createful) to spot any shortcomings before we’d got to the design stage and beyond. It also allowed me to come up with a ‘process’ for ‘Face-Jacking’ a photo that I felt was much easier than how any of the other apps did it, with buttons in easy to notice places, ways to quickly take a step back in the photo capture/editing process, and a way of making the app social too.

Here are a few screenshots of the wireframes that were presented to the client:

Some key features were the ability to save your ordinary photos into one gallery and your ‘Face-Jacked’ photos into another gallery. We also wanted to let people share the funny faces they’d created on Twitter or Facebook.

The main thing though was coming up with a really easy to use process for taking and modifying a photo, and also making it immediately obvious how to get started as soon as the app loaded up. This process turned out to be refined and modified during the development as it became clear that we hadn’t quite accounted for everything. Kriss (the developer) released several test versions of the app on TestFlight to allow us to test it and see what was missing.

Icon Design

The icon design was something that I was a little nervous about initially. Usually for an iPhone app icon I’ll try and create a shape or simple illustration that gets across the premise of the app. See the Sea Urchin app icon I created. Here though the client also wanted to see a version using photos of faces. Having looked at a few other apps that used photos in their icons for inspiration, honestly I thought they looked like they’d been thrown together in five minutes.

With that in mind I set about creating some ideas:

The photo icon was starting to look good and the client really liked it. I wanted to combine several faces to get across what the app does and stagger them to show the user they’re adjustable. I then combined this with a simple ‘FJ’ combined to create something that I and the client really loved. Here’s the finished icon.

The App User Interface Design

The client had initially requested a red and black colour scheme, but after some experimentation during the icon design, I thought a blue would work well. Usually red and blue would be a colour combination I’d steer clear of, but somehow it works here. It feels fun and vibrant. The ‘feel’ from the icon needed to follow through into the design of the app as a whole.

The homescreen of the app had to be simple and just let the user get started straight away. I wanted the Face-Jack button to be clearly ‘pressable’ and also point the user right to the button with some kind of visual cue. It had to be really obvious how to get started.

From here the photo capture/editing process had to be designed. It had changed a little from the initial wireframe, and even during the development Kriss and I refined the process a little adding and taking away buttons to make sure the whole process was as easy to carry out as possible. We also wanted to keep the branding strong when a user plays around adjusting the segments, so we added a frame to the photo that included the Face-Jack Me logo.

Above you can also see the gallery where you can save your creations, and also some of the other screens.

Overall

The client was very happy with the finished outcome and so were myself and Kriss. We think the app is well worth 69p, so go over to iTunes and download a copy - it’s had some great reviews already. Honestly its really funny to take some pictures of your mates down the pub and start mixing them together.

As a quick side note, the development of this application was handled by Kriss Bennett of Createful. Thanks Kriss, great job! Now on to the case study…

Application Overview

The Sea Urchin iPhone application was really pretty straight forward. In essence it lets people who are interested in chartering Sea Urchin (a boat captained by my client Mick) find out a little more about exactly what’s involved in the day, costs, videos, availability, weather forecasts and tidal information. You can download the app from the iTunes store to take a look for yourself.

Stage 1: Information Architecture

The first step was to organize the information on the homescreen of the application.

Mick told me the sections he wanted the app to have, so I sat down with a pen and paper and started to think about how these could be best organized to allow users to quickly access each section of the app from the homescreen.

After a quick bit of sketching I decided that there were too many areas to simply list in one menu without the user having to scroll to see all of them. Ideally all the areas needed to be visible to the user without any need for scrolling. With that in mind I decided to break the navigation up into two sections. One for the ‘Availability’, ‘Weather’ and ‘Tides’ information and another for the more text heavy based pages. I used the conventional black bar at the bottom of the app (which many other apps use) to house the ‘Availability’, ‘Weather and ‘Tides’ icons, and then settled on a simple button style navigation for the links to the other sections.

Prior to starting the wireframes Mick had also sent me a few images of his boat and also some happy customers snapped with their biggest catch of the day. I felt it was pretty important to include some of these images, so there needed to be a space devoted to that on the homescreen too. My idea here was for the images to fade in and out in a nice smooth cycle.

Once I’d settled on a layout for the homepage I opened up my wireframing tool of choice (Omnigraffle) and reproduced the sketch to then present to Mick. I also produced wireframes for the ‘Prices’ and ‘About’ screens of the app to show Mick how the ‘content style’ screens would look.

The ‘Prices’ page was a crucial one to wireframe in my opinion. The content Mick had sent across for me to work with included all the right information, but it was buried away amongst a mass of text, so actually finding all the different price options was pretty tricky. I solved this problem by clearly highlighting the prices and costs for chartering the whole boat in their own clearly defined blocks.

Stage 2: Icon & Application Design

With the wireframes signed off I started work on the icon design. Initially I went with an all blue theme, but after some input from the client I worked in an orange tone to match the clients existing website.

The icon itself went through several iterations until we reached the fishing hook and waves which was immediately chosen by Mick. First off I went down the route of having a boat in the icon, then tried a couple of approaches with a fish silhouette and rod, but I knew we were on to a winner with the hook and waves combination.

With the design of the homescreen of the application I wanted to keep things really simple and focus on the navigation and images of the boat and past customers. Since this screen was really only a means of navigating around all the content, that had to be immediately obvious.

I was also keep to use some nice iconography to draw the users eye to the more key parts of the app – the availability calendar, weather and tide info.

Here’s a look at the designs for some of the screens:

Stage 3: Development

Once we’d signed the designs off (which happened very quickly might I add!) it was time to save out all the images for iPhone 3 and iPhone 4 retina display and then send them off to Kriss at Createful to develop.

Prior to the development we’d discuss the best way of integrating the Sea Urchin availability calender along with the weather and tides info.

A mini version of Mick’s availability calendar was able to be linked to from within the app itself, there for not interrupting the user journey by closing the app and opening Safari instead. We also included a button to enable users to switch to the more detailed view of the calendar as well.

For the weather we were able to display the Whitby weather forecast straight from the Met Office website within the application.. Obviously this updates on the fly so is always the latest forecast – something thats very handy for a fisherman!

Unfortunately with the tide information there was no API which we could tie in with the app. Because of that we had to resort to linking to the relevant section of the National Oceanography Centre website.

Finally for the videos we were able to link to the mobile version of Youtube and pull in all the Sea Urchin videos enabling users to view them within the app.

Conclusion

Overall I think both Kriss and I produced a great looking app that provides everything that someone who is interested in chartering the Sea Urchin boat would need to know. I’d love to hear what you think of the design and/or the process in general in the comments below.

Client Testimonial

Many thanks to you both, the app looks awesome. The end product is very professional to match your working practices. I would recommend your services to anyone.

Related Post

• iChampi iPhone Application Design

The difference between iPhone 3Gs and iPhone 4

The old iPhone 3 and new iPhone 4 have different resolution screens. Basically the iPhone 4 retina display has double the pixels of its counterpart, which means double the detail horizontally and double the detail vertically. Consequently this creates a little more work for us UI designers.

Here are the specifics:

• iPhone 3Gs – 320 x 480 screen size
• iPhone 4 – 640 x 960 screen size

If you use much of Apple’s pre-built interface library for your app then you don’t need to worry about these differences, as much of the work is already done – the default Apple UI buttons, labels etc work fine for both resolutions. The slight headache comes however if your iPhone app design is highly custom – e.g. it includes lots of custom made images, graphics, icons, menus etc. If that’s the case then you need to create versions for both iPhone 3 and iPhone 4 so that you can export two sets of images at those different resolutions.

So does that mean I need to create my app designs twice?

Thankfully, no! It’s all about using solid color, pattern or gradient layers with vector masks and in Photoshop to ensure that you can design first at the iPhone 3 resolution (320 x 480), and then scale that design up to the iPhone 4 resolution (640 x 960) without loosing any of the detail. You have to use vectors instead of bitmaps as bitmap images blur terribly when you scale them up.

Here is a list of 6 tips that will help you to create iPhone app designs that work for both platforms in Photoshop:

1) Start out designing at the lowest resolution

Start out designing for the iPhone 3 which uses the lower resolution. I won’t go into the specifics but after a quick experiment in Photoshop, vector masks and shape layers seem to scale up better than they scale down.

2) Make sure ALL layers are made from shapes with layer styles for effects

Get in the habit of using layer styles, shapes and vector masks. Bitmaps should not be used in iPhone app design because they’ll cause you headaches when you scale your design up. Shapes created with the rectangle / rounded rectangle tool will be your best friend as they easily scale up and down. One quick tip is to avoid using the ellipse tool for creating circles – for some reason it won’t snap to pixel properly. Instead use the rounded rectangle tool with a large radius to achieve a circle shape. Also, if you want to use textures, you first need to define that texture as a pattern, which you can then use as a ‘Pattern Overlay’ in the layer style options.

3) Enable the ‘Snap to Pixel’ setting when drawing with the shape tool

To make sure this is enabled select the shape tool, then cast your eye to the top of Photoshop where all the options for the tool you’ve just selected appear (see image above). Next click the down arrow to the right of the Custom Shape icon (labelled Geometry Options on hover) and then tick the ‘Snap to Pixels’ checkbox.

4) Icons must be vectors pasted into Photoshop as ‘Shape Layers’

If you use bitmap icons they’ll just blur when you scale your design up; you need to use icons that are in vector format. That may mean recreating some of your icons in Illustrator and then adding layer styles to them in Photoshop (Gradient Overlay, Stroke etc). Be careful when you copy and paste these from Illustrator into Photoshop though – you need to paste them into Photoshop as ‘Shape Layers’ (see image above).

5) Scale up as you go to check your work

As you’re designing its best to keep checking your work by scaling it up 200%. This way you’ll notice any things that need correcting/adjusting as you go. At the bottom of this article is a link to a very handy Photoshop action that lets you do this in a single click.

6) Export your images

This isn’t something I’ve had to do myself as I provide all my iPhone app designs to developers who export the images and then develop the app. I should really start to learn Objective-C, but the time escapes me at the moment. Anyway, I know that the whole exporting process can be a little tedious.

According to this great article on Smashing Magazine (Designing for iPhone 4 Retina Display: Techniques and Workflow), the best export method seems to be:

…enable the layers you’d like visible, make a marquee selection of the element, then use Copy Merged and paste the selection into a new document — not much fun when you have hundreds of images to export.

I’d advise checking out that article, especially the exporting section for more info, and also the incredibly useful Photoshop actions that can be found at the bottom of that same article. Also, this article may be of some use too: ‘Designing for iPhone 4′s Retina Display: What I’ve Learned’.

Helpful Resources

I hope some of you found this article useful. Below are a few links to some handy resources I regularly use for my designs.

• iPhone 3 GUI Design Kit
• iPhone 4 GUI Design Kit
• iPhone / iPad Icon Kit

Also If you have any iPhone app design tips to share yourself, I’d love to hear them!

New Challenge

Designing for the iPhone has been such a great experience and one that I’ve enjoyed so much. Its nice to take a step back from designing websites and look at over coming the new challenges of designing for a much smaller mobile device.

iChampi Design

Below you can take a look at two of the screen designs for iChampi. If you like your mushrooms and you’re French, then this app might come in handy! In essence it allows you to tag your location when you’re out picking mushrooms and also informs you about the various types of mushrooms species and whether they are edible or not. So, quite handy if you’re into mushrooms in a big way. Although there are a few minor design issues with the finished app, which are likely to be due to some things in the development stage (I was responsible for only the design), on the whole I’m really happy with the final outcome.

I’m currently working on the designs for a new iPhone app for a luxury French hotel, so stay tuned for more information and screen shots on that once its complete! Having said that, I couldn’t resist using a screen shot to accompany the iChampi design in the main image for this article though.

Thinking about creating an iPhone App?

If you’re interested in having Authentic Style work with you on your next iPhone application then please do get in touch!

Related Posts

• Sea Urchin iPhone Application Design