Thursday, May 16, 2013

Rue La La 2.0

Yesterday version 2.0 of the Rue La La Android app was released as a part of Google I/O. This update was a complete rewrite by the Android team at Raizlabs (including me) over the course of two months. And while Google Wallet Instant Buy integration is getting most of the attention...

... I'm much more happy about how we transformed the look of the app to fit in seamlessly with the Android ecosystem. Before we got our hands on it, the app had been neglected for two years. It had been quickly cobbled together in the beginning, and although a lot of the 1.0 design had Android theming, it had gradually incorporated more design elements from other platforms. We threw it all out and started fresh with Holo theming.

The old registration view was clunky and square:

Now we have sign up with Google, which automatically takes care of every field except for password with just two taps:

After first logging in on the old app (no small feat - since it would forget your credentials every time), you'd be met by a jarring screen that sometimes wouldn't even load images correctly. The images looked blurry on the new high-resolution Android devices and wouldn't even fill the screen - looking horrible on tablets. Navigation couldn't make its mind up - was it the invite text in the top bar, the tab bar at the bottom (right out of iOS), or the menu button? So we replaced the navigation flow with the Action Bar, improved the image quality, and added categories to help sort through the dozens of boutiques Rue offers every day.

Wherever possible, we pushed options into the Action Bar:

And we ditched patterns that looked out of place on Android.

We stuffed in images wherever we could:

Product pages now have bigger pictures and easier ways to tell which sizes are in stock. This difference is most noticeable on tablets:

New touch-friendly features include pinch-to-zoom in products and swiping through the catalog:

We also took advantage of a lot of features on the Android platform. In addition to Rue's daily push notifications (which have vibration/sound controls), we allowed users to opt-in to notifications or calendar events for upcoming boutiques:

Sharing is also better on Android. Instead of implementing just four sharing options (email, SMS, Facebook, and Twitter) poorly, we leave it up to the Android device to tell us which apps are willing to share the best-looking outfits. The old version also had intrusive permissions such as the ability to send SMS or dial numbers directly - we took those out in favor of more friendly ways of doing the same work.

And of course, checkout is easier than ever for Google Wallet customers. Wallet users coming to Rue for the first time can get through checkout in just three taps.

To see what a modern shopping experience should look like on Android, download Rue La La 2.0 on the Google Play Store today.