Case Study : Boxed Navigation
Navigation at Boxed , like other core functionality, has gone through many iterations throughout the years. The snapshot below demonstrates the evolution from 2014 to the present. We’ve been through static side navigation, centered mega menus, the addition of filtering and much more. Come along for a chronological walkthrough.
In 2014, the Boxed navigation looked like this, the site was left aligned, not responsive and the same menu was shown on every page.
Early on, in an effort to devote more space to products, we experimented with a short-lived version of the side navigation which was icon based while on the page and expanded to text only on hover. The drop down menus worked in the same way.
In 2015 we were finally able to execute a complete overhaul of the navigation. We switched to a more conventional top nav, complete with mega menu. An inline side navigation was added to support sub categories and would change dynamically with content.
A mega menu was a great choice for us at the time because we had a very curated selection and not many sub categories to support. This particular execution lasted about a year before we started to really expand on our selection and the amount of new categories and the menu height became unsustainable.
Our next solution was to introduce a tiered menu featuring categories then subcategories upon further interaction. We’ve stuck with this system through today, although the visual design has been update to support an evolving styleguide
A lot of research was done to support the most recent alterations to the navigation and main menu. We wanted to ensure that keeping the same system was still in our best interest and made updates as needed.
Updates mostly included visual design in the most recent round of updates (2018) we considered the color of the navigation, icons, link styles and laid out every possible design for the main nav to be sure we had the most effective interface.
Once chosen, responsive designs were created for various user types including signed in, signed out, eligible for fresh delivery, b2b and more. All of these iterations were fully and exactly designed then converted to symbols in Sketch and Adobe XD.
The menus were prototyped in Principle and shown to developers and users to ensure everything functioned well.
Our current category structure (right) is now well supported by our navigation and menu designs.
Here you can see the before (left) and after (right) of our mobile web hamburger menus from 2016 to present.
2014-2019
Want to see more from Boxed?
