Al Taylor | Flippa Listing Builder

Flippa is the leading online marketplace for buying and selling websites, apps and any form of digital real estate. I lead the design for Flippa’s new Listing Builder product: a dynamic new way for sellers to create and launch a listing on the platform.

A freeform editor for creating listings

The Listing Builder is a freeform editor which allows sellers to create and launch a listing on Flippa exactly how buyers will see it. Sellers import verified data from any platform they use (e.g. Stripe, Shopify), then populate an empty listing page with their business information such as financials, traffic, social media accounts, platform data and more. Sellers then set parameters such as pricing and auction settings before launching their listing on the marketplace.

Once the listing is launched, the Listing Builder then acts as the seller's main hub for managing their live listing, allowing them to manage bids, accept offers, and add or edit any data that is required.

Project background

Since its inception 10 years ago, Flippa has been the number one place to list online businesses for sale and has seen great success, boasting 1.6 million registered users. While the business has been going steady, growth is now a key objective for Flippa, and for this to happen, the number of listings launched on the platform must greatly increase. To achieve this outcome, we created a new 'create listing' user flow (AKA the Listing Builder) and a contemporary new listing page, replacing the currently outdated version. The objectives for the project were as follows:

Achieve the outcome of boosting the number of listings launched on Flippa
Create an intuitive onboarding flow, making it easier for sellers to create and launch listings
Allow sellers to import verified data from third-party platforms such as Stripe, Google Analytics, WooCommerce and more
Reduce the number of sellers dropping out of the current create listing user flow
Improve the seller experience of managing live listings

View some key screens below

The process

I was the lead Product Designer on the project, conducting user research, rapid prototyping, user testing and completing the final visual designs. The 6-month project was Agile, fast-moving and highly collaborative, with weekly sessions with the whole product development team rather than any big handovers.

We followed a design thinking process, incorporating new user research at all stages of the process. Our assumptions, designs and the live build were tested as early and often as possible.

The project was comprised of the following stages:

User research
Ideation
Prototyping and usability testing two MVP concepts
Full interaction & visual design for chosen concept
Usability testing the build as early as possible (MVP)
Final design alterations and launch

1) User research

Survey & User interviews

We sent a Google Forms survey to a targeted group of users who had recently launched a listing using the current listing onboarding flow and interviewed five Flippa users over Zoom about their experiences. Interestingly, the results were generally positive, with users finding the existing process smooth and intuitive. Analytics, however, told a different story.

To learn about users experiences on the listing page, we ran a HotJar poll on all listing pages on Flippa. We set the poll to show after 30 seconds to target engaged users. Among other smaller suggestions, a noticeable correlation in the results suggested that users required a larger font size and they wanted a clearer way to access the URL of the business they are looking at.

Analytics

Despite positive qualitative feedback, our analytics platform of choice Mixpanel showed us the numbers showed that a lot of users were dropping off the create listing flow and the number of completed listings was in reality very low.

Sellers were half completing listings, then never returning to complete them or starting fresh. We had to make it easier for sellers to jump back into a semi-complete listing.

2) Ideation

We spent three weeks exploring ideas as a team. I created a vast number of rough ideas and sketches to bring to collaborative sessions where we explored ideas further and narrowed the ideas into more fully-formed concepts. The image below is just a subject of the number of sketches and lo-fi artboards created.

3) Prototyping and testing two core concepts

We narrowed the ideas from the exploration phase into two core concepts and processed them into mid-fidelity clickable prototypes.

Prototype #1 — Linear flow

The first design is a linear user flow that guides users through the listing creation process. A persistent nav on the left-hand side helps users understand which stage they are at in the process and also lets them easily return to a previous screen or skip ahead (within certain sections) if they need to. The design also features a right-hand section providing relevant tips and guidance for each section.

We learnt from user interviews that users often create a listing over several sessions and complete the process in order of what info they have ready — the sidebar helps support this user behaviour.

Prototype #2 — Freeform approach

The second design is a non-linear editor which shows the user an empty listing page and allows them to populate it section by section, visualising how the final listing page will look in the buyer view at all times. This method was often described as the "paint-by-numbers" approach.

What we learned

The non-linear editing approach to option two was a clear winner. The ability to see the listing develop in real-time with the data added always present resonated well with sellers. We learned that listing a business online can be a nerve-wracking process — sellers are conscious that the data they've could be incorrect. The freeform approach helps assuage these concerns.

Finalising the design of our chosen concept

With a design direction chosen I finalised the design for the entire user flow. Following this, we worked in sprints to further refine then develop each feature.

Each sprint began with a collaborative session, reviewing the design work for the upcoming feature and making any refinements necessary before the development. We constantly tested our assumptions based on new learnings and made sure we were building the right thing.

Usability testing

We tested as early as possible, with interesting results

As soon as the development of the Listing Builder reached an MVP state we performed usability testing with five users.

Interestingly results were a little different to testing the clickable prototype. In the first round of testing, users found a clear connection between the editor view and the preview mode, they felt like they were editing the live listing.

In the build, however, this was less clear. Users still appreciated the freeform nature of the Listing Builder, but they weren't visualising it as an editable final listing page.

This left us with a choice. Do we try and make the editor appear more like the listing page, or find a way of using this discovery to our advantage?

We decided that now that users weren't seeing the editor as a listing page, we could re-arrange the visual hierarchy of the editor into a more logical order for creating a listing, rather than emulating the order of the live page. We also used the opportunity to sprinkle in more tips and guides above each section, making the listing experience even more intuitive.

Outcome

This major project greatly increased the platforms capabilities and user experience quality, paving the way for future OKRs and increasing the amount of listings launched by 12%. The ability to import live data from third party platforms into sellers listings has also increased trust with the buyers.

Flippa Listing Builder

A new experience for selling online businesses

Flippa

Create listing flow