Android & Design at Etsy

A few weeks ago my colleague Paul Lau and I gave a talk at the NYC Android Meetup. We wanted to share our Android teams product development process at Etsy. How we collaborate as designers and developers to be effective at product development while experimenting and pushing our app UX as much as we can.

Our teams process is broken down into three parts each of which involve multiple iterations:

  • Ideas - Here we’re creating designs and soliciting feedback from as many stakeholders as possible. Each screen is designed for 5 inch phones plus 7 and 10 inch tablets. Designers explore variations of each screen.
  • Implementation- Build it quick and iterate. Get your designers eyes on it as soon as possible. Developers make the UI code flexible as it will likely change.
  • Shipping- Freeze feature changes. Designers run through visual quality assurance (VQA). Iterate and make it great!

We included a few recent examples of screens we put together in the Etsy app and the some challenges we faced. Plus we added some implementation tips and tricks that help us stay flexible when building our UI layer. You can check out the slides from the talk below.

 

Etsy – Android & Design
0 fans of this post

Beautiful Android Design

Android Beautiful Design

I’m super excited and very honored that Google recently placed our latest Etsy Android app on a very short list of the best Android apps released this season.

You can read more over on the Android Developers blog and if you haven’t yet been shopping on the new Etsy for Android app on your tablet or phone, this might be just the reminder you need.

 

 

0 fans of this post

Etsy Android Staggered Grid

Last week at Etsy we open sourced the staggered grid view from the new Etsy Android app. Somewhat surprisingly there’s been a large amount of interest from the Android community. I guess I shouldn’t be surprised. Whilst working on various apps I’ve found it challenging to implement advanced UI elements such as the staggered or masonry grid.

Thankfully I had the opportunity during a recent project at Etsy to implement this grid view that would support advanced features such as rows of varying heights & syncing row positions across orientation changes. Before deciding to develop the grid, we did of course evaluate existing options available including the unfinished StaggeredGridView in the AOSP source. In the end we came to the conclusion that if we were going to build something stable, reliable and performant it was a necessity to understand the entire scope of how the grid functioned and to achieve that we decided to develop a new component.

I’m quite happy with the results. The grid was developed over the course of two weeks. During the project we tested the grid on a number of devices available in our awesome Etsy Device Lab. We also found and fixed a couple of issues with the grid post launch using live crash logs.

Finally after open sourcing the grid, we’ve promoted release artifacts for the initial version to Maven Central, and will maintain releases here ongoing. So now it’s a simple one-liner to add the AndroidStaggeredGrid to your project. Big thanks here go to Chris Banes for his helpful Gradle plugin for uploading Android Artifacts to Maven.

You can find out more, how the grid is used and also run the sample app over on the Etsy Github - https://github.com/etsy/AndroidStaggeredGrid

5 Big Fans

It’s all in the details

All-New Etsy for Android

I am extremely excited and proud of the newly revamped and completely redesigned Etsy Android app which we rolled out to the public over the weekend.

After joining Etsy earlier this year our team set out on a project to bring the best of Android to the Etsy app. This included designing and building an app that was not only beautiful across multiple form factors, from phones to 7 & 10 inch tablets, but also included optimized screens for each.

Along the way we tackled some interesting development challenges, like building a custom non-standard grid view to support our staggered list (see the trending list below), and developing multiple common components to accelerate our Android processes through reuse. We also added animations and visual effects like blur broadly across the app to create a richer more engaging app experience. Not to mention a totally new navigation system, a new activity feed, new browse categories, new shop info pages and a dual-pane tablet optimized conversations manager.

** Side note: if any of the above sounds interesting to you then you should know that we’re hiring - https://www.etsy.com/careers

Tablet View

Throughout the whole project our goal for version 2 was to enable more Android users to connect to the amazing and diverse sellers that are making unique items on Etsy.

I hope that you all enjoy using this latest iteration of the Etsy for Android app as much as I did working on it. You can read more over on the Etsy News blog announcing the release.

If you haven’t tried Etsy for Android on your tablet or phone just head to the Google Play store to download the app.

 

0 fans of this post