After consulting with Jim Rampton, a professional UX designer and professor at U-M, and our peers for feedback, both parties explained that the map view/list view button at the bottom of the screen seemed hidden and obtrusive. To remedy this, the team decided to change this button into a toggle switch with a map and list icon and move it to the header tab, next to the search bar. This way, the list and map view option is highlighted at the header alongside the other primary features and do not obstruct any cards or icons on the list and map, respectively. The visibility of this feature has now increased.

Based on user test results, the previous map icons that were based on location symbols seemed randomly placed and did not indicate an exact location on the map to users. Many users also did not think that they were clickable to expand and show more detailed location information. To remedy this and follow the consistency and standards heuristic, we have decided to adopt the generic pins that users will be able to recognize from any other apps or websites, such as Google Maps.

A common pattern we noted during the usability tests was that users mistook the location-type tags in the list-view location cards as clickable buttons. The team wanted to find methods to remedy this issue, as it was quite a common occurrence. During our peer reviews, an essential piece of feedback we received was that the location-type tags seemed redundant considering the filters above; if someone filtered for farms, they don’t need a symbol on the location cards to indicate farms. They suggested keeping tags in the longer-description pages of locations, but not in the default list-view page. By getting rid of these tags in the default list view page, we prevent potential errors while resolving the issue of redundancy.

Both usability testing and in-class feedback demonstrated that our design created confusion, as users were unable to decipher the differences between ‘location type’ and ‘services available’ filters. We decided to combine these 2 filters into one broader ‘location’ filter that encompasses both aspects of the location.  The team decided it would be best to combine the two filters into one, ‘location filter,’ to improve clarity for users. 

To also improve clarity and showcase that these are clickable buttons and not just aesthetic symbols to users, the team added a subtitle indicating ‘location filters’ above the primary location-type filters. Usability test results indicated that several users were unaware that the filters in the header were buttons/filters, and assumed that the buttons were designs that were added for aesthetics and had no functionality. In our mid-fidelity design, we had an advanced search option that had service filters such as “Wheelchair accessible” in a separate location from the ‘location filters,’ but our usability tests showed that users experienced confusion by having multiple filters in multiple places. By relocating the advanced search options to drop-down menus right beneath the location filters, the user is able to see all the filtering options in one place and apply them all at once without any unnecessary clicks or menus.

Usability testing showcased that many users either were unable to find the advanced filter button or were confused as to why there were primary and secondary filters, not understanding the hierarchical difference between the location type filter in the header and the advanced filters. Considering the abundance of confusion we received in regards to these filters, we decided to increase visibility and add these filters (distance, atmosphere, and hours of operation) to the header, underneath the location filters, as drop-down menu options. Since the secondary filters are located alongside the primary location filters, we hope that this design choice will significantly reduce the confusion that users initially had when accessing and utilizing these filters. ion

Our team decided to make this change because Dark blue as the primary color in this design makes information appear more legible when compared to the orange from the previous design Iteration. We did not have much flexibility when choosing the color scheme, font, or symbols within our designs, as we were following the brand style guide that our client provided us with. However, we found that the dark blue color in the brand guide is better at conveying text information on a white background than the orange color on the style guide. This is vital for ensuring good color contrast ratios for accessibility purposes.