Navigation Redesign

As Shuttertstock grew into a publicly-traded 600MM eCommerce business, we rapidly added new products and services.

Consequently, the design of the navigation needed refactoring to reflect the companies broader products/services, and global scale. 

​
PROJECT GOALS 
​​
✅  Multi-Product Line Navigation​
✅  SEO Optimized​
✅  Accessible, Mobile, Global

Design 
Inspiration 🌟 

Navigation is grounded in usability - but it's also a common first-impression for a company. Think of Airbnb, Kayak, and Zillow - each have a visually-impressive navigation. All to build trust with your users.

To help stretch our brand and ground the design from a forward-looking lens, we started out experimenting with creative concepts, pushing our brand positioning, tone and colors to reinforce our market leadership. 

KEY DELIVERABLES

• Energetic Visual Identity 
• Addition of Dark Mode 
• Color Contrast for Accessibility​

Navigation Architecture

Our users didn’t want to think as they browse. Our design focused on making the users experience efficiency - by designing a navigational structure with clear headlines, easy to scan secondary menus and findable support and subscription information. 

NAVIGATION ELEMENTS

UX Writing  with clear and concise labeling allowed for most of the top level menu labels to single word. 

Design allowed for clear translation in 25 languages and supported SEO. 

• Photos
• Footage
• Music
• Search Bar
• Advanced Search
• Cart
• Free Trial
• Notifications
• Profile

SCALING CONSIDERATIONS

To ensure the navigation would account for growth, we included strategic roadmaps additions into our design process. 

• Live Chat 
• Profile
• Enterprise Toggle
• Collections - direct link
• Global Cart - drawer or direct
• Promotions/Upsell

Mobile 
Navigation 📱

An early design decision in this project was to start UI Design exploration mobile-first. Doing so would allow for more focused prioritization of navigation elements.

​We started by taking the information architecture lists constructed earlier, using those as “back-bone” for the mobile navigation. When fused with our initial creative inspiration, the design landed in an efficient and aspirational experience.

Design Requirements

​​•  Scales for 25 languages
​​•  Fully-Accessibility 
​​•  Optimized for SEO

Desktop Header & Footer  🖥️ 

​

---

An efficient search option is crucial to a successful experience for Shutterstock users on the site.  A clean navigation is helpful for sites who have a large product inventory. The products can be loaded faster, and the customers can easily move towards the end of the sales funnel. 
​
The overall look and feel sough to capture our leadership in the creative technology market place. Fast Search. Great Content. Lots of Tools. It prioritized efficiency for the user - and the sleek UI also captured our brand positioning.

Designing for Scale - vertical navigation concept

We also experimented with a centered layout for the product lines - as well as a vertical navigation pattern used by eCommerce giants like Amazon and Home Depot. These design decisions would help drive upcoming user testing...

User Feedback 👨🏽‍💻

We constructed a Usability Lab at the office and proceeded to conduct extensive user testing. 

​Our power users informed us that the new experience would immediately expedite their creative workflow, bringing greater value to the Shutterstock business. 

During testing, users tended to shift towards the logo when looking for the products (photos, footage, music, ect.,).

Moving the navigation from the center-to-the-left was an update to the design that helped both comprehension and usability. 

LEARNINGS

- Left align navigational elements
- Labeling &iconography improvements

Launch 🚀

In collaboration with our product and engineering partners, we worked to build a brand and UI updates roadmap. This started with testing and launching the new navigation with a percentage of our traffic. 

The first series of tests maintained - and in some cases - increased core KPIs. From there, the new navigation updates were released across the platform.

​Today, the brand and global navigation updates are in-market and supporting millions of creative story tellers each day. 


BUSINESS RESULTS 📈

• Increased traffic to Pricing Page
• Increased Sign Up/Account Creation
• Scaled design for global and mobile

Back to the homepage