Face-Jack Me iPhone App Design

Face-Jack Me, a fun face modification iPhone app that I designed, went live in the app store recently. Here a short case study about the project.

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.

Subscribe to our newsletter

Get access to all our guides and resources

We will never treat your email address badly. We’ll love and cherish it and treat it right.

Would you like to be notified each time we post new digital media?