ENABLING GREAT CAR PHOTOS

🚀 Shipped November 2019
📱 iOS, Android, and Web
✏️ Lead Designer

The quality of a cars photos can make or break a potential guests decision to book a car. My team tackled an effort to help new hosts take high quality photos that set them up for success by making guests feel confident in booking their car.

The Problem

Poorly represented cars are far more visible in small markets with fewer results

To get our newer markets off on the right foot, there was an exec driven initiative to have our business teams in Germany & the UK review every new listing, and restrict based on shared measures of quality. This rough experience was manually implemented with no product support, and often led to frustrated new hosts leaving the platform. There were a few quality indicators that could lead to restrictions, but poor photos (stock, blurry etc) were by far the leading cause, accounting to upwards of 90% of restrictions on a given day.

Collaborators

Project Team
Myself (sole design contributor)
Product Manager
Engineering Manager
Cross platform engineers (iOS, Android, front end web).

Stakeholders
International business teams — they reported this issue
Host Product Team — they own the product area where car owners uploaded car photos

Understanding success

In every project, I aim to align expectations around a collectively defined set of goals & metrics. This is established in collaboration with my project team.

Goal

Increase photo quality in new listings

Primary metrics

1. Restrictions due to poor photo quality

2. New listing activation rate & time

Photo quality is hard to put a direct quantitative measure on. The review process in the UK + Germany provided an opportunity though. Less restrictions due to photo quality would be a clear indicator of rising quality in those markets. That wouldn’t be a direct indicator of the features impact at scale. For our larger markets, we looked to track both new listing activation rates & activation time. In theory, higher quality photos would help more new listings activate, and help decrease that time to activation.

Counter metrics

Impact on listing flow completion rates

We sought to closely monitor conversion for hosts completing the photos step of our listing flow (where car owners add their cars to our marketplace). This feature was a balancing act - improving photo quality for guests by getting more & higher quality photos on listings vs increasing the effort level for hosts uploading photos. Whether this was positive or negative friction would be determined by the impact on photo quality & activation compared to the drop in listing flow conversion.

The process

I started with a combination of reviewing past user research, and market analysis through product comparisons. We were lucky that our research team recently completed a usability study of our listing flow — one of their key takeaways was:

Hosts want more guidance on which photos to take.

This was understandable as the existing experience had almost zero guidance. While that glaring issue was top of mind from the get go, we wanted to do our due diligence by exploring other high level project directions based on past research and our project goals. Through a process of individual and formal team brainstorming, I identified and explored a list of 10+ divergent tactics including:

• Educating hosts on why photos are important, and how to take them

• Auto detecting poor quality photos through blur detecting AI

•  Increasing the coverage of our professional photography program

• Live previewing listings to show hosts how poor photos will look

For each direction, I laid out a rough elevator pitch including product changes required, rough scope estimates from informal engineering feedback, and pros / cons.

I also took the opportunity to run an unmoderated user test (via usertesting.com) to interrogate our hosts desire for guidance further. I tested three prototypes with potential hosts, each with different guidance tactics to determine how hosts might respond to each in the context of photos (tips, prompts to take specific shots, example photos etc).

Takeaways

1. Our existing listing flow is severely lacking in guidance. Both existing and potential hosts strongly desire more direction.

2. Structured guidance (i.e. asking for specific photos) makes potential hosts feel more confident by eliminating guesswork.

3. Example photos not only communicate what shots we’re asking for, but also how a given shot might be taken.

These takeaways informed our final direction:

Prompt hosts to specific photos while providing guidance through tips, camera overlays for shot alignment, and examples of good photos

In other words, tell hosts what photos will set them up for success, and give them tools to execute. Despite the allure of shinier solutions like auto detecting photo quality, we felt a better first step would be to start providing that baseline level of guidance.

With this direction in mind, my team and I started breaking down the effort into smaller chunks via user stories. For example:

As a Host, I want to know which photos I should include.
As a Host, I want to know how I should align my car when taking photos

These non-prescriptive, user driven stories help us start to understand what product changes will be needed, how to prioritize the work to be done, and what opportunities exist for incremental shipping. I kicked off that process by diving into wireframing and flow diagrams.

Through informal & formal feedback sessions with my direct team & stakeholders in the larger product organization, we gained clarity on the architectural changes and components needed to execute our direction. It became apparent that our flow was very “upload from gallery” focused, and we needed to rethink the architecture of the existing flow to point hosts toward a guided camera exprience. I used that clarity to move into high res UI explorations, prototyping, and motion design.

Our solution

We shipped a photo upload experience including:

1. Tips to communicate the value of high quality photos, and orient hosts before shooting

2. A guided camera flow on iOS & Android (see below)

The shots are requested in an order that guides the host organically around and then into their car. In right hand drive countries, some overlays and example photos are mirrored to provide a localized experience. We also use some lightweight motion when transitioning between steps to create a sense of progress:

One note I’d add here — we initially intended to build a more robust carousel component that used motion to create a sense of progress and accomplishment through the flow (see below). That carousel would have doubled as a navigational element as well, enabling to hosts to move forward or backward to view and retake photos.

Due to late in the game priority shifts, we scaled back that experience. Our teams resources were needed in an “all hands on deck” type situation to combat some shorter term revenue issues in another product domain. With the timeline shifting from 1.5 months to 2 weeks to finish, I quickly put together and presented my team with multiple options cut scope while still delivering on our projects goals. While we all saw the value in the more polished carousel experience, it represented the highest engineering time and wasn’t something we could get built & tested in the compromised timeline. It was disappointing, but my team and I agreed it made sense to prioritize broader company goals.

In terms of example photos, we opted to pick a representative set from our Professional Photography program. A Toyota Carolla felt like an approachable and generic enough model, and the photo quality of this specific set - while high - wasn’t so extraordinary as to feel difficult to replicate.

Our overlays were executed by our wonderful brand design team. We tried to strike the right balance between realistic and whimsical - realistic enough to make the alignment obvious, but whimsical enough to communicate approximate alignment was okay.

In context — iOS

Android

We didn’t run into any situations that called for platform specific approaches, so Android mirrors iOS in its architecture. There’s some trivial styling differences due to how each platforms components are defined in code. We were able to match the camera UI so closely because Turo was already using 3rd party camera libraries that enabled additional customization.

Web

Without a camera experience on web, we leaned on the stronger content introduced elsewhere including tips and example photos. This was a much lighter weight approach than the apps, but it let us deliver on project goals quickly, and focus more energy in the mobile experience where a majority of our users list their cars.

Looking forward

Usability testing
The priorities shift mentioned above accelerated our timeline drastically, and we weren’t able to secure resources from our Research team for in depth usability testing of the final product before launch. Turo’s Research set up unfortunately doesn’t empower designer led research beyond unmoderated user testing with clickable prototypes. This left us leaning more on internal feedback — we stress tested the experience by sharing a test build widely, testing in the real world, centralizing feedback in a single doc, and prioritizing fixes based on impact. I made sure to coordinate with the Design Director of our Host Team to evangelize the need for usability testing on this feature, and submitted a request for follow up with our Research team.

Delivering the full carousel
I’d love to see the team build out the more robust carousel experience we initially landed on. While we still feel confident that our V1 delivered on the goals of our project, I think the more fluid interface & motion would elevate the experience.

Customizing overlays & photos
At the point of taking photos, we already know what category of vehicle a host is listing (sedan, van, SUV etc). In our next iteration, I’d love to use custom overlays and example photos per vehicle type. I think our existing overlays & example photos are still a helpful reference in how to frame a shot, but customizing per vehicle type would help the flow feel more personalized.

Improving the web experience
We made big improvements in the guidance offered on web, but I would have loved to provide a prominent call to take photos in our app with the guided camera experience. This was de-prioritized due to some tech complexity in deep linking directly to that flow in the apps, but remains top of mind for future iterations.

Extending to other use cases
There’s a handful of other flows in the product where a similar guided camera could be impactful - namely managing photos on existing listings, and taking photos while checking into or out of trips. However, the use cases of each flow would require some adaptations to what we built. Managing existing listings photos might involve adding a few photos rather than taking a full new set, and the pressure of a potentially high stress & time sensitive key handoff doesn’t always facilitate a careful & considered photo taking process. For this project, we intentionally moved away from our existing “one size fits all” upload experience to something custom fit for taking photos of a new listing. While I think our learnings and some elements of this new camera experience can help improve those flows as well, we wanted to make sure we approached that extension process with the same intentionality with which we approached this initial feature.

That’s the end of that case study.

OTHER THINGS TO SEE:

Collecting Richer Vehicle Data

🚙 Turo
🚀 Shipped October 2018

Listing A Car Anywhere

🚙 Turo
🚀 Shipped March 2018

Working Remotely

🌎 My approach to collaborating from afar