Lovely Mobile

Taking Lovely's powerful rental platform on the go

Google Play Store Video

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 promo video I co-produced with another designer in two weeks (neither of us had any prior After Effects experience).

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 it’s 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 period, my responsibilities were to:

  • Review Lovely’s mobile apps with a PM and prioritize missing views and features (e.g. empty states).
  • Wrangle loose components and establish a consistent design language across iOS and Android.
  • Prototype complex interactions (e.g. filtering on the map).
  • Support marketing with app store screenshots and/or promo videos.
  • Work closely with iOS and Android devs to ensure the designs were implemented correctly and take care of any blockers.

Onboarding (lite)

Search

Listing Detail Page

One of my goals for the visual design of v2 mobile was to do a better job of capturing Lovely’s friendly brand voice and its focus on simplicity. After some exploration and talking to developers, I proposed a change to the mobile font and created a simple component library that made new features easier to design cross-platform.

Alerts

Renter Card

Authentication

Android

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 (A: 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 taken from Material Design conventions in an effort to make actions more intuitive to Android users and reduce the amount of time spent designing custom components.

Navigation drawer

Map search

Search list exploration

Unit detail page iterations

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 would start by compiling a list of icons that were needed. Then I would sketch 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.