In 2015, there were discussions on how Etsy could express more of the brand into their products. Previously, Etsy’s brand and experience remained static for quite some time and there was an opportunity that it could be so much more. Great customer experience is all about creating a cohesive experience and telling a good story. One powerful storytelling technique is through motion.
The framework
Rachel Nash (product designer), Dennis Kramer (product designer), and I formed a working group to explore what motion is at Etsy and the implications motion can have on the customer experience. Thinking in motion offered us an amazing dimension to explore and work to show how the brand and product are.
We were inspired by the “12 Animation Principles” set by Disney animators Ollie Johnston and Frank Thomas in their 1981 book “The Illusion of Life: Disney Animation” and Google Material Design to get an understanding of where to start.
Usually, designers design separate screens and are not used to thinking about the transitions between the states of the experience. Also, how the elements are going to move, usually thinking “it’s just a cool thing to add if we have time”, which makes the experience often feel dissociated. We realized that thinking about how the elements are going to move and react to the user interaction is a must from the beginning.
The design
I worked on exploring how drop downs and navigation works in the user interface and led discussions on best practices for this animation.
Understanding the usage contexts of the app helped the team develop a clear vision of the tonal expectations of our customers. To communicate the vision of motion, we developed a set of experience principles. These were used to sense‐check design decisions, articulate core values and describe key attributes. The principles were used constantly to drive the aesthetic, feel and overall tonal direction of the app.
As we have standard fonts, colors, or icons when we design, we should follow the same standards for how the objects are going to move in the app or on the web; consistency is important. If a loading screens moves up after loading, all loading screens should do the same.
Animation is to complete the “illusion” and provide meaning. However, like user experience, it’s all about teamwork and every member should be engaged in this process from day one in a project.
Role: Design, development
Team: Rachel Nash (product designer), Dennis Kramer (product designer), Kyle Turman (product designer), Kate Matsumoto (product designer), Rachel Hsiung (product designer), Allie Jones (engineer), Matthew Heigl (brand designer), Susi Vetter (brand designer), Morgan Edgerton (product designer), and Alia Ormut-Fleischman (product designer)