circly-logo-01.png
 

PRODUCT OVERVIEW

Circly is a multi-platform messenger client that acts similarly to WhatsApp or Kik but has a web interface to complement the mobile client. The idea behind the service isn't to bombard users with information, but rather provide an OS agnostic point of contact that is provided through email, Android, iOS, or web application.  

The project was completed as part of a design activity to create consistency between a mobile and web interface. The previous version of the mobile app suffered from disjointed user flows that made interacting with messages and communicating with friends feel clumsy. 

SKETCHES

As I began the reviewing the chat client, I found I was frequently running into the same errors.

I kept interpreting the “Settings” button as a “Menu” button that is fairly pervasive in iOS apps, for example Path. So, I decided to sketch out the app's flows to help me better under- stand the design and development decisions that went into the current Beta release. 

Sketching Process

HIGH FIDELITY WIREFRAMES

My overall goal was to redesign the iOS app to reflect the changes that are being worked on for the next iteration of the chat web client.

I replaced the “Settings” button with my photo. A photo is a better indicator of “Profile” or “Settings” than the hamburger icon because it is an ambiguous representation of “Menu”.

Once the photo is tapped, the icon changes to an arrow that can be tapped to return to the main screen, or a gestural swipe to the left will release the menu and return to the main screen.

I broke the hidden menu into 6 different areas: Profile, Search, Notifications, Groups, Invite, and Settings. I noticed when examining both the web and iOS app that there were different features for different platforms. In iOS, you’re able to Invite friends but the web client cannot. Alternatively, Notifications and Groups are features for the web client that are not replicated in the iOS app. I thought moving these features behind a photo would be a nice, clean, and elegant way to interact with the mobile app. In addition, I also foresee “Groups” as a way to filter content.

The 3rd screen indicates a key feature that is not in the current app. As it stands there is no way to delete a conversation. I can “Forward”, “Copy Text”, “Send via Email”, or “Copy First Link” but cannot Delete the conversation.

In addition, I added a Twitterific type image preview to the home page. Clicking on the preview makes it full size, which can also be done from the detailed page.

Profile & Settings 

Swipe to Forward | Favorite | Delete

JUST IN TIME INTERACTION

This series of images reflects the changes to the jarring interaction that the app currently has. Currently, the app uses more of a “posting” message style rather than a conversational style. What I mean by this is that the user is removed entirely from the conversation when creating a message. This works for Twitter, Pinterest, Path, or Foursquare because posting is a different interaction than the one the app uses. The app is more along the lines of Mail, iMessages, or AOL Instant Messenger where the user wants to be continuously a part of the conversation and not removed.

The other problem I tried to solve here was that there is no keyboard down option. What I mean by this is that if I wanted to see the full conversation, which most of your users will want to do, there is no option to lower the keyboard. In fact, a fairly common gesture of swiping down the keyboard did not work. So, I resolved this issue by applying a thoughtful design solution for Just In Time Interactions that Luke W. implemented for his poling app, Polar. A keyboard replaces an icon, in this case my profile photo, when the keyboard is launched.