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.
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.
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.
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.
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.
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.
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.
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.
Follow the on-screen hot spots that appear when you click/tap on the screen.
Other Projects
Dwolla Developer Portal RedesignUI / UX Design
Instant Account Verification - FinTech Product PrototypeUI / UX Design
Sandbox Graphic & A/B Tested Landing PageIllustration & Web Design
Rebranding the Dwolla Identity SystemLogo Design & Brand Identity
Dwolla Core ValuesBrand Identity / Icon Design
Dwolla Marketing Site RedesignWeb Design
Red Benny Font SpecimenTypography / Branding
Office City Location IllustrationsIllustration
Louis C.K.Illustration
Flat Finance IconsIllustration
Food Benefit PosterPrint
Democrat Republican LogoIllustration
Isometric IllustrationsIllustration
Dwolla Mission, Visions & ValuesTypography
Flat Audience IconsIllustration
IronPlanet ConExpo Booth 2008Trade Show Booth Graphics