Back to Venmo.Com

Redesigning Venmo for iOS 7

· by Chris Maddern

We’ve launched a new version of Venmo, totally redesigned for iOS 7. You can download it on the App Store.

Yesterday welcomed iOS 7 onto our iPhones and brought with it a radically new flat-styled UI. The Apple design guidelines for the new OS emphasize consistency & clarity while deferring to content. This resonates nicely with Venmo’s first design principle:

The design is not the star of Venmo; the content is. People come to Venmo because they want to interact with people. The design should be clear, but should stay out of the way.

When thinking about Venmo for iOS 7, we identified some key considerations and trade-offs in designing software: branding & platform consistency, speed & performance, visual flashiness vs. visual simplicity, maximizing content visibility & layout clarity. Our engineering team, along with our co-founder and design lead spent a lot of time thinking about how to provide an experience that followed closely iOS 7’s new design direction while keeping the familiarity and trust of the Venmo brand (read more detail on our interpretation of Apple’s iOS 7 Design Guidelines).

Whatever tradeoffs we made, we knew we had to be able to build it in 2 months so we could release our iOS7 version the day iOS 7 hit the App Store.

Branding & Platform Consistency

Payments inherently require a high degree of trust and the Venmo brand is one way that our users have come to know and trust us with their money. We knew that it was important that while it felt perfectly at home on iOS 7, our new design remained familiar and encouraged the trust and comfortability that users have grown with Venmo. On top of this, we wanted to introduce the intuitiveness of native gestures and design elements from iOS 7.

Our brand is reinforced by Venmo blue consistently throughout the app, and we use white as our primary color everywhere else to keep it feeling fluid and fast. We switched to button-less action items on navigation bars, and redesigned our icon set for iOS 7. New iOS 7 elements such as the swipe-to-go-back gesture and the new clearer system fonts are also used across the app.

Venmo Blue Venmo's consistent blue navigation bar

Visual Flashiness vs. Visual Simplicity

Venmo is about your friends, the things you do together and the payments you make with each other. We let user content shine by keeping our visual design plain & simple. Our color choices (blue, whites, and grays) are also minimal in order to maximize visual simplicity.

To agree with iOS 7’s flat styling we removed excessive visual details such as button gloss and shadows. While we kept most of our familiar icons, we redesigned a few key pieces of iconography to provide much simpler representations -- most notably the user, compose payment, & audience icons. They include much less visual detail, fit better with iOS 7 and are immediately identifiable by users. We also leverage the consistent representations used by Facebook, Twitter, and some native iOS 7 apps.

Venmo Icons Part of the Venmo iOS 7 icon set

Maximizing Content Visibility & Layout Clarity

iOS 7 brought larger content areas with less margins, gutters & chrome. In some places, we take advantage of all available space, and in others, we use negative space to clearly define content regions and increase clarity.

Our home screen payment feed uses all available space in order to give users as much information as possible, minimizing scroll. You can also view more information without having to tap into stories (eg: who likes a payment).

Everywhere else, we use large margins and white space to keep the app feeling spacious, which allows a user to quickly find and focus.

Speed & Performance

Visual appearance is important, but a great deal of the perceived quality of the experience with an app is driven by performance. Snappy reactions to input along with consistent indicators for loading and progress help the user to feel that they’re achieving progress toward their goal and sets expectations around how long they will be waiting, when waits can’t be avoided.

We spent a great deal of time improving server response times for faster loading, as well as improving the speed at which images load and the feed scrolls (typically achieving 60 fps on modern devices). All of these performance improvements contribute to an app that feels smoother and lets users achieve their goals more quickly.

We're really excited with the design direction in Venmo for iOS 7, but this is just the beginning. Over the coming months, we have dozens of changes planned to make Venmo faster, easier to use and more fun.

Enjoy - let us know what you think in the comments!