Inside: Rue La La for Android

Written by Android Developer Alex Wang, we take a look at our revamped Android app for Rue La La, built entirely from the ground up.

On Wednesday, version 2.0 of the Rue La La Android app was released as part of Google I/O. This update was a complete rewrite of the app from the ground up by the Android team at Raizlabs over the course of two months. Design and navigation for the app are the result of close collaboration between Rue La La and Raizlabs. And while Google Wallet Instant Buy integration is getting most of the attention from the announcement made at Google I/O…

…We’re extremely happy about how we transformed the look of the app to fit in seamlessly with the Android ecosystem. Before the Android team got their hands on it, the app had been untouched for two years. In the beginning the app was made under greater time constraints, 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:

rue2_1 rue2_2 rue2_3

After first logging in on the old app (which required users to sign-in each time), you’d be met by a boutique screen that sometimes wouldn’t load images correctly. The images looked blurry on new high-resolution Android devices and didn’t fill the screen – an inadequate view for tablets. Navigation looked a bit disorganized – do users tap the invite text in the top bar, the tab bar at the bottom, 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.

rue3_1 rue3_2rue4_1 rue4_2

Whenever possible, we pushed options into the Action Bar:

rue5_1 rue5_2

Additionally, we replaced patterns that looked out of place on Android.

rue6_1 rue6_2

We replaced blocks of text with images wherever possible:

rue7_1 rue7_2

Product pages now include larger photos and easier ways to tell which sizes are in stock. This difference is most noticeable on tablets:

rue8_1 rue8_2

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

rue9

The Android team further 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:

rue10_1 rue10_2

Sharing is also significantly better on Android. Instead of implementing just four sharing options (email, SMS, Facebook, and Twitter), 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.

rue11_1 rue11_2

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.

rue12_1 rue12_2

To see what a modern, innovative shopping experience looks like on Android, download Rue La La 2.0 on the Google Play Store today. Be sure to follow us on Twitter and Facebook for all the latest updates in mobile.