NAVIGATION REDESIGN

As Shuttertstock grew into a publicly-traded 600MM eCommerce business, it rapidly added new products and services. Consequently, the design of the navigation needed refactoring to reflect the broader offerings on the marketplace.

Additionally, we sought to refresh a few key brand and design elements - both to reflect our creative market leadership, as well as allow for the navigation to scale for continued global growth. 

As the VP of Design, I spearheaded a multidisciplinary team to concept, design, test and rollout a new global navigation for the company. 
​

PROJECT GOALS ✅
​​

• Multi-Product Line Navigation​
• Creative Market Leadership​
• Accessible, Mobile, Global

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. 

DELIVERABLES

• Addition of Dark Mode Palette 
• Color contrast for accessibility
• Vibrant, Market Leadership! 

INFORMATION ARCHITECTURE 🔍

Your users don’t want to think as they browse. Make their journey smoother by designing a header that is tailor-made to their wants and needs. It should be simple, clear, and most importantly, attractive to your visitors.

NAVIGATION ELEMENTS

The top-level e-commerce navigation plays a decisive role in conversions. You don’t need to confuse the users here. 

Most of the top level menu labels are simple and comprises of a single word. It is a minimalistic design that offers less scope for any distractions.

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

SCALING CONSIDERATIONS

When designing a navigation, it's important to account for how the navigation can scale over team. 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.

DESKTOP NAVIGATION  🖥️ 

​

---

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.

DESIGN 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

• Increased Usability
• Cohesive Experience
• Left align the main header

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. 


PROJECT RESULTS
​

• Multi-Product Line Navigation​
• Improved Usability
• Creative Market Leadership
• Accessible; Mobile, Global

Back to the homepage