Designing with Time Constraints to Improve Supported Gateway’s Search
It’s safe to say that search is a well covered topic by big names like Google, Bing, and Yahoo, so trying to improve or redesign a search page from that regard seems pointless. For this challenge I decided to focus on improving a function that I had control of and knew customer pain points about. Therefore I dedicated this two hour design session to improving how customers search for gateways that Spreedly supports.
In our current iteration of the gateways page we allow the user to navigate by either scrolling until they find the country they are looking for or selecting the country from a dropdown list that jumps them to an anchor link on the page. This method works and people are using it but, as a designer passionate about usability I want to improve this experience.
Keep in mind I’ve time boxed myself to two hours. While I will try to be as thorough as possible there may be areas that I just couldn’t expand on. The idea behind all of this is to continue working on the 100 Days of UI challenge but take a different approach and focus on user experience as well as a nice visual design.
If you’re not familiar with what I’ve been doing here are the first and second articles in my redefined 100 Days of UI challenge, probably more appropriately named at this point Designing with Time Constraints.
Day 45 Search
The main focus behind my design thinking was to find a way to remove the current dropdown list and get rid of that horrific long scroll. The reason why I want to get rid of the dropdown list is because it is far more than 15 items and best practice states that when a list exceeds a number greater than 15 it’s a much more pleasant experience to provide a text input field instead. After ideating on the search functionality and with a little help from friends in Designer Hangout (@bas, @annie_a, and @luis) they inspired me to use a suggestive search feature.
The essence of the suggestive search allows the user to begin searching for the country they are looking while being shown a list of results that match their query. The more values the user inputs into the search field the more specific the results will become. Thus reducing the amount of time a user has to spend looking for the country they are searching for. Once they have entered enough information to populate a list of suggested terms they will be able to click on that country which will then result in their search being displayed below.
Pow! No more navigating a long list or scrolling down the page looking for a country.
There was one problem I uncovered as I was designing this solution, a business problem at that. Currently Spreedly has a list of gateways that are considered partners. This list of gateways offers incentives for both the users and Spreedly. Aside from being denoted in the search results with an indicator there was not a way currently to highlight the partnership.
An idea was to display a list of image links by default on the gateways page labeled with a headline of partner gateways. This solution visually showcased the partnership, provided familiar logos to prospects thus building trust, and solved the empty state problem (the state prior to populating search results). By nature the list of partner gateways will probably not become too excessive therefore this solution can scale up. But at some point if the list grows beyond a manageable state the design for displaying partner gateways would have to be revisited.
In this design I used a drop shadow to indicate to the user that the partner gateway image link is a clickable item and will take them somewhere. Currently the documentation page for that specific gateway.
Once a user has searched for a country the partner gateways section will be repopulated with the results from their query. You’ll notice in my concepts that the list of partner gateways is displayed differently from the list of gateways as a result of a search query. This is purposeful in the fact that the visual representation of a partner gateway is to highlight the connection and provide a way to show off that partnership but more importantly in the case of a country such as the United States, there could be a plethora of gateways supported.
A long list of partner and non-partner gateways would be visually overwhelming if each gateway supported was displayed by their logo and not a text link. I’ve kept the functionality the same, only displayed it differently.
You may have also noticed that the search bar shows the users query of “America” while the results are displayed with a headline of “United States of America”. The reason behind this is because the suggestive search will recognize the values in a string and populate a list of results allowing the user to click on the correct one. Since America is typically listed as the “United States of America” I chose to display the search results country headline with common display preferences.
Overall I kept this design very simple and focused on improving only one area of the page because this is the most important content and functionality needed in order for users to find what they are looking for. The purpose of the content is to showcase the gateways we work with and allow users to determine wether or not a gateway is available in the country they need to transact in. By removing any excess information up top and placing the search feature front and center this content becomes the focus thus improving the user’s experience.
Moving forward
No search feature would be complete without a filter. And I know our customer success team would just swoon at the ability to filter gateway search results by varying degrees. In future iterations it would be great to focus on this micro interaction and find a way to further the value a feature like country specific gateway searching could be.
In order to determine wether or not time should be spent on the development of adding in search functionality a prototype would be necessary. Wether it be a static series of clickable images (think InVision) or an HTML/CSS document, acceptance and/or rejection from users could be defined. A basic metric for establishing success would be positive reactions and increased ease of use with the content on this page. Because these KPI’s would be determined and gauged by a user’s emotions and reactions these tests would have to be a moderated session in order to gather the qualitative data.
This is only a concept and barely scratches the surface of what’s possible but it does meet the initial goals of removing the dropdown list, getting rid of the long scroll, and improving the user’s experience with Spreedly.
