Redesign Challenge (3/52):
Hangouts for iPhone
Quick note regarding the challenge format: You may have noticed this was not posted Sunday night. Due to my night owl nature and generally busy weekdays, and because publishing at midnight on Sunday is a bit silly, I’m tweaking the deadline of the challenge slightly. The design portion of the redesign must still be finished before midnight on Sunday, but the write-up will be published Wednesday between 12 noon and 1 PM EST.
Like Dropbox, Google Hangouts is something that I use every day, both at work and at home, with Hangouts for iPhone being one of my favourite apps. Recently, however, Google has been on an updating spree, aligning their iOS apps more closely with their Material Design guidelines. Inbox is a new app, rather than a redesign, but it got the full Material treatment on launch, complete with a navigation bar styled to look like an Android app bar, a floating action button, Android Lollipop-esque switches, and everything else to make it feel at home on Android. Existing apps such as Chrome, Maps, Docs, Sheets, and others have also been given a Material update, to varying degrees, with Gmail being a notable exception.
I can’t say I fully agree with this approach, but I can see why it would make sense from Google’s perspective. It means the navigation structure can be designed once and re-used on both Android and iOS. It means assets can be re-used after export. But perhaps most importantly for the company, it means that someone could switch to an Android phone from an iPhone and they’d already be familiar with some Android design patterns.
Whatever the primary reason, there was an update for Hangouts, too. Judging by the 2.5 version number, I have to guess that this was an in-between update before the app goes full-blown Material. Currently, besides the height of the navigation bar, some colour changes, and icon changes, the app has stayed mostly the same. Below, you can see the changes to the iPhone app going from version 2.0 to 2.5, and the equivalent Android version 2.5.
Look and Feel
In my previous two design challenges, I focused primarily on improving Navigation Structure, while maintaining the existing brand’s look and feel. Rethinking navigation and IA is a fairly involved process, however, so I’ll be saving those types of challenges for weeks when I’m less busy and can put the time required towards it, while redesigning simple apps or focusing on look and feel during busier weeks. Hangouts already has a good navigation structure, so it was a perfect candidate for a visual update.
In my introduction to this challenge I stated that the original branding must stay more or less intact. The difficulty when applying this to Hangouts is that it doesn’t exactly have its own brand, particularly since Hangouts uses slightly different shades of green, slightly different icons, etc. for each of the platforms it appears on. With that in mind, I wanted to come up with a visual style for Hangouts that could fit in with Google’s branding, and could potentially expand across other platforms.
Since the beauty of a redesign is the lack of restrictions, and because I prefer to respect platform conventions where possible, I chose to approach this challenge from a parallel universe. One in which Google has implemented Material design on Android, but keeps their iOS apps in-line with Apple’s Human Interface Guidelines and a visual style compatible with Material.
The look and feel that I ended up using is very much iOS-style, with a standard-sized navigation bar, a standard-sized and labelled tab bar, and Helvetica Neue with a minimum font size of 12pt. However, I chose to add back some of the affordances that aren’t seen as often in iOS 7+, using subtle shadows under the nav bar, tab bar, sticky section headers, and chat bubbles. The goal was to mirror Google’s Material design just slightly, adding some physical feel to the UI without going overboard, and still feeling right at home on iOS 7 and 8. Although I liked the simplicity of version 2.0 of Hangouts, the bold use of colour was also done to pair nicely with Material design and Google’s overall visual style, and the colour itself was taken from the Hangouts icon.
Navigation
Although the navigation structure stayed essentially the same, there were a few minor changes I made to improve usability. I decided to add labels back to the tab bar after they were removed in the latest version. The icons are as straightforward as icons can get, but Hangouts (and pretty much any video chat app) gets used by people of all ages and backgrounds, so it can’t hurt to make the interface as obvious and usable as possible. I also find the black-on-green style of the current Hangouts navigation bar to be very low in contrast, so I used a white status bar, icons, and text for increased legibility.
I chose to group all account-switching and settings-related activities in an avatar icon in the top-left of the navigation bar, rather than centered, to allow enough real estate to include the section title. This does hide the quick account switcher that (sometimes) shows up in the top-left of the current app, but given that my avatar is the same for both my work and personal accounts, I never found it that useful. Plus, notifications from another account still allow for quick-switching.
Contacts List
The Contacts screen was by far the most simple, essentially consisting of a list of names and avatars with some extra metadata, but I chose to redesign it because one of the main things I wanted to address while working on this redesign was consistency. In the current Hangouts app, Contacts, Conversations, and Calls all have different table cell styles. I consolidated these styles into one type of cell with a consistent avatar size and typography. The cell has variations for new messages, group conversations, invitations, etc. but the basics always remain the same. While I didn’t have time to mock-up the Calls screen, it would be trivial to make it match the same cell style. Apart from this, the Contacts screen also shows the sticky section headers, and the search bar has been moved directly into the navigation bar. This allows additional screen real-estate to be used for the list, and enables the user to search at any time in the Contacts section, without having to scroll to the top of the list.
Conversations List
The Conversations list is very similar to the existing app. The main changes were minor tweaks to icon placement, typography, colours and overall consistency. Mute and Favourite icons are now right-aligned to allow for easy scanning of the Conversations list, the same green used for the navigation bar and tabs is now used as the online indicator and accent colour, and new messages are indicated by making the sender and the preview bold. Some of these changes are things that Hangouts already does on other platforms, and my goal was to consolidate the best ideas from those implementations. I also chose to limit the conversation preview to a single line, because in my own experience the preview rarely reaches two lines, and even when it does, the full preview is generally not necessary. This allows for smaller table cells to view more conversations at once, and facilitates the cell consistency between the Contacts, Conversations, and Calls lists.
Conversation
The last screen I had time to design, and the most obvious visual change, was the Conversation screen. This screen remained unchanged when Hangouts updated to version 2.5, leaving the light green chat bubbles inconsistent and overpowered by the heavy green navigation bar. I chose to use the same green for the outgoing chat bubbles to help lead the user’s eye down through the conversation, while remaining visually consistent with the rest of the app. The higher contrast chat bubbles can also be seen in Apple’s own Messages and Facebook’s Messenger apps, something I’ve become used to and prefer as a result. The chat bubble style also draws influence from Messenger in another way. While the chat bubbles remain very similar in shape to the existing Hangouts app, the corners of adjacent chat bubbles are less rounded, to help lead the eye and feel more like a group.
A few other changes include the time of each message being removed from the chat bubble and placed on the background instead to reduce clutter and make reading easier, the mute conversation button — something I use a lot while working — has been moved from the additional action sheet directly into the navigation bar for easier access, and the send button only appears after beginning to type, hiding the attachments button to simplify the experience.
Conclusion
The response to my Dropbox Material redesign last week was unexpected and awesome! Thanks to everyone who recommended, tweeted, or shared it in other ways. I’m glad there’s interest in this challenge, and it will definitely be motivation to keep things up as the weeks go on. Some people mentioned that the comparisons between iOS and Android were helpful, particularly regarding navigation structure, so it’s something I’ll certainly be continuing to touch on in the future.
Hangouts for iPhone was the first redesign I’ve worked on that was primarily a change to the look and feel, but I’m sure it won’t be the last. Overall, while it was a relatively simple design, it still let me flex my creative muscles on a new design problem, and it was good to give myself a mental break from thinking about navigation structures and information architecture. As the weeks go on, there will likely be more of this type of redesign with larger challenges such as Dropbox being more intermittent.
I’ve also been asked if all my redesigns will be mobile. No! Mobile is what I’m most comfortable with, and what I’ve been focusing almost exclusively on for the past few years, but as I get more comfortable with the weekly format and with writing, I’ll be expanding to hopefully cover native Mac apps, web apps, iPad or Android tablet apps, and maybe even some wearable apps, to use my creative thinking in different ways. If you have suggestions for something you’d like to see me take a stab at designing, leave a comment or tweet me.
If you’d like to follow along, or if you’re reading this from the future and want to see what I’ve redesigned since the start of the year, I’ll be posting everything to my Weekly Redesign Challenge publication.
