FORMLABS

Navigation Redesign 

October 2018
Overview

I was tasked with redesigning the navigation structure of the Formlabs website. The navigation of the website was initially designed in 2014, when we had only one product offering. Today, this has changed to multiple product offerings, several accessories, and our use cases have diversified greatly. Users could no longer be served a generic experience, and we needed to  cater more specifically to their needs and applications.
Responsibilities

- User Experience
- Design Strategy
- Product Strategy
- Visual Design





Process

By working closely with the Growth and Product teams, I was able to better understand user behavior on our site and design for it.

Our goal was twofold:  
  • make existing content more accesible; and 
  • create a system that accomodates future product launches and content fluidly into the site structure. 



Existing Product dropdown
Existing Learn Dropdown



Problems


  • The existing navigation did not represent the full library of materials, and instead included the major categories within the Form 2 tab
  • The Learn tab was incredibly dense and included links that were known to convert badly
  • The links to industry pages were under Learn, which made them far less discoverable
  • The mobile version did not display the Materials pages under the Form 2 tab
  • Case studies, which are known to perform well, were not discoverable



Key Pages


We identified value in efficiently moving users through certain key pages.

Product Pages
These pages contain essential knowledge regarding the printers and accesories. 

Industry Pages
These pages contain overviews of how our product impacts and improves the relevant industry. They also contain case studies, user stories, and applications.

Material Pages
These pages contain detailed information about our material range, which is a consumable that is sold along with the printer. They contain information regarding material applications, technical data, and print demos.


The sitemap reveals that the Industries tab has a lot of depth. Each industry page contains case-studies, guides, and applications.



The Formlabs Funnel


By studying the ways in which users move through our website (and how we want them to move through it), we uncovered points of friction which could easily be eliminated in the new design.

This flow shows how users can either take an ‘industry first’ or ‘product first’ approach to browsing the website. Organic visitors tend to take the ‘product first’ approach.






Low-fi User Testing





This research led to the production of three low-fidelity versions, each with their own navigation hierarchy and information architecture.

We considered playing with the following factors:
  • Having all products grouped under a 3D Printers tab versus having the two 3D Printing lines shown as primary tabs, since they were using different core technologies.
  • Using sub-navs (that remain sticky) on key pages (Product, Material, Industry) as a means of anchoring the user better.
  • Using generic landing pages that give the user a broad overview of the range of materials or industries. 

The team used four InVision prototypes to explain various options and ideas to all stakeholders (product, services, web and sales). This was an efficient way to communicate a broad strategy with a large team, as they could instantly identify pain points in the low fidelity prototypes.

Check out the prototype here.

After some internal testing and discussions with various stakeholders, we decided to create a separate 3D Printers tab, as well as separate Services, Industries, Materials and Learn tabs. We also decided against the catch-all landing pages, since this decision could effectively be made within the mega menu, thus saving the user a few clicks.



Layout Options


We then tried different visual approaches that would fit the existing visual language of the brand, but also cater to the variety of depth found under each tab.

These are some of the different high-fidelity options we explored for Materials, 3D Printers, Industries and Software dropdowns.




Final Prototypes

The following prototypes were finally chosen for development. I then worked closely with the developers to introduce transitions, and provide design notes for reflows at various browser widths.


Products

The Products dropdown is a simple 1-tier system.


Materials

The 2-tier dropdown changes the Material category on hover and displays the contained materials in the middle column. The assets cover the entire right half of the dropdown, and also change on hover.



Industries

This dropdown has the same 2-tier system, but the images display more hands-on shots of prints in their environment. 



Utilities

The utilities dropdowns remain similar to the original design. We also considered including the language selector in the utility nav.



Results

Overall, the new navigation led to significant increaes in traffic to material and industry pages, especially on mobile. The next step is to create stronger cross linkage between the key pages so as to allow the user to move adjacently within the funnel, and A/B test different options within the page-specific sub-navigation menus. 
Mark

Wash & Cure

UI for post-processing machines on an 8-bit LCD display

Site Navigation

Redesigning the navigation for a rapidly growing website

Form Cell

Designing a print management system for a fleet of 3D printers

Sample Request

Increasing conversions by redesigning a key webpage

The Digital Factory

Web design and branding for an annual 3D printing conference

Other Work

A brief overview of other projects