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.

Left: Current Hangouts for iPhone, Right: Redesigned Hangouts

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.

Hangouts for iPhone redesign. Left: Contacts, Right: Conversations 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.

Hangouts for iPhone redesign, Conversation

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.