Challenge

Improve the full listing page to do a better job of empowering the renter to decide whether to pursue the property.

Constraints

I didn't have any access to data or direction on the target user demographic. Since I didn't know exactlywho to design for, I made a quick persona to give some direction for crafting the UI (i.e. what actions should be emphasized? What are common user behaviors?).

Redesign

Although the task was to redesign an older iteration of the Lovely mobile app, I looked to the current iOS implementation and used that as a starting redesign point so that I can still show my thought process and execution, but also so that my work might prove to reveal some relevant insight.

1. Information density - I wanted to address this choice of UI. While there are some listings that have a price range, which takes up more screen real estate, I think that space could potentially be better utilized.
2. Favorite - From talking to several people in my office and the quick persona exercise, I discovered a user behavior of creating a short-list before the final decision. While the Favorite CTA is prominent in the current implementation, accessibility could be improved.
3. Email and Call - I was surprised that selecting the Call CTA immediately called the housing provider. While this does empower users to contact and move towards a decision, it is very abrupt and an accidental press interrupts user flow (frustration point).

Research

Before I moved forward, I looked to other apartment rental and similar applications to get an idea of current UI solutions.

Ranking Info and Actions

To further help my UI decision making, I ranked info and actions found on the app from most important to least. An interesting find was that in the older iteration there was a Send Application action. I took this out of the final solution, my hypothesis is that it pressures housing providers to adhere to a process they might not go by. If the application is customizable by each provider, it can cause a lot of user friction in having to fill out unique applications for every listing. Pruning this feature not only simplifies the UI, but also makes the decision process simpler for users (Email or Call).

Solution

Below is my suggestion for some UI/UX improvements. I tried to adhere to current stylings and conventions as much as possible. I addressed the information density by shifting the price, timestamp and verification tag onto the picture-this pushes the bed/bath info up. I added "Sqft" to the house icon because I believe it is not intuitive to first time users as to what that icon denotes (since most listings had NA). I could not figure out what that icon indicted until I explored the desktop site and found out it was square feet.

The largest departure from the current implementation was the rearrangement of Favorite, Call, Email, and Share CTA's fixed to the bottom of the screen. Email and Call are combined and into a general Contact CTA. When a user selects this, they are brought to a screen that shows a summary of the listing and specific contact methods of Call and Email. Selecting Call would give the user a prompt to proceed with the call (which addresses the pain point of pressing Call and potentially interrupting the user experience), while selecting Email brings users to the existing contact form.

I chose this UI to increase the accessibility of the Favorite and Share actions by having them static and clickable at all times when viewing the listing.

Lessons Learned

When put in a position where you don't have all the information to make the best decisions, a designer should utilize all their experience and tools to be as informed as possible. Research, over-the-shoulder testing, persona exercises, etc. all give some insight and help fill in the picture.

Lovely is the first real rental marketplace that helps renters find the homes they want quickly and easily and helps property owners and managers find the best tenants. This project addresses potential friction points followed with suggestions for improvement.