Header and Navigation Prototype Research

Redesigning the header with navigation for a complex structure of retail products required a lot of quick prototypes to find and validate solutions for responsiveness in horizontal and vertical orientations and find out how different components interact with each other.

Testing responsive behaviour of the components on orientation switch

The approach was to research possible improvements by focusing on a single problem at a time.  Different formats of wireframes and prototypes enabled the design team to get new insight and come up with a lot of ideas that would be validated later during the testing process.

Framer does an amazing job in rapid prototyping by providing a multitude of components that can be effortlessly animated using CoffeeScript. Example below shows interaction of the menu panel, page scroll component and search panel. Basic interactions are added to account for more use cases and were quickly tested for usability.