The email app Sparrow was, in my opinion, one of the most functionally sound third-party email clients formerly available for iPhone. Speedy animation and efficent design decisions made it a breeze to use. The team behind the app were acquired by Google in July 2012 and has since closed down. The app retains the same look and feel it launched with, but I wanted to re-envision how this app could function on the iPhone post iOS 7’s notable design changes.
Originally posted: 14/7/2014.
Sparrow email app (v1)
Original Sparrow app (left), my design (right)
I started with a blank slate and stripped away all the visual clutter that permeated the tool-bar; excessive shadowing, button shapes, and textures. The rounded corners were also removed to create an edge-to-edge design that made full use of the iPhone’s retina display. I also wanted contact photos to be of greater significance so I increased the size of them by about 20% to create a greater, more intimate connection between the user and the content. I also stuck close to the colour palette of the original app so that it was still recognisable as Sparrow, but this created new problems as far as colour coding different elements goes. The green stripe to the left of a message to signify that it was unread was a novel idea that I stumbled on but was unsure of how to progress further. A pulsating animation applied to the strip could make it more apparent to the user that the corresponding email has yet to be opened. The only element that has remained relatively unchained is the Compose button in the lower right hand corner, of which I removed the shadowing within and made ever-so-slightly translucent.
The tiny “I” icons next to certain emails was a new concept that I tried to implement but never fully realised. Sparrow registers the “right to left swipe on a message” gesture as a cue to bring up some email commands. My concept involved swiping from left to right on a message, which would bring up a contextual pane based on the contents of the email. For example, if it was an email from Amazon saying that my order has been dispatched, a left to right swipe on that message would reveal tracking information. If it was an email from iTunes Store saying that a new album I had pre-ordered had just been released, a left to right swipe would bring up music commands. An email from a friend with details of an upcoming event like a party, a swipe would bring up the time and date and location with the option of adding it to the Calendar app.
Original Sparrow app (left), my design (right)
The ‘Folders’ section of the app was far trickier to design. I envisioned this pane sliding out from the left hand side of the screen, leaving only a slither of the Inbox remaining to give the user a sense of their context. Using colour on this screen & still having typography remain legible became a problem. It is a problem stemming from the over-use of an app’s primary colour palettes. The design, at this stage, became very heavy and not very easy to use or understand at first glance.
I also experimented with the way the Navigation Bar staggered icons.
Original Sparrow app (left), my design (right)
The accounts screen received the biggest makeover. The blurring and darkness this pane delivers provides a sense of context; giving a bird’s eye view of the user’s accounts so that they can tap the account they choose and a quick zooming transition plays, allowing them to get right back into their Folders. Though I still have problems with this screen even now, I feel that the use of blue in this instance is very important in catching the user’s eye and showing that it is interactive.
This is a very early prototype of the Accounts pane before I decided to drastically overhaul it. Note the button in the top right hand corner, the inconsistent title and the two shades of blue and of white to signify different layers. Without proper shadowing it fails to convey a proper sense of depth or of context and I deemed it too confusing.
Original Sparrow app (left), my design (right)
The Compose screen is very a-typical of the design principles established in iOS 7. The edge to edge nature of the design allows content like photographs to take centre stage. It is also the only pane in the app that the navigation bar and the status bar use the same colour. A subtle blue is used to highlight important information such as the recipient and the subject label.