AA-CC Key Design Decisions
Case Study Deep Dive
1. Location of Search.
Original Design
On the original AA-CC design the search function was located underneath the header section. As this was not immediately visible a CTA button in the nav called ‘Find certified Business’ was present. This would scroll the user down to the search feature.
Selected Design
I decided against this original decision and placed the new input fields in the header section. This decision was made on 2 grounds. Firstly I felt that the search needed to be more prominent. As the product was essentially a business listings platform, searching for businesses was the crux of the product. It should be immediately accessible to the users and this would communicate more than any text would that the site was centered on searching and finding ethical businesses.
The second reason had to do with the fact that I wanted to redesign the navigation. During user testing a big problem emerged with users having trouble finding out how to log into their account. The log in link was in the footer which was unacceptable. To make sense I paired the log in and register business buttons as CTA’s in the nav. This meant that I needed to ditch the original ‘search the registery’ link.
Discounted Ideas
A third option, which I briefly explored but quickly rejected was the idea of placing a search input field/s in the navigation itself. This idea was quickly discounted however as I knew I would need at least 2 input fields and the nav would not provide adequate space for a search functionality of the complexity I needed.
2. Number of input fields.
Constraints & Insights
I needed the search function to be able to accomodate several different types of search categories, namely: Business Name, Industry Type, Location, ABN-ACN, & Certification Number. Despite these 5 different categories, my research demonstrated that the most important were Business Name, Industry Type & Location. It also became apparent from research and developing task flows that at any given time only two of these categories would need to be searched in conjunction with one another e.g. ‘Industry Type’ & ‘Location.’
Selected Design
The design that I ended up choosing involved two different input fields. The first was capable of receiving 4 different types of data: Business Name, Industry Type, ABN-ACN & Certification Number. This made sense as only one of these would need to be searched for at any given time. The second only contained 1 type of data: Location. However I ensured that this could received different types of location data such as suburb, postcode, city etc.
This design was a winner because of its simplicity and flexibility. By having only two fields it allowed the user all the necessary search combinations they would need without needlessly confusing or distracting them. As you read through my reflections on the other options this will become more apparent.
Discounted Ideas
A discounted idea was to have 3 input fields which contained the 3 most common categories. This could also allow the Industry field the possibility to have a drop down with common categories. However I felt that this was unnecessarily complex. Furthermore the user would always be leaving one of the Business/Industry fields blank. In some cases both the Industry and Location fields would be blank. Lastly it wasn’t flexible enough to provide search options for the other categories such as ABN etc.
Another idea was to have an ‘advanced search button’ which would provide options to search for the less popular search categories such as ABN or Certification Number. Whilst this idea was attractive it didn’t seem as cohesive and simple as the first option. One of the downsides being that the advanced search options wouldn’t be apparent until someone clicked on them.
3. Staging Mobile Experience.
Constraints & Insights
Mobile brings a unique set of constraints that can warrant unique solutions. The first constraint is the distinct lack of screen real estate. The great irony is that despite having less screen space the tap targets must also be much larger (44-48pts) than Desktop to adequately accomodate a user’s thumb. The second is that typing is hard and the likelihood of misspelling is incredibly high. This makes search features like autocomplete very important for Mobile as it eliminates as much typing as possible and reduces the chances (or makes the user more aware) of typos. Another important aspect is allowing users to view and select their recent search options (or popular searches) as this further reduces the need to retype certain searches.
Desktop solution not adequate
Simply translating the Desktop solution to Mobile in this case would not have worked. As you can see for autocomplete to work properly the input fields would need to scroll up to the top of the screen to provide enough room. However there is no capacity to display recent or popular searches. Also since the autocomplete must spill out from the fields themselves it can limit the space to fit enough options and comply with a minimum of 44pts tap target.
Selected Design
The staged design I chose had several key advantages. Firstly it transitioned to a dedicated search page when the user presses on the input field on the home page. This allows users to have access to their recent search history. I added icons next to each of the search suggestions which allowed them to have larger touch targets and be more spaced out. The second significant advantage is that the staged design allows users who search for a business to skip searching for a location all together. This streamlines the process for a key group of users.
