Global Search on Dwolla.com

The Problem

After launching a refreshed website a year prior, Dwolla was in need of search functionality on their site since it wasn't within scope originally. There was a vast amount of content on the site between the main marketing pages, case studies, resource pages, and blog posts dating back many years. Adding a way for people to find things more easily would greatly improve the user experience as well as increase the volume of marketing accepted leads (MALs) through form submissions on gated content.

My Process

Gather Requirements
Competitive Analysis & Research
Wireframes
Review with Stakeholders
Mockups & Prototyping
Iterate on Feedback
Finalize Designs & Prepare for Development

Display Search Prominently

The most important decision was the placement of the search. It should be placed where users expect to find it. Best practices say to place the search functionality towards the top center or top right of the page where users could find it easily using the common F-shaped scanned pattern.

One of the challenging part was that the top level navigation had varying background colors that ranged from a gradient to dark and light versions. The navigation bar also had a lot of items in it already. Analytics and heat maps showed that these links were some of the highest trafficked pages. Considerations would have to be made on how search functionality could be added to different backgrounds without cramming the area and causing confusion.

Before search was added to navigation bars (desktop & mobile)

After search was added to navigation bars (desktop & mobile)

Stakeholders deemed the "Industries" link the least important so it was removed to save space. A link to the sales phone number was also added, which was revealed on hover (under hamburger menu on mobile). We opted to only use a magnifying glass icon instead of also incorporating a search field. We knew this could possibly make the feature less noticeable, but decided that because of the technical nature of the audience, it was ideal to save space and keeping the other highly important links.

Animation

I created an animation in AfterEffects to show how the search input would overlay the navigation in order to use the screen real estate efficiently and add a little delightful touch.

Desktop Prototype | Mobile Prototype

Auto-suggestion

As the user types, suggested pieces of content are displayed guiding them to construct their search query. A third-party search engine API would be implemented to help power the new functionality and help save development time. The top three results are shown by default.

Desktop Prototype | Mobile Prototype

Results Page

The magnifying glass icon in the top-level navigation is removed since it would be redundant. The initial search term stays in the search box to add context to the results and so the user doesn't have to re-type the query again.

The number of matching results are displayed at the top of the page so the user can make a decision on how long they want to spend looking through the results. Each page displays ten by default (not shown on mobile mockup below). Pagination is at the bottom of the page to navigate through content.

Filtering and sorting options help the user not get too overwhelmed with their search results and narrow down the data. You can filter by pages, blog posts, resource pages, case studies, industry pages as well as sort by relevance and topic. These filters were already existing components on the site so there was no need to think through the interactions. Badges next to each result indicate which category it falls under for quick scanning and cognitive recognition.

Desktop Prototype | Mobile Prototype

'No Results' Page

It can be frustrating to land on a page with no results, so some starting points to move forward are provided including chat, email, and phone links for support.

Desktop Prototype | Mobile Prototype

Add Search to 404 Page

The search box should be prominent on every page. So as a best practice a search field was added to dead-end pages such as 404's to get the user to where they need to be.

Desktop Prototype | Mobile Prototype

Final Results

The engineering team implemented and released a minimum viable product (MVP) that has some basic search functionality to provide benefit to the user as quick as possible. The fully functioning search is currently under development and results will be tracked once released in order to iterate on improvements. There's no doubt that the new search is a huge user experience improvement.