Lovely Mobile

5 min readJul 31, 2022

Taking Lovely’s powerful rental platform on the go.

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

Following the successful launch of “Spot” — Lovely’s first major update to its web platform — the company began to shift its focus to the mobile market. At the time, Lovely’s iOS app was outdated and lacked many of the features available to web users, and Android users were still without a native app.

In order to reach the growing segment of on-the-go renters, and with another round of funding on the horizon, Lovely began a company-wide push to bring its innovative rental tools to the underserved mobile market.

My role

Over the span of two years, I led interface and interaction design on the Lovely’s mobile apps, working closely with Android and iOS developers to establish a pipeline for quick feedback and asset sharing.

Lovely Mobile v1

iOS 7 had just released in fall of the previous year, and the tech world was eager to embrace Apple’s new “flat” design paradigm. But with this new leap came compatibility issues with Lovely’s then outdated iPhone app. My first project on the mobile team was to assist in making Lovely’s iOS app compatible with iOS 7. It was my job to design any missing assets, views, or states necessary to get the app up and running on the new OS.

Around the same time, Lovely made its first full-time Android hire, and I was put in charge of design on Lovely Android app. This presented a great learning opportunity, but also a unique set of challenges.

Prior to this project, I had never used — let alone designed for — the Android platform. This was before Google’s Material Design rollout, when Android design conventions were still relatively loose. Designing for multiple screen sizes and resolutions (ranging from legacy 1x-res devices to modern 2x-res ones like the Nexus 5) and working with an unfamiliar asset pipeline (e.g. 9-slice sprites) also brought along challenges. Our Android developer, Guillaume, was extremely helpful and patient. He pointed me to useful documentation and walked me through the asset pipeline and helped me build confidence by creating a tight feedback loop, wherein I could share a new asset and see it working on-device within seconds.

Yet again, we were on a very tight timeline. We had to make broad changes to the iOS app and develop an Android app from scratch. Fortunately, I had a starting point on the iOS app from some early work done by our senior contract designer, and the help of our resident ‘Android ninja’.

Lovely Mobile v2

“V2” is an umbrella term encompassing several projects related to the Lovely Android and iOS apps between mid-2014 and early 2015. Some involved extensive iterations spanning multiple months, and others were short learning experiences, like the Google Play Store promo video I co-produced with another designer in two weeks (neither of us had any prior After Effects experience, but we learned fast).

From a business standpoint, mobile V2 was a long-term investment. RentPath (our parent company) had plans to repurpose the framework of Lovely’s V2 mobile platform for its existing rental subsidiaries — Rent.com and Apartment Guide — further down the road, so it was important to design the app with scalability in mind.

During this time, my responsibilities included…

Auditing Lovely’s mobile apps with a PM and prioritize missing views and features (e.g. empty states).
Wrangling loose components and establish a consistent design language across iOS and Android.
Prototyping complex interactions.
Supporting marketing with app store screenshots and promotional videos.
Working closely with iOS and Android devs to ensure the designs were implemented correctly.

Android

For v2, we made the decision early on to follow Google’s comprehensive Material Design guidelines on Android. This greatly simplified decisions such as where to put the main menu to maximize screen space (e.g. in a drawer), and how to handle common interactions, such as having the action bar become a search field when you tap the search icon. Other common conventions like popup menus and page layouts were also created using Material Design conventions in an effort to make actions more intuitive to Android users and reduce the amount of time spent designing custom components.

Custom iconography

One of my favorite projects on v2 mobile was getting to design custom icon sets for various parts of the iOS and Android apps. I started by compiling a list of icons we needed, based on on the amenity filters we offered in the app. Then I sketched as many variations of each, looking for symbols that could be understood at a glance, before mocking up the winners in Illustrator.

I found this workflow to be extremely quick, allowing me to drop icons right into Sketch and preview them on-device. This made it easy to get feedback from people in the office and identify the icons that performed best.