State of the digital design nation

This week, service design studio Fjord announced its sale to the management consultancy behemoth Accenture. This move follows a dizzying flurry of industry acquisitions, pivots and mergers on both sides of the Atlantic. Big group moves: AKQA selling to WPP, LBi selling to Publicis (to subsequently merge with Digitas), Rokkan selling to Publicis. TechGiant acqui-hires such as Hot Studio selling to Facebook and NYC design studio 80/20 selling to Square. Not to forget last week’s pivot of London boutique consultancy Berg into a cloud services company.

Whilst this is not an exhaustive list, there is clearly a great deal going down in the digital sector. Most of these plays are driven by the shift towards user experience and digital product design. Under the ‘experience is the brand’ mantra, these moves are an effort to integrate such capabilities into an all-encompassing, 360, integrated service offering. The reality is that for those in digital product design*, these ecosystem changes present us all with a number of challenges and opportunities.

*By ‘digital product design’ I refer specifically to companies with the capacity to design and build digital products and services in house. This includes a range of companies from boutique mobile studios, interactive marketing agencies and design consultancies, to global management consultancies and the exciting new wave of digital product studios.

The opportunity

In the same way that consultancies such as IDEO and Frog achieved permanent association with innovation and industrial design in people’s minds, and consequently safe commercial orbit; the same opportunity and path is emerging for digital product design.

Importantly the opportunity to become truly great is about more than just financial reward. It’s about the chance to become a recognised design leader and partner to the brands whose digital products and services shape our world. It’s about the experiences and opportunities presented, which cannot be bought. The one shot you might be lucky enough to have at all this is however all too easily sold.

The players

Boutique mobile studios focused on apps have made an impact in the last few years. However, the focus on an app or mobile experience is not holistic enough to cover the full cycle of a user’s engagement with a product or service. Service and product design instead requires wider thinking and expertise. Worryingly for pure play mobile studios, development is becoming rapidly commoditized, just as web development did in the noughties. Mobile shops are also often under heel to digitally naive ad agencies, standing in the way of the vital direct client relationships. In terms of scale it’s hard to win or manage certain types of business, let alone international accounts, if you are a ten or twenty person company in a single location. As the bottom slowly falls out, members of this group will need to scale, evolve, sell or die.

Interactive marketing agencies including RGA, AKQA, Razorfish, SapientNitro, Huge etc, are all highly successful and established businesses. They possess genuine design cultures, as well as the people and the components required to deliver digital product. All of these players are no doubt looking hard at which direction to go in. Will the lure of the marketing dollar prevent them from arranging themselves internally to truly excel in digital product for clients? That million dollar gig to handle media buying and social media for bleach brand X is hard for them to resist. Why should they care about digital product when there is simply too much money to be made in marketising and too much business to grab from the traditional advertising shops who have been fumbling the digital ball. Sitting within a group structure, does lack of autonomy prevent them from steering the ship in anything other than the most profitable short to medium term direction?

Old guard design consultancies such as IDEO, Frog, Cooper and Continuum have superb design credentials built over decades of outstanding work, delivering iconic innovation and industrial design. But digital and implementation have historically not been part of their DNA. Have decades of working in high-level innovation, in abstract, research and industrial design left them poorly positioned to respond to the opportunity around end-to-end digital product design? Some of the aforementioned care more about following through and implementing their visions to deliver digital products than others. Whatever their intentions, I suspect it will be no small challenge for them to reconfigure for the digital future.

The giant advertising holding companies or global management consultancies – will they finally get digital right through their acquisition strategy? I fear that their size, culture and commercial objectives do not accommodate the key tenets of good practice in digital product design such as (forgive the cliches) rapid innovation, fail early & fail fast, UCD, product budgets (rather than campaign budgets), running small, tight and efficient teams etc. Will innovation even scale in these environments? I guess we will see this play out live with the integration of Fjord into Accenture’s design and marketing arm. It could be argued that they aren’t institutionally passionate about great design and experience but no doubt some of their people are. For the big boys, digital design is a capabilities play rather than a passion play and that will always translate into their design culture and ultimately their output.

The future is happening – The best chance

The fact is that for most of these companies things are going rather swimmingly. There is really little incentive to take focus off the cash cow and change course. This leaves the gates open for the next few years before some of the old guard get their act together on digital product. One thing is for certain – it’s going to be interesting to see how these major players position themselves in the coming years.

The next (first?) great digital product design studio will not come from these legacy companies, but from the emerging generation of focused digital product studios. These studios are born digital, and their DNA is design, code and product. With focus on product and experience they are not blinkered by marketing bounty. Their independent status allows them to pursue an ideal and a mission. They understand that digital product is a fledgling industry in its own right and not a subset of any other. Aside from their client work they invest their time and money in their own product explorations and they do this not as a cynical client winning initiative, but because they believe in it. These nimble, hungry and focused studios have the chance to navigate their way through the crowded field, establish themselves and get a shot at greatness. The studios of the likes of Made By Many in London and Teehan+Lax in Toronto are fine examples of these types of studios and ones to watch.

The talent

The designers, developers and strategists who actually make it all happen are characteristically idealistic people who want to believe that their work has impact and consequence. They are looking for the right home and a vision aligned with their ideals, which is increasingly less to do with a campaign and is certainly little to do with enterprise by spreadsheet. Mission based companies are magnets for those ideals because deep down we want to change the world.

Can the best talent ultimately be retained within large legacy institutions, or post acquisition in a culture and vision they did not sign up for or post acqui-hire at a tech giant where they may work on only one product? Will the shift towards digital product as the leading edge make the focused product players the most appealing proposition for the best talent and fuel opportunity? Again, the next few years will answer these questions.

The real opportunity 

The discussion so far has centered around the agency/client model for digital product design, where one is paid for services rendered. This work can be truly inspiring and provides the opportunity to help define experiences for millions of people through client’s products. Where do you go from there? A proven track record in digital product will allow you to extend the traditional model by negotiating alternative commercial terms with companies, for example leveraging expertise for equity payment or under a JV arrangement. However, if you have that capability and spend the next three years only working for clients, you will have missed a far greater trick.

Real success in this area creates a far greater opportunity, which is to fundamentally reshape the the studio model. It has never been easier to build and distribute and market a digital product and those with a capability in digital product design who have been successful in delivering for clients, can and should aim to build capacity to explore their own digital product initiatives. Success here will generate passive revenue streams from the licensing or selling of a digital product or service as well the opportunity to augment the unscalable client service model. That in turn opens up remuneration models for the people that made it all happen which others cannot come close to.

The future, truly great digital product design company will have a stellar client service division, be running successful own product initiatives and will have equity stakes in select ventures where their skills can be leveraged best. Lots of legs on the table and one hell of an adventure.

Over the next few years there’s everything to play for. It’s game on.

This post was originally published on Mobile Inc., the blog of London based designer Murat Mutlu. Follow Murat on Twitter or sign up to his newsletter.

At the end of April we noticed that Rando was becoming very popular in South Korea. Over the last two weeks the number of Korean users has continued to increase dramatically and along with them we have received a great amount of feedback. We have also received a huge number of complaints via email and Google Play’s reviews. The cause of these complaints? The “Sea of Japan”.

Our Android version of Rando had inadvertently caused upset among our Korean users due to the labelling that appears on the body of water between South Korea and Japan. The name for this area of sea is disputed between South Korea and Japan. Japan names the sea the “Sea of Japan”, South Korea names it the “East Sea”.

Rando uses Google’s Static Maps API to provide map images for rando locations on Android. These maps are not interactive and use a fixed zoom level. Unfortunately, the zoom level we use does not show both the “Sea of Japan” and “East Sea” labels for this area and as a result many of our South Korean users were not happy.

While we had contacted Google to inform them of this issue we wanted to try and see if there was anything we could do ourselves. We decided the fairest solution would be to remove the label completely from our maps since we did not wish to cause our Japanese users offence either. Our aim was to draw a mask of sea over the label to hide it from view. The location of the mask would need to adjust depending on the area of world visible in the map.

Static map mask

Google Maps use a variety of coordinate systems and provides example code that allows you to easily convert between them. This allowed us to specify mask coordinates in degrees of latitude and longitude, then for any given map image and zoom level we can translate our mask directly to pixels and draw it onto the image. By translating the mask coordinates this way the mask is always placed in the same location relative to the “Sea of Japan” label. This overcomes issues relating to Android’s vast range of possible screen sizes and the distorting effects of the Mercator projection used by Google Maps.

Within two hours of posting our updated Rando build to Google Play our analytical tool reports that over 1,000 map images have been masked. We hope the solution is agreeable to both our Japanese and Korean audiences and that they can continue to enjoy sending and receiving Randos worldwide.

Download Rando from the App Store or from Google Play now.

An everyday commute

Everyday of the week I travel on the Southeastern rail network, taking the high-speed service to and from Kent and London St Pancras. The service is great with comfortable seats and a respectable amount of legroom.

Like the majority of other commuters I spend most of my travelling time focusing on either something paper based (a newspaper or printed out documents) or on a screen (mobile, tablet or computer).

A quick look at my fellow commuters one evening I could see that those using their digital devices were either watching a film or TV show, reading an e-book, playing games, working and/ or accessing social media networking sites. It’s clear that screen interaction is a compelling activity for many commuters.

Crossrail 2015

Looking forwards—the commuters using the Crossrail service in 2015, will no doubt be showing similar behaviour.

Crossrail will carry around 200 million commuters each year in to Central London and is one of the largest engineering projects undertaken in the UK. There will be up to 24 trains an hour at peak times running between Paddington and Whitechapel. Such immediate access into and across central London will appeal to a great deal of premium customers, enticing them out of their cars and on to this new and fast rail network.

The combination of affluent customers, high spec infrastructure and the enormous projected passenger numbers provides a massive opportunity to create a world leading and revolutionary rail customer experience and service.

Crossrail app concept

A large part of the Crossrail journey will be deep underground, and when it isn’t, the landscape changes so much with big buildings and bridges that a stable mobile internet connection is impossible. Therefore free WiFi should be considered a minimum standard in 2015. When National Express introduced free WiFi to their services, they witnessed a threefold increase in passengers, so the benefits of offering free basic internet access are not only clear from a business perspective but a necessity for customers in this day and age.

Given the mix of premium customers and their needs along with the mode of transport, there’s no reason why an in-flight type experience would not work well in this context. However, unlike an in-flight system, the on-board experience does not have to be tethered to the back of the seat in front of a commuter. The creation of an app accessible via a multitude of customer owned digital devices would be a far more appropriate and cost effective solution. An app would not only provide the Crossrail network with a powerful and easy to maintain customer solution, but offer customers a much more personalised and contextual experience overall.

For example, the app could be the customers’ portal into a Crossrail branded world of both free and premium content including recent film releases, financial news, TV series, sports events, music and games. Any on board announcement could be broadcast through the app via the customer’s headset with a subtle and visual countdown keeping them informed of the progress of their specific journey.

All content and media could be hosted on the train and streamed to the customer through WiFi to retain the highest speed possible. Content could be updated as frequently as required by Crossrail with the branding, monetisation and user experience opportunities being huge.

Building on this, a feature designed using on board security cameras to instruct customers were available seats are, would be a welcome treat for many seasoned commuters. It would also help with service load and distribute passengers evenly throughout the train.

Outside of the carriage, the Crossrail app could support the commuters’ daily grind to work by offering timely travel updates, tickets renewal reminders, schedules and last train home alerts for example. These are all standard features included within many popular travel apps but Crossrail has the opportunity to create a seamless and all encompassing premium experience for its customers. Ultimately you could imagine a future passenger on Crossrail purchasing a season ticket with the app included in the same bundle.

Conclusion

Such awe-inspiring transport projects like this deserve the very best in every single aspect of delivery from engineering, to architecture and even all the way through to customer service initiatives.

By offering an on-board customer orientated experience through an app, Crossrail could enhance its positioning and public perception, helping consolidate its cutting edge profile. Besides offering additional revenue opportunities and a platform for direct customer communication, the marketing opportunities surrounding this type of unique customer experience would also help grow Crossrail’s brand and garner interest on a global level.

For those of you old enough to remember the days of film, did you ever get someone else’s photos after a mix-up in the lab?

That completely unexpected peephole view into someone else’s lives became the basis of what was to become our newest “anti-social” photosharing app.

Introducing Rando—an app where serendipity rules the day and users send and receive  random photos to and from random people all over the world.

Introducing… Rando

At first, it sounds like just another fun thing to do, another gimmick. But giving it some more thought reveals other opportunities that we thought would be interesting to explore.

For instance, what happens when you cannot communicate between users in this social-media world that we’re living in today? Are users still going to be incentivised if they have no way of patting each other on the back with likes? Are you going to be engaged if you can’t follow specific users? And what happens when you are producing something but have no control over who will see it?

A photosharing app without likes?

The premise of Rando raises these questions and more, but most importantly we wanted to make a photo app that was unique and that gave the user something special.

Thus, we made it so that any photo posted with Rando can only be sent to one other user. Think of a Rando as a gift. By uploading a photo with Rando you are essentially giving a piece of your world for someone else, and only them, to keep.

This way every single user gets their own private collection of pieces from other peoples lives. Every user gets their own little peep holes into parts of the world they may never experience.

So with the concept down, we wanted to explore some aspects of our process as well, so we drew up some guidelines to work to.

Process

With this project we wanted to ‘just fucking do it’. None of us are strangers to long winded development cycles which are fraught with umms and ahhs and we wanted to prove to ourselves that we were capable of “JFDI”.

This meant we had to work with really small iterations, lots of face to face time and personal communication, but most of all—getting it out there even if it wasn’t perfect.

Obligatory post-it note picture

This would give us a way to have a really quick feedback loop with the users and allow us to tweak and add functionality as needed, rather than letting months of guesswork define the feature scope before a first release.

Thus, “JFDI” had implications for both tech and design.

Tech

One big decision when working with tiny deadlines is what to compromise. Obviously we want to stick with what we know best, but in the case of Rando we needed both a server application and the client application for the phone.

We chose Ruby on Rails for the server side as it is very quick to develop simple JSON web services with and because we have had experience with it. We also chose to host it on Heroku as it means minimal server setup and maintenance time for us.

However, this means that we have no file system to store uploads on, but Amazon S3 suits that purpose perfectly, and is a gem for that!

For the iOS client, the biggest decision probably has been what versions and devices to support. We took the quick and easy road of starting with support only for iOS6 and indirectly the devices that can run iOS6. The reasoning behind this is that newer operating systems usually offer updated APIs which lead to the APIs being easier to use, thus saving us time. And really, with the update rate of iOS devices we still have plenty to users to grab a hold of even with only iOS 6 support.

Then of course, we chose established and easy to work with frameworks to help us along the way, for example AFNetworking for communication with the server. On top of that, handling dependencies with Cocoapods makes life so much easier for an iOS developer—which we highly recommend.

Sketches for Rando iconography

Design

So whilst the concept behind Rando threw up some problems for development, it also presented an interesting design challenge.

Rando needed to be different, feel like an experiment and stay true to the concept through its visual design.

Initial visual directions were varied. We looked into alternative image viewing options, branding, visual style and interaction but we felt these had too much personality. The intent of Rando was to keep user generated imagery the focal point.

As a wild card a super minimal UI was quickly constructed and collectively voted in as the best option.

To further highlight the importance on user generated content, we challenged ourselves to not use any words in the app.

Labelling was communicated via simple iconography and universally recognised gestures.

The Rando flow illustrated with icons

However, due to the unconventional nature of Rando, we had to give a slight prompt in written form, although but this was completely hidden from view, and only displayed after a simple swipe gesture.

Communicating a brand when your emphasis is on content which users generate was another interesting problem to solve.

We wanted a rando to “look like a rando”—a distinctive and ownable branding element.

Thinking back to the meaning behind Rando gave us the concept of a voyeuristic view into another persons world and the peephole concept surfaced.

A “Rando”

The circle felt right. It tied in with the ‘o’ in Rando, is a malleable shape in which to use to drive a constant visual language, and most importantly supported the concept.

Keeping in mind that like the development, the design was done with “JFDI” .

It took some sweat, and probably some tears as well, but after two weeks we delivered our first submission to the Apple App Store.

It feels great, that sense of having a working application ready to go out to users, even if it could do with some more polish or some extra feature. That doesn’t matter when you can hold it in your hand and play with it. All the extras can and will come later at a steady pace. It’s all going to be fine.

Download Rando from the App Store now.

Mobile photography is a huge social phenomenon. Online photo communities like Instagram, Eyeem or Flickr provide popular, easy-to-use platforms which allow people to express their creativity or simply share the highlights of their lives, pets, food… or feet.

But what about mobile videography? Although video sharing has been growing over the last couple of years, it still far from eclipsing the popularity of photo-filter apps.

You would think that with better mobile cameras, more powerful devices and faster connections people would be sharing video content with the same voracity as they’ve been sharing images but up until the release of Vine late last year, this hasn’t been the case. Could 2013 finally be the year of mobile video, or is there another reason why mobile video hasn’t taken off?

Instant Reward vs Effort

Perhaps dopamine is the reason why there’s such a huge difference in use between the disciplines.

“Dopamine plays a major role in the brain system, and is critical in all sorts of brain functions, including reward-driven learning…

…It’s easy to get in a dopamine induced loop. Dopamine starts you seeking, then you get rewarded for the seeking which makes you seek more. It becomes harder and harder to stop looking at email, stop texting, or stop checking your cell phone to see if you have a message or a new text.” —Psychology Today

I would venture to say that the act of taking a picture, applying filters and publishing is much more rewarding than taking the time to create and share good video content. It takes much longer to create decent video content. Not only do you need to shoot the content, you need to edit it and editing takes time. The longer it takes to create the content, the longer the delay in receiving the “reward”. This may be a delay not all users are willing to wait for, especially when you can spend much less effort on Instagram and get “Likes” instantly.

So let’s take for example that during the six seconds a Vine video lasts, your brain receives in exchange only one reward. How many pictures could you go through on Instagram in the same amount of time? Six? So, in the same amount of time you watch one piece of content on Vine, it’s possible to send or receive six instant “rewards” on Instagram.

What option do you think our dopamine addicted minds would go for? Is this the reason why photosharing is more popular than videosharing? Perhaps, but I believe it’s not the only one.

Instagram & Vine—Instant Reward Apps

It didn’t seem like there was an Instagram-like mobile video sharing app until Vine appeared. However, Vine did not invent the video-sharing wheel.

Socialcam & Viddy are well established networks which have been running for a few years already, allowing the user to do pretty much the same thing that Vine does—record and share short video clips. Although their total number of registered users is far from small, not many people know about them, whereas Vine is the next big thing. Why is that?

Is the buzz around Vine’s launch just because belongs to Twitter, or is it because the app itself offers a unique proposition?

If you go to Viddy or Socialcam, the kind of video content uploaded by their users is not very different from YouTube’s, whereas Vine has demonstrated that six seconds are perfect to capture your daily life, create a stop-motion video or a short-film, and even bring fans behind the scenes!

Combine this with an innovative capture method which negates the need to edit videos, serve the created content with minimal delay and users begin to reach that “reward” for sharing video content almost as quickly as they do on Instagram.

So whilst Vine isn’t the first popularise videosharing, it manages to successfully remove barriers to people creating and sharing video content and perhaps this might just be enough to make 2013 the year of mobile video.

Caution on below video: language.

Friday afternoon at @ustwo.  vine.co/v/b5PDnqxZDeE

— Shaun Tollerton (@tollerton) January 25, 2013

The hardware needed is already available at reasonable prices and will only get cheaper. Also a bunch of Open Software and Open Hardware platforms (Arduino, Ninja Blocks, Raspberry Pi, Teagueduino, BeagleBone…) have opened up the world of hardware development, so people like us (developers and designers) can get stuck in and bring a completely different mindset to the development process – a mindset centred around users.

We still have loads to learn, but we’re getting there. Have a look at the video below of our latest prototype that we’ve put together:

What you see is a combination of these:

Philips Hue lights

We bought these from a recent trip to our newly opened NY studio. The Philips Hue is set of LED lights that you can control the colour of by using its official app (iPhone, Android).

It didn’t take long for the community to figure out how to control them, which as it turns out is very simple to do through HTTP requests. In a clever, yet surprising decision for a big company, Philips decided not to lock down the hub or sue 3rd party developers. More so, it seems that the engineers at Philips either run or are very active in the unofficial support forums.

Behringer BCD3000 MIDI controller

Oldie but goodie, we typically use it for our DJ sessions in the London studio, but we thought it would be cool to use it to control the lights as well.

To make things simpler, Behringer offers decent documentation on their website.

UniMIDI

This is a fully cross-platform Ruby library to handle MIDI devices. Was refreshing to get it to work in Ubuntu without almost any trouble (we reported a potential issue regarding high CPU usage).

It had no trouble getting data from the Behringer and also from other MIDI devices that we have knocking around the studio, like the Novation Launchpad.

The only thing we couldn’t figure out was how to send commands to the controller, for example, to turn on its LEDs. Too bad we ran out of time!

RubyHue

We used RubyHue to talk to the Hue, which was good enough for this prototype, but we later found a more polished fork. As of today, neither library handles groups of lights, which might be a very important feature in future (read caveats below).

Caveats

The Philips Hue is a system designed for the house to help achieve a nice and warm range of coloured lighting and good radio coverage (using ZigBee’s mesh effect).

The downside to this is it’s very difficult to get colour changes occurring rapidly even with transition set to 0, especially on a busy network (you talk to the hub via HTTP calls) or with a high number of lights (~10).

This could be overcome by using the groups API, but most libraries don’t cover it yet.

Philips has not released the official SDK, which means it would be very risky basing a commercial product around it.

//

Anyway.

Although this was a proof of concept, we’ve learned a lot from it and if you’re interested in the code, you can check it out on Github.

We’re not sure what we’re going to do with the Hue, since we have other numerous ideas for other internal projects that could use a set of programmable lights.

By the way, we’re going to be testing (and blogging about) hardware a lot during 2013. We’re super interested in all the new emerging platforms and the almost endless possibilities and opportunities they will offer. Anyone sharing similar interests or with similar stories, please get in touch (juan __ ustwo __ co __ uk) or leave a comment!

Thanks : )

PS: credits to Alvaro Arregui for the video edit and elkiano for the soundtrack!

Starting point

I made a moodboard of interfaces from dark to light, realistic to minimal to get inspired. I questioned the current version of Instagram and formulated my answers to design decisions on a sketch pad. This was essential to avoid me getting lost staring into a Photoshop document. As an Illustrator guy, I barely knew how to use Photoshop until this point, so the Icon Resource course helped me in a big way. The ustwo™ PPP handbook was (of course) always on my Finder sidebar for quick access.

Initial sketches exploring UI concepts

The dark, flat, professional interface

Rather than restricting myself to the existing look and feel of Instagram, I approached this brief as a reimagining of Instagram for more serious photographers on the Instagram network. Like the contrast between iPhoto and Aperture, the proposed theme is professional, dark and detailed. A complete opposite of the current style.

Dark version of redesigned Instagram UI

The photo feed is the core of the application and for that reason it takes center stage on this redesign. By doing a bit of user research, I reached the conclusion that only a few users take photos from within the Instagram app. The large majority use SLRs, the native iOS app or Camera+ and then import the photos into Instagram.

However, the camera button is still presented as the primary call for action. It’s always visible on the nav bar and is given special visual treatment. The strong orange contrasts with everything else on the interface, bringing just the right percentage of vibrancy to a neat and subtle interface.

You may notice the tab bar gone as well as the Like, Comment and More buttons missing from underneath the photos. All these actions and sections are hidden one layer deeper: you swipe a photo to the right to reveal a user profile preview and swipe to the left to Like, Comment or Share that photo.

Swiping left reveals actions such as liking, commenting and sharing, swiping right reveals information about the poster

Scrolling beyond the top of the feed will reveal a menu with search button, a toggle for photos and news, and a button to access your profile. By removing UI clutter in this way we can give more of a focus to the content.

UI clutter is reduced by putting search, view toggle and profile controls beyond the top of the feed

I wanted to introduce a new feature to Instagram, and thought viewing your feed through a time-based map view was intriguing. I consulted with peers about this and got good feedback. The most interesting part was discussing how a user would navigate through the feed on a map, how photos appear, how many photos appear at a time and how to make it easy to understand.

To get to this new feature, the user taps the map icon to flip the feed to a map view. When in the map view, the user is given a roller at the bottom of the screen that allows them to navigate through the feed while they’re viewing the map.

Tapping on the top left map icon flips the content to display map view

Feedback

At this stage I built a prototype to gather some feedback on the App’s interface and functionality. You can open the prototype with your iPhone with this link (bit.ly/VvLzEM). Make sure you save it on your home screen. The prototype is a bespoke HTML5 web app.

The feedback from people using the prototype was that the map icon that it was too dark, hard to understand and out of tune with other icons. The text and inline icons could be slightly bigger and the Like / Comment / Share buttons could be spaced further apart. The type size was 12px and should be increased to at least 14px as per the Apple HIG (pdf). The contrast of the body text against the background colour should be increased and measured using a colour contrast checker for accessibility purposes.

Iterations of the map icon

Originally, I had intended that tapping on the search icon would display the search bar next to it. This proved to be confusing and hard to implement as a search in the feed implies that it searches through the feed. To solve that, I moved the search above the nav bar in order to represent an app-wide search. The filters are extra functionality and help convey this message.

Variations of the search field design

The camera button was also too distracting while browsing the feed. I worked on several treatments of this button, but achieved not a single one that I was satisfied with. After reading a blog post calling for a pull-to-create behaviour on apps and the Facebook Camera app including the camera button as an element of the feed, implementing the camera button directly into the feed stated making sense.

Pull for Camera

This gesture feels very natural and intuitive. It certainly needs to be easy to discover, so it might need a help pop-up on first use to tell the user the camera is hidden away. But it seems to work well and in conveying the meaning of adding a photo straight to your feed. I made a short video to demonstrate the functionality of this. 

The Play-Doh interface

In parallel, I explored a second visual route. This “play-doh” styled design is fun and energetic, a complete opposite to the previous version. It conveys the feeling of sharing photos on Instagram. With this version I didn’t work so much on the application architecture, I focused mainly in conveying a feeling through the visual language.

Working versions of the “Play-Doh” colour scheme

I built another prototype which you can view on this link (bit.ly/XJWyER)and again, remember to save it on your home screen.

I don’t feel the more flat and minimal route works with this style. But the colours on the tab bar create a special feeling. I tweaked these colours to be stronger and made the rest of the UI in a warm shade of grey.

These colours look stunning on the iPhone. You might also notice a slight change in the camera icon. I wanted to continue the colour spectrum motif from the tab bar through to the camera icon. The shades of colours you see on the icon are designed to be an animation that plays according to the movement of your phone, detected using the accelerometer, to simulate light refraction projected on the icon.

The camera icon refracting light

On top of this, I made a profile view to give the interface a more consistent feel.

A view of a user's profile page in the lighter version of the redesigned UI

Let me know your thoughts about this project in the comments below, or simply say if you have a favourite out of the two styles.

The source code can also be downloaded below.

Download Prototype A (Dark) Source Code

Download Prototype B (Play-Doh) Source Code