Lovely Web

7 min readJul 31, 2022

Helping renters find a place to call home.

Company overview:
Lovely’s mission is to change the process of renting from daunting and uncertain to simple and transparent. Lovely’s marketplace enables renters to search, apply and pay directly from their computer or mobile device, while giving property owners the tools to manage their units and find the most qualified tenants.
Year:
2013–2015
Role:
User research, Screen flows, Visual design, Video editing
Tools:
Email recruiting and in-person interviews (user research), Photoshop and Sketch (screen flows and design), Adobe After Effects (video editing)

Challenge

When I joined the team in 2013, Lovely’s fledgling marketplace had seen encouraging adoption from renters in competitive cities who were struggling to match the pace of the market with traditional tools. Many had used Craigslist to manually scout for new listings, but this was time-consuming work, and standing out at an open house among twenty or thirty applicants was at best a gamble.

That’s where Lovely’s marketplace came in, providing urban renters with the tools to search with confidence — knowing they’ll never miss a listing — and get ahead of the crowd with all right paperwork to apply on the spot. And with Lovely’s landlord portal, renters could skip the line altogether and apply directly from their computer.

My role

I led visual design on search, applications, payments, and the landlord dashboard on web, and contributed to several email and marketing campaigns. Over my two year tenure, I went from designing simple mock-ups to leading interface and interaction design on core features of Lovely’s rental platform on web and mobile.

Lovely Web v1 (“Spot”)

At the time I was brought on, Lovely was entrenched in work on a major iteration to its flagship web platform (internally known as “spot”). It was my job to complete the visual designs for user authentication and renter profile (a verified profile with applicant information), the renter dashboard, and minor additions to the listing detail page. My PM at the time would hand over Balsamiq wireframes for new pages or edits, and I would create the necessary high-fidelity layouts according to existing design patterns. Once the layouts were approved, new assets were created and delivered to the web engineers.

As a small team faced with an aggressive deadline, we faced several challenges:

At the time, we were using Photoshop layer comps in files created by different contract designers using different versioning paradigms (e.g. Spot-Master-3b.psd), which made finding certain layouts and pages a challenge.
On a few occasions, designs were created by contractors that introduced new grids and layout constraints that simply couldn’t be matched by the engineering team. In cases such as these, I would do what I could to modify the mock-ups to make them fit our existing constraints, but the hurried timeline resulted in a few inaccurate mocks and one off page layouts.
Some open technical questions couldn’t be fully answered by engineering before design began, which led to some challenges later in development. One example of this was the grouping functionality of the spots on the map, which split into smaller dots and eventually individual listing pins as you scrolled into the map. The problem is that we designed and built preset zoom levels into the spot grouping algorithm based on the housing density of San Francisco. However, as we were starting to roll out into smaller markets (e.g. early 2014 Denver, CO), we started noticing that our baked-in zoom levels weren’t suited for less populated areas. So, we had to make some adjustments later so that individual listings would appear on the map while the map is zoomed further out in less populated cities vs. in a city like SF, where you might have 25–50 listings within a few blocks.

Despite these challenges, and with the help of our tireless engineers, Spot successfully launched in November of 2013. The rollout dramatically improved usability and added many new features that at the time were unheard of in the online rental space. Features that seem commonplace today, such as the ability to apply to a property, conduct correspondence with the landlord, and be approved — all online, and on one platform.

Lovely for Landlords

But Lovely’s vision of a rental platform was incomplete. Shortly after the launch of Spot, attention shifted to the other half of the rental marketplace: onboarding landlords and building out the landlord dashboard. The existing landlord dashboard was difficult to navigate, it didn’t have a place where new Lovely landlords could go to answer questions, and it lacked basic features like the ability to preview a listing live.

My first priority was to make the landlord dashboard easier to navigate. I organized the nav bar hierarchy by task (post a property and collect rent) and simplified the number of sub-nav actions. A Q&A section was also added where landlords could go to get answers to common questions or contact support.

Patient applications and renter card

With Spot, renters could send their renter card — a verified profile with supplementary details such as “earliest move-in date” — to most properties with a single button click, but this was only a half-solution. Response rates were mediocre and the feature was little more than a profession email, not to mention all correspondence was handle online. Renters were on their own when it came to viewing the property.

And so, we experimented with the idea of a comprehensive renter profile, complete with references and a credit report. One that helped renters consolidate references and other key information, and one that landlords would trust — even outside of Lovely’s digital ecosystem.

I worked with another designer over the course of a few weeks to wireframe and prototype a new flow, which walked renters step-by-step through the process of filling out their profile and application details and provided them with a detailed credit report and printable application. Renters could then apply automatically to all application-ready properties on Lovely’s website, or print out their completed profile/application to share with landlords in-person.

It was during this project that I had one of my first “aha” moments, where I really began to see the value in bridging the gap between the online and offline experience of looking for an apartment. While we never got the chance to see applications evolve beyond this iteration, I still believe Lovely’s greatest asset was the willingness of its team to consider the very personal, offline experience of renting, in addition to the more efficient online experience.

Lovely Web v2

My final project at Lovely involved a number of improvements to the renter-side search experience of the Lovely’s web platform.

With v2, we had the following priorities:

A cleaner search experience. The ‘patchwork’ nature of the existing website meant some pages were more responsive than others, so page layouts were redesigned to be fully responsive. Navigation and map search were another focus area. I spent a few weeks testing new layouts with filters that would collapse nicely on mobile, simplifying top-level navigation, and adding contextual tips to help familiarize new users with Lovely-specific paradigms, like color-coded map clusters.
Updated homepage. One common complaint from users of the v1 site was the way the map automatically centered on your current location. We found that many renters were looking out-of-town and even out-of-state, and that the default map behaviors was confusing and sometimes frustrating. So, we made it easy for renters to get searching in the right city and have the map remember where they were searching between sessions. I took things a step further by creating a homepage layout that featured popular cities and exposed Lovely’s expansive inventory of listings.
Improved search results page. Lastly, as part of the effort to make search responsive and easier to use, I proposed a new grid view layout to compliment map search. This design featured larger property photos, clearer price and bedroom details, sorting, and a scrolling banner suggesting nearby neighborhoods.

Overall, the update improved the usability and navigability of the site on desktop and mobile web, while contributing to the consistency of our visual design language across Lovely’s web and mobile apps.

Lovely web v2 landing and listing search pages

Marketing collateral

On a few occasions, I had the opportunity to work with the marketing team on campaigns for emails, slide decks, and promotional collaborations. One of my favorite small projects involved designing “For Rent” signs for Lovely Leasing, an internal team designing new tools to help property managers analyze market trends and lease their properties more efficiently.