Sparrow email app (v2)
My re-envisioning, and first ever UI / UX concept, of the once-popular email Sparrow app was a great challenge. I tried to balance cross referencing the original app’s colour scheme with a new design that was far less cluttered and put a greater focus on content - but ran into issues with type legibility as a direct result of an over-reliance on different shades of blue. With this, my second attempt, I wanted to strip away unneeded colour and focus on a more controlled colour palette. Clean, logically placed text and a very small subset of icons. The result is a more concise design that use colours sparingly to highlight and guide the user’s attention as opposed to it being an overbearing fundamental design element. I am rather proud of what I’ve been able to achieve this time around.
Originally posted: 19/7/2014.
The biggest change in the Inbox pane comes in the form of moving the compose button to the top right hand of the screen. It was a design decision that I felt was necessary - despite it being easier to press whilst using the iPhone one-handed, moving it to the top & having the overall look take on a whiter and brighter look, it still stood out and allowed the email content to take greater priority. I reduced the size of the contact pictures, also allowing for more of the email content to be shown at any one time. My aim was for colour to be used sparingly here, only for the compose button and for contextual timestamps. As a result, I believe that the colour heaviness of the last concept I created has been eradicated and in its place is a design that feels minimalist yet just as powerful as it’s ever been.
The quick-response gesture shortcuts Sparrow is known for (swiping right to left on any message) is intact and hasn’t received any further changes from my last concept.
Tapping the Menu icon in the upper left hand corner brings out the Folders/Labels pane, which quickly and elegantly slides out from the left hand side of the display. I decided on a dark grey colour scheme for this pane as it isn’t too distracting or difficult to understand. I was very conscious of making sure that the Edit function doesn’t look like a typical button; instead I allowed it to blend in seamlessly into the Label bar and only used minor shadowing to make it stand out.
For the Accounts pane, I didn’t want for the user to have to pull back another layer to reveal their other accounts; instead, it made more sense to make it blend seamlessly into their Labels pane. A press of the downward-facing arrowhead sees the toolbar retract downward and for the account icons to smoothly (with a slight physical bounce) glide in from the top of the screen. Putting an emphasis on an Account photograph as opposed to the email address allows for a greater sense of personalisation. It allows for a greater sense of variety that text alone cannot provide.
I didn’t want to change the Compose pane too much from my previous concept as I felt that it was already what I envisioned. ‘Send’ is now bolder than it was before. Users can attach photo and video directly from this screen by double tapping on the text field and selecting ‘Insert Photo or Video’.
With this concept, I also wanted to introduce something I felt I had missed from my first: how a message thread would look. Colour on this pane is used sparingly to highlight only the most important information and actions. The bar at the bottom retracts when scrolling through a message & detects it isn’t needed; a tap at the bottom of the screen brings it back, as does scrolling back up. It was important to put the controls here for power users of the app.