The Android App Search Redesign was a project I worked on for the ApartmentGuide and Rent.com brands while at RentPath. I worked closely with the project manager to define the scope of the project, write specifications, create final assets and work with the engineers to get the project built. The assignment began by conducting user testing and research on the current android app and then addressing the issues found in research, through the redesign.
User Testing Old App
Before the redesign could begin I wrote a test script and conducted user testing on the old Android app. I wanted to know the primary issues users were having with the experience so that the redesign could solve these problems.
User Testing Report and Highlight Reel
I studied 5 participants, created a highlight reel of users, and wrote a brief report on the RentPath User Research wiki I created. I discovered a variety of issues with the search process and filtering, along with other various usability hurdles and a few bugs.
Before: Map Search
The old map search product had a few issues such as the list view button being hard to find and the filters button getting covered by search results.
Before: List Search
Once the user clicked on a cluster of properties a list of properties would appear at the bottom of the map. However, the problem was that the search filters button got covered and confused users. In addition, my user research revealed that showing the number of floor plans available was not very useful and users would prefer to see what types of bedrooms were available in the apartment.
Concepting and Sketching
I met with my Product Manager and presented my findings from the user research. We then white boarded and sketched a few different directions on how to solve the design problems I identified.
Icon Research and Design
I wanted my new designs to feel as native to Android as possible so I used Material Design icons in as many cases as possible, which I then styled and created final assets for the developers. In some cases, I needed to create original icons drawn in Illustrator.
Mockup: Map Search
My solution was to move the search filters button to the top of the screen so that users could easily find it. I used the default filters icon provided by Google Material Design and used as many Google icons as possible, to make the experience feel intuitive to Android users. I moved the map and list buttons to the top of the screen to improve findability. In addition, I changed the search experience so that users could tap the search icon or the "City, State or Zip" text at the top of the screen and change their location.
Mockup: List Search
My new design now showed the name of the city the user was searching in to provide more contextual information. In the list of results, I replaced the floor plan numbers with bedroom types, as I knew bedroom types were more valuable to users, based on my research. I also updated the app font to Google's device font Droid for greater consistency with Material Design and to give the app a more modern aesthetic.
Mockup: Location Search
I redesigned the location search so that it was more consistent with Material Design and improved usability. As soon as the user clicked into the location search field they could use their current location, previous search or cancel the operation. I also left part of the map showing below the location field to provide context to the user and allow them to easily go back to the map.
In user testing I learned that users wanted a way to sort their list of results by low to high price but couldn't do it in the old version. In addition, when typing in a min and max price, users didn't have an easy way to delete the price. There was also an "Only show listings with pictures" check box that was worthless because the majority of properties had photos and most users wouldn't even look at a listing without photos. Clearly there were some improvements to be made on the filtering experience.
Mockup: Filters (Default View)
Taking my research learnings into account, I designed a sort feature to allow users to sort from low to high price. I removed the "Only show listings with pictures" check box, killing a feature that was unused. In addition, I updated the icons, buttons and look and feel of the filters screen.
Mockup: Filters (Edited View)
My new design also provided a delete button so that users could easily remove the price in the click of a button. Active buttons were clearly defined by turning to red. After the designs were complete, I created all the final assets and worked with the developers to assure the final product was pixel perfect.