Designing Zipsale – a B2B SAAS web app for second-hand sellers

Zipsale is an ideal software for second-hand sellers who want to make the most of their vintage items. This cross-listing platform helps them to quickly upload their items to various marketplaces, such as Shopify, Etsy, Depop, and Vinted, which saves  them time and effort. As the founding designer, I was responsible for designing the initial version of the app and its landing page.

Overview

In my role as the founding designer of Zipsale, a B2B SAAS web app for second-hand sellers, I set out to revamp the underperforming landing page and improve the app's user experience. Through research and iterative design, we successfully transformed the landing page and increased the sign upconversion rate from 1% to an impressive 5% within a month.

We also prioritised mobile interfaces and built a comprehensive design component library for consistency. Our website design maintained a minimalistic style while showcasing the app's features and target audience. This journey left us inspired by the transformation we achieved.

We increased the sign up conversion rate from 1% to an impressive 5% within a month.

Over a span of 6 months, our team, which included me as the Senior Product Designer, a Junior Product Designer, a CTO and a Founder worked together on the project.

Some of the reselling platforms

Problem

When I joined Zipsale, one of the major issues we faced was an underperforming landing page. It was basic and unclear, causing 80% of visitors to leave immediately and only about 1% of them to sign up. Our challenge was to transform this landing page. It needed to not only mirror our product more closely but also clearly communicate its purpose right on the homepage. Our objective was to enhance user engagement and boost the sign-up rate to ideally 5%.

The landing page was basic and unclear, causing 80% of visitors to leave immediately and only about 1% of them to sign up

The other major hurdle was the app itself. It was nearly non-existent, with only a very basic and ineffective design that led to a poor user experience. The user interface was not intuitive, making navigation and utilisation of features a challenge for users. Our cross-posting feature particularly needed attention. We wanted to design an interface that was user-friendly, where users could view a list of their ads at a glance and easily gauge their performance on different platforms. Whether an ad was doing well, required a price change, or needed to be taken off sale, we wanted all this information to be readily available and understandable to our users.

The other major hurdle was the app itself. It was nearly non-existent, with only a very basic and ineffective design

Some of the rivals UI

Rivals comparison

Research and scoping

In the initial stages, our focus was on the app. To better understand our task, we analysed our competitors. Our research revealed two main challenges: showing ad statuses from many sites effectively, and making bulk actions for ads. We understood it was complex to show ad statuses across different sites due to unique fields on each platform.

With these specific interaction points in mind, we decided to bypass the creation of wireframes and move directly into screen design, planning for multiple iterations.

Our research revealed two main challenges: showing ad statuses from many sites effectively, and making bulk actions for ads

Some of the app screens

App design

We worked in steps, often discussing with the CTO and founder. Our big win was creating a table where each item had its own controls, letting users start or stop items on any platform. We also made a form for adding items, where users could put in extra details needed for different platforms. In the end, we created an app that was simple but full of useful info.

Our big win was creating a table where each item had its own controls, letting users start or stop items on any platform

Some of the app mobile screens

Mobile UI/UX

Once the desktop layouts were finalised, I turned my attention to the mobile interfaces. Given that mobile devices accounted for approximately 70% of our traffic, we prioritised crafting a mobile layout from the outset. We understood the importance of not neglecting this significant user base.

The testing confirmed that our newly proposed navigation design - with distinct tabs like "search", "offers", and "chat" - resonated well with users

The testing confirmed that our newly proposed navigation design - with distinct tabs like "search", "offers", and "chat" - resonated well with users. They found it logical and intuitive, enabling them to effortlessly find what they needed within the app. This key finding significantly informed our final design decisions.

Components overview

Components

In the final phase of the app design, I created a library of design components. The library was a valuable resource that ensured consistency. By standardising components like buttons, icons, typography, and navigation, we achieved a unified and polished look. This library was also helpful for future updates, making it easy to implement design changes and maintain a consistent user experience.

Visual discovery workshop

Some of the selected references

Visual discovery

Once the application development was finished, we shifted our focus to designing the website. To kick off the project, I conducted an interview with the Founder to understand the key ideas we wanted the app to convey. We agreed on three concepts: minimal, vintage, and lively.

Next, I created moodboards for each concept and organised a workshop. During the workshop, we discussed the references and determined which style would be the best fit.

After careful consideration, we decided to maintain the minimal style of the application while infusing it with character and preserving the existing color scheme. This approach ensured consistency and coherence between the app and the website.

We decided to maintain the minimal style of the application while infusing it with character and preserving the existing color scheme

Navigation scheme

Wireframes

Wireframes

Following that, we proceeded to create a site map and define the desired content for the website. Our primary objective was to provide comprehensive information about the product on the website. We aimed to showcase its features, functionality, and the target audience it would benefit.

Final designs

Final thoughts

After multiple iterations, we settled on a minimalistic concept that utilised orange as an accent color and incorporated elements from the product's interface.

First, the redesigned version of the application had been launched, followed by the landing page. It was a success. Within a month of launching the new landing page, the sign up conversion rate grew from 1% to 5%.

Within a month of launching the new landing page, the sign up conversion rate grew from 1% to 5%.