Menu

High Liner Advanced Search

Project Overview

High Liner offers a wide range of products and recipes. With a unique layout that rewards the most popular content, users needed an easy way to search. With a quick search option already available, users needed ways to find specific fish types or recipe categories.

Original Version of the High Liner website.
Google Analytics being displayed on an iPad.

Research

To better understand how users were searching on the site. the first step was to use the site analytics. Through reviewing the site data our team was able to determine what terms users were looking for.

Original research was done prior to the site's initial launch. This research indicated customers were most interested in recipes. The analytics showed the current User Journey was opposite of the initial research. Users were most interested in the products.

Heat Maps, Click Tracking and Video Records were all done to gather further data. These tools continued to build a better understanding of how the user currently used the site. User Testing provided feedback on the current difficulty of finding products and recipes was.

Competitive analysis helped provide already established design patterns. The research found sites, such as Campbell's Soup, which had a flow that was easy to navigate. We determined visual cues were a popular way to display products and a need to keep the solution simple.

Workshop

A group was assembled to determine the best solutions for an advanced search. This group involved members from the digital team, creative team and High Liner representatives. The research findings got discussed with further insights getting provided by each team.

The workshop allowed for a clear User Journey Map to get defined. With discussion and debate it became clear that the initial focus for the user needed to be products. Once the focus became clear, we were able to transition into what content should be available. If there were too many options, users could find the solution complicated.

Whiteboard wireframes helped defined a high level understanding of how the search should work. Everyone on the team had their own markers. Suggestions and edits got made as the conversation progressed. This process resulted the first version of the wireframes.

Focus Groups, based on target demographics, got called in to discuss the wireframes. The groups worked through the flow, providing their own feedback and expectations. The feedback resulted in a complete overhaul of the User Journey Map. Certain scenerios provided and dialogue made it clear that more work would was needed. Working with the focus groups, a final User Journey got determined.

Workshop session occuring featuring a whiteboard. Workshop session occuring featuring a whiteboard.
Screenshot of High Liner wireframes.

Defining the Look

With the workshop got completed, the wireframe process began. The High Liner site had a masonary grid layout which we didn't want to break up. As a result a recommendation got made to have the advance search slide out from the header. The search would float on top of the grid layout, so that when a search occurred the user could see the site update.

A visual counter is automatically updated each time a selection got made. This immediate response signaled to the user the number of products or recipes available. This allowed the user to change their search criteria before finalizing their request.

The advanced search needed to provide users with a way to filter either products or recipes. While both products and recipes share many of the same options, the two choices got separated. The decision to separate got made to ensure that users knew which category they were searching in.

Development

The High Liner site got built using a combination of HTML, CSS, PHP, Javascript and Backbone. As such, the same requirements got used to build the advanced search. With a detailed Sass structure, the advanced search got it's own unique files. This allowed decision allowed for easy integration into the site.

Helper Views and Template files got built into the the Backbone structure. A clean folder structure made it easy to identity the files and what requirements were needed. Custom functions were set up to search through and return data based on the selected filters.

Code being viewed on an iMac
Final version of the new layout and structure.

Project Results

High Liner was pleased with the outcome while usability testing revealed users are having an easier time finding information.