Erin Essex
OnePlus_MockUp_ByAmritPalSingh.jpg

In app purchases and asset page redesign

Shutterstock’s consumer prior to this year NEVER allowed for users to pay for a single image. But now you can!
On iOS and Android devices you can now use a subscription OR pay for a single image at any time.

I also worked to change the asset detail page (the page where the image details are displayed) so that it was all on one page. Prior to this change one had to make several taps in order to see details about similar images, keywords, and artist information.

This page will dive into the details of this project further.

In app purchase and asset page redesign

OnePlus_MockUp_ByAmritPalSingh.jpg
 

Shutterstock is known for selling subscriptions to the image services but now, only on mobile apps, you can download a single image to your device. But it was at this time that we also made an important layout change that increased overall sales and activity.

The problem

Mobile users wanted an experience where they could get single assets on their device while on the go.

While working on this feature I looked at the interaction data for similar images and saw that these numbers were low. I made the hypothesis at this time that these areas were hard to find. We also found in user interviews that 1) users LOVED the similar images area and 2) it was difficult for them to find. Therefore I made the decision to see if we could also change our asset detail page to be more discover friendly.

The original path of getting to “related images” and other content was hidden behind this “(i)” button on iOS. NOT my design :)

Success measures

  • Increase in downloads

  • More time on app

  • More page views

  • More clicks and saves of related images

The solution

The design inspires one to explore and engage with the content and related content more than ever.

Products are easy to purchase with just a single tap due to it being processed by Apple pay or Google. Users love that they do not have to enter a credit card. This makes it very fast and people enjoy using the app as part of their creative workflow.

The change in layout to the asset detail page (ADP) will allow the user to discover more content and get to what they need faster.

The proposed roadmap

  • Develop UXUI for in app purchase on Android. It was at this time that I proposed optimizing the asset detail page with the idea it would create more engagement.

  • Research - Gather interviews and testing to support proposed UXUI change to asset detail page.

  • Design and implement for Android - New asset detail page and in app purchase was launched in Android.

  • Gather data - Gather interaction data on Android asset detail page changes to see if it moved the needle enough to also do on iOS.

  • If successful implement asset detail page changes into iOS as well.

 
 

Asset detail page layout optimization

Before this change the users on both Android and iOS had to search to find the similar images and details of the current asset. This made it frustrating for them in that they LOVE the similar images feature.

 
 

Documentation

When we changed the position of where the main image is on the page I knew I needed to create documentation showing how the image interactions should work.

 
 

The actual roadmap

  • Jan 2018 - In app purchase existing on iOS but had old asset detail page.

  • Summer 2018 - UXUI developed to implement in app purchase on Android. It was at this time that I proposed optimizing the asset detail page with the idea it would create more engagement.

  • Fall 2018 - Gather interviews and testing to support proposed UXUI change to asset detail page.

  • October 2018 - New asset detail page and in app purchase was launched in Android.

  • Winter 2018 - Gather interaction data on Android asset detail page changes to see if it moved the needle enough to also do on iOS.

  • December 2018 - After the success of the Android changes to asset detail page I created UXUI to put this change into our iOS build as well.

One more enhancement

In January of 2019 my iOS developer Adrian and I really wanted to change the way the content loaded in the app. Spinners everywhere = bad. So I did a quick research audit on what we did for loading states at Shutterstock for web and then compared it to other sites and apps. We came up with a proposed solution to page loads that uses the popular “shimmer” effect.

 
The shimmer loading state.

The shimmer loading state.

This is how the shimmer appears in context of the page.

After the user opts to download the image there is only one more tap to complete the purchase. The money is processed via Apple or Google with the user’s card they already have on file.

 

The result

Highlights:

  • A lot of one time buyers

  • Single image option pricing drives more repeat purchases

  • New page layout lead to +40% increase in sales

  • New page layout lead to +240% increase in interactions with “similar image” area

  • New page layout lead to and increase of 7% time on app

Android build launched in the beginning of October 2018.
iOS build launched in February 2019.