– Onboarding & Personalization –
Building a personalized feed

Vintage cars – A shared passion,
but with uniquely individual tastes

Enthusiasts love their cars, but their tastes can very wildly. Creating a personalized landing page for each of our users is an ambitious goal, but it makes sense on multiple fronts. It shows off eBay’s vast and unique inventory, and immediately connects the user to content that’s relevant and appeals to them.

Client: Ebay Motors
My Role: Product Designer (Concept, UX, UI, Prototyping)

Designer: Thai Dang (Feedback)
Product Owner: Richard Sipe
Project Manager: Jake Martin

 

–Building a Feature –
A Spectrum of Activities

While it would be a much simpler process to manage, I find none of these activities happen in a clean straight path, when building out a feature in a 6 week sprint, as the sole designer.

Activities will overlap, and you’ll need to loop back constantly, to iterate and build upon recent findings. 

  • The Initial Ask & Pivot
  • Research – Comparative Analysis
  • Tapping into our Personas
  • Creating a Taxonomy
  • Choosing a Framework
  • Brand Promise & Art Direction
  • Mapping to the Backend
  • Finalizing a UX Strategy
  • Prototype & Iterate

– The Initial Ask and Pivot –
A Sense of Community

Agile can mean pivoting
halfway through a design sprint

Originally, this feature was aimed to personalize the Community Experience so that discussions relevant to a users interests would surface in their feed.

However, during our first design check-in, our product manager saw the potential of slide 2 – presenting various listings to a user in a fun way. Once we realized the added potential of matching unique inventory to a user’s tastes , we quickly pivoted to a global Onboarding experience aimed at personalizing the Home Page feed.

– Comparative Analysis –
Studying UX Patterns

What are the key
takeaways to leverage?

As is standard for this type of work, premium apps were studied for their onboarding experiences; among them – Spotify, Pinterest, and Instagram. Having reviewed the flows at a high level, the next step was to extract the UX Strategy behind the patterns. 

Personalization approaches to consider

  • Gradual and progressive cadence of choices
  • Start broad then refine the choices over time
  • Package preference as part of a larger social group

Taking inspiration
from Tinder

When considering cards and swiping, Tinder is the obvious reference. The swipe select is a signature gesture which many users are familiar with. However,introducing this off screen motion in early prototypes proved to be problematic. In the end, we removed this horizontal motion since the motion looked jarring on a tablet device.

– Remembering our Users –
Tapping into our Personas

Our taxonomy needs to
include all of our personas

Through multiple onsite and remote research sessions, the product team arrived at a composite of five distinct Enthusiast personas. Exposure to this spectrum of users proved invaluable when crafting a taxonomy – it has to appeal to folks who had different interests, needs, and budgets.

 

 

– Art Direction –
Finalizing image selections

Finding the right image

Once the categories were finalized, many hours were spent scouring Unsplash to find high quality images that were royalty free and would feel authentic to an enthusiast. It’s a challenge I enjoy, since I love classic cars and own one myself.

The overall selection of images leaned toward the aspirational, since we wanted users to be excited about using our app.  As I narrowed it down to a final set, one particular challenge was looking for images that were iconic yet abstract. As an example, when selecting a classic car I chose to focus on the design language of tail lights.

Classic car tail lights have a simple geometry whereas modern lights look rather complex and robotic. I felt this was a better approach than simply selecting a Ford Mustang. Some folks might love classic cars, but dislike Ford Mustangs. If they were to opt out based on Mustangs, they’re missing out on a bunch of classic cars that might appeal to them later.

– Evolving the brand –
Built by Enthusiasts, for Enthusiasts

Get out there & drive

Deep down, we want users to know we love cars as much as they do. I opted to find images which really spoke to the joy of driving. It’s an experience which Enthusiasts are obsessed with, where as the casual driver sees a vehicle as basic transport.

Our long term focus is to make eBay Motors a go to destination for enthusiasts to visit daily. Photography which truly resonates with an enthusiast helps to accomplish the goal of eBay Motors being the preferred car enthusiast app.

– UX Strategy –
Encouraging the Aspirational Self

Getting to know you,
should be a fun experience

We want to encourage our users to participate and define their experience from the minute they download the app. This rapid-fire quiz primes the user to engage and engage often, for better results.

 

UX Strategy

  • Empower the user to craft their own experience
  • Fun and engaging personalization
  • Valuable data harvested for future tailored promotions and micro-targeted campaigns

– Prototype Iterations –
Allow for Second Guessing

Leaving room for hesitation

A well executed feature accounts for all states of interaction – and with haptic devices, hesitation is one of them. The oscillating scale of the cards mimics the non-committal nature of the tap. It was a nice touch which our lead developer Corey came up with.  I find active and open collaboration with your developers is essential. Often, they have some of the best ideas.

This early prototype also showed the offscreen card transitions inspired by Tinder. They felt ok on the phone, but the animation felt clumsy on a tablet due to the much larger distance the cards had to travel on a tablet screen. As a result, the cards moved to fast and the animation felt jarring.

– Build, Deploy, Test & Repeat –
Data Analysis and Variant Testing

A 50/50 breakdown –
love it or hate it?

Early findings show almost half our users quit before even engaging in the quiz, while the other half finished all the questions.

Next Steps

  • Regroup as a group and
    analyze the data
  • Iterate on the existing design and
    improve the UI to address the falloff
  • Launch a new variant, to see how it
    performs agains the prior two tests

Simple UI fixes can provide significant improvements

One of the benefits a live testing is that our intentions quickly encounter a user’s reality. We missed simple things earlier on, based on the assumption everyone would love to try this quiz out. In reality, a lot of folks just want to browse the app right away.


Next Steps

  • Make it easy to skip or close the quiz right away
  • Better labeling for CTAs to improve affordance
  • Reduce the minimum number of questions from 10 to just 6

– Learning from the Data –
Optimize for Quick Gains

Variant C improvements

Having tweaked the Onboarding design we’re already seeing improvements in Chat and Offers activity. One theory is people are discovering items earlier, and are quicker to favorite listings and engage with sellers via Chat & Offer.

Early results

  • ( + ) Commit to buy up 111%
  • ( + ) Offers made up 18%
  • ( + ) Huge spike in number of
    favorited listings

– Next Steps & UI Optimizations –
A Direct Approach to Personalization

Take direct control of your homepage

A key piece of onboarding testing data we’re trying to build upon is the spike in favorited items. One theory is that users have been primed to like items within Onboarding and will continue to do so once once they’re on the homepage feed. Thus – why not extend this “Like” activity once they’re on the feed, and have the ability to remove items you don’t like? Seeing the feed update in real time, rewards the user for expressing their preferences.

Homepage proposals

  • Real time personalization of Home Page feed
  • Active removal of unwanted items
    (a repeat request from our users)
  • Continuous improvement of feed, in response to
    not currently having a decent standalone algorithm

ShareTw.Fb.Pin.
...

This is a unique website which will require a more modern browser to work!

Please upgrade today!