API PURCHASE FLOW
Access to Shutterstock’s public API had historically been available only to enterprise level partners. In order to better serve independent developers and smaller business looking to integrate with Shutterstock’s API, my team launched the company’s first self-serve API product and purchasing flow.
PROJECT OVERVIEW
ROLE
Lead designer and researcher
DELIVERABLES
End to end purchasing experience for new API product including new Plans and Pricing page
KPIs
New traffic to Plans and Pricing page
New revenue from self-serve API product
Increase in leads for enterprise sales managers
DESIGNING A PURCHASING FLOW
Shutterstock’s Developer Portal provides information on the public API as well as developer documentation for integration. I designed a flow that would route users from Developer Portal marketing pages to a new Plans and Pricing page. From there, I worked with our Checkout team to link up existing checkout pages to save development resources and then looped users back to the Developer Portal to find information on creating their first app.
CREATING A PRICING PAGE
A major part of this project was building a Plans and Pricing page to explain the new products to users and create channels into the checkout funnel. Working continuously with Product and Content Marketing as pricing models and feature sets evolved, I iterated upon the pricing page to reach an MVP. We launched with the third option below due to time constraints but I continued to evolve the page based on user feedback.
PRICING CARDS
To distinguish between plan types, I designed a series of pricing card treatments. As pricing and packaging evolved, I worked with Product and Content Marketing to establish a clear differentiation of plans as Free, Standard (self serve), or Enterprise.
PROBLEM: User feedback showed us that they wanted to see clear feature differences between plans quickly.
SOLUTION: I introduced plan specification highlights to the cards.
POST-LAUNCH: User feedback showed that users were overwhelmed by the options and wanted clearer pricing so I highlighted total price and simplified the UI to reduce visual noise. Business priorities had also shifted to Enterprise lead generation so I re-emphasized the Enterprise card by introducing trustmark logos.
RESPONSIVE TABLE
A key part of the pricing page was a comparison matrix of the plans.
PROBLEM: The table was too large to scan on mobile devices.
SOLUTION: I designed a rotated, scrollable table of comparison cards for easy comparison of plans on a feature by feature basis. Due to time constraints, this was tabled for a later release and a list view was recommended for MVP. Other explorations are viewable below.
POST-LAUNCH ITERATIONS
After launching, we gathered user feedback to continue to iterate and improve the page. User feedback indicated that users wanted clearer pricing and business objectives pivoted to Enterprise integrations, leading to recommendations for updated pricing cards. I also refreshed the visual design to match a lighter, more buoyant visual language.
