Erin Essex
iPhone X_MockUp2.jpg

Inspirational homepage

I took the opportunity to explore what a light but impactful visual change might look like for the Shutterstock consumer app home page.

This page will detail how I would suggest we avoid the need for a CMS and use perhaps ready made parallax components to build this visual hero and search bar for our app homepage.

This feature is not in the app currently but on the roadmap for 2019.

Inspirational homepage for Shutterstock consumer apps

iPhone X_MockUp2.jpg
 

Shutterstock has an amazing customer app experience but the homepage felt a little lack luster.

The problem

User that frequent the app might not find the homepage very inspirational. This is due to it feeling a bit stale because the collections don’t update that frequently. Its also known that “search” is the top area of the app that people want to go to.

The “before” look of the home page on iOS

The “before” look of the home page on iOS

Goals

  • More engagement with homepage

  • Source of inspiration for users when they open the app

  • Create a more polished brand appearance on the app

The solution

I wanted to propose a solution that would NOT require the need to build a CMS to load in the background images. They way I thought we could do this is:

  • Have about 10 images ready to go on rotation

  • Rotate images on every 3rd app load

The search bar also needed to not increase scope. How I proposed we do this is that the search bar on the home screen simply launches into the existing search page, with the keyboard open. This then creates no extra build time and no redundancy.

 
Home function documentation.png
 
 

Lastly I wanted the scrolling on the home page to have a fun parallax effect, creating a fun engagement with the top photo. Here the photo will zoom in and blur before disappearing behind the top of the screen.

The search bar itself will start to scroll up and then stick to the top of the page allowing the user to engage with the search at any time on the homepage.

 
Detail of how the parallax will work while a user scrolls.

Detail of how the parallax will work while a user scrolls.

 

The interaction you saw above was prototyped in Adobe Premier. I thought it was crucial to build out this animation so that everyone on my team could better understand the vision I had for this feature.

Using Adobe Premiere for prototyping the parallax effect.

Using Adobe Premiere for prototyping the parallax effect.

 
iPhone-X-Mockup.jpg
 

Im excited that we will be integrating these changes in 2019.