Android First
Process and Lessons Learned in Building Our App
This post is adapted from a talk that Aaron and I gave on July 30 at the E-Commerce Demo Night at Huge.
When it was time to make our native app back in March, we looked to Android. Why? First and foremost, we’re a small team of 7 and have limited resources. With many features yet to build and two veteran Android developers in-house, it made sense time-wise. Second, we looked at the market – many of the apps we use daily, such as Sunrise,Day One and Currency, are iOS-only. Others who had attempted to make an Android version of an app simply fell short on visual design and performance.
Take Gilt as an example: their iPad app is fast and smooth. On the Android front, however, the scrolling is sluggish and the overall experience is weak compared to the iOS counterpart. After seeing a number of other Gilt-like cases that fell short on the Android platform, we wondered if other apps’ misses had created a chance for us to shine.
Part I. Process
- Get to know the guidelines
Android has published an incredibly useful design guideline for novice designers like me. The guideline outlines the platform’s design principles, vision and UI overview, and provides a quick glance at the interactions on the platform. Did I mention all the downloadable resources like the stencils, color palettes and icon packs?
In particular, we focused on these 3 things in the guideline:
We needed a layout that not only worked but looked good on all screen sizes. Responsive design, y’all!
Our customers love our photos, and Android encourages the use of big, beautiful, vivid images. Done and done.
While iOS has loose standards for core navigation placement in the app, Android is rather rigid in reinforcing the “navigation items to the left, actions to the right” on the action bar approach. We noticed that most Android bars span across the entire width of the app — was there a better way to design the action bar such that it not only met the standard, but also pushed the boundaries?
2. Inspirations
We looked all over the place for inspirations: iOS apps, Android apps, websites and magazines. These are a few that we especially look up to:
Wantful is a personalized gifting and shopping site, and they created an amazing iPad app. It combines photography and writing into one coherent, immersive storytelling experience. As we scroll down the story page, the navigations are hidden and the background photo is blurred and darkened so that the text becomes the center of focus. Note how elegantly the progress dots indicate how far along you are in the current section of the story!
We can’t help but admire how Expedia created two distinct and well-executed experiences for Android tablets and phones. On tablets, gorgeous photography (similar to Wantful) stimulates such pleasure while we’re entering information on the foreground. On mobile phones, compact modules of photo and pricing information urge us to keep scrolling, tapping and searching for our perfect getaway. Designed to be used at different times of the day, Expedia’s Android apps give us what we want when we don’t even realize we want it.
We of course look up to the ones who do e-commerce the best. Zappos’ Android tablet app is nothing short of extraordinary when it comes to the checkout experience. Big tappable buttons, clear indications of which step we are on and consistent call-to-actions across the app make purchasing from the app seamless and delightful.
Part II. Get it done
We went to work with all the good ideas, and… came up with this.
And… it sucked. Too much empty space on the screen that wasn’t taken advantage of, and the “action bar” confused navigations with overflown actions. We weren’t happy, and neither were our users who came to see the mocks during research sessions in our office. So, we wiped our tears, revisited the guidelines and mocked up the revisions.
Ta-da! Our final homescreen. The photos are as big as they could ever be, and we split the action bar, so not only the navigations and overflown actions are more distinct from each other, the space in the middle is also spared to allow more of each photo to shine through. Vertical progress dots indicate the direction of scroll in the app, so our users know how to use the app right away.
Once you’re in the story, progress dots turn into section jumps while the action bar stays the same. Scroll up and down to read the story, and as the text ends, a full-screen photo reveals itself.
Toggling to the “All Product” view, we again made the photo do the talking: a minimal color bar indicating the products that are currently on sale, and compact product photos maximizing the visual impact.
Buying is even simpler. We implemented the option to add products to cart directly on the home screen, and the borrowed the “card” designs from Zappos (shamelessly) during the checkout. On top of that, Google Wallet made our new customers feel much more comfortable in purchasing from us.
For smaller screens, we scaled the buttons so they are easy to tap and tweaked the transparency of the action bar to make sure the text is readable against the photos.
For portrait view, we came up with a slight different design solution: a quickly accessible gallery on top, followed by our content with the same section jumps.
Part III. Lesson learned
We launched our app two months ago and have since been humbled by the responses from our customers, the Android community and new friends we met via the app. It’s an honor to be selected as part of the Beautiful Design collection by the Android Design Team, alongside many of our inspirations, such as Pinterest, Flipboard and The New York Times. How did we get here? We think we’ve probably done these three things right:
- Steal. Take what’s been done right, so less time is spent on reinventing the wheel. This is not to say that you can’t, but for a small team like us, it wouldn’t be worth it.
- Break the rules, sometimes. But learn them first.
- Stand out. Figure out a way to make the biggest impact.
As we continue to make our app better, we’d love to hear from you (email kuan [at] grandst [dot] com). And for our iOS friends? Yes, there will be an iOS app, and stay tuned by subscribing to our blog.
