The Design Process for Marketplaces in 10 steps

The process of designing a marketplace can be enjoyable – now is the chance to think outside the box and bring your idea to reality! But, it’s not only about making beautiful wireframes (screen designs). There’s more to it than that. It’s more about defining your customer base, creating a plan and refining user experiences.

This is why even if you’re not from a background in design it can be very difficult. People who are the founders of my company typically have a big and exciting concept for their business but don’t know how to communicate their vision to developers. They typically seek me out when they are “stuck” and need help making their vision live market.

So I thought I would show you the 10 steps of the design process that I employ for all my customers to help them design their market.

To demonstrate the design process I use I will demonstrate an imaginary marketplace for online cooking classes. I will also outline the steps I take when designing how it works, as well as the way it appears.

1. Diagram of the flow of users

The first step I’d consider in the process of designing is to capture the flow of users. A flow diagram for users depicts the steps that a user follows while using the product. It provides all the steps of each experience, such as the process of creating an online listing and how users can make reservations through a provider.

When I am working with founders, they are asked to speak about how they envision the website functioning at a high level. This provides me with a solid idea of the major routes we’ll need to think of. Then, we will focus on each of the user journeys in turn and document the steps in great detail.

Here’s an easy flow diagram of the user for our marketplace for cooking classes online within Flow app.

2. Diagram of the flow of transactions

A flow diagram of transactions outlines the process by which the payments are processed and received. It’s a crucial component of the design process, and it is essential to discuss the details together with the team of developers. They will provide feedback about what’s possible and provide suggestions regarding how to make the construction process (making it faster and less expensive).

Marketplaces typically take cash upfront from clients and do not make payments to vendors until the day after an event. Therefore, it is important to think about whether you require an escrow or an outside party to store funds before the transfer from one person to the other.

When customers book bookings just two weeks days in advance (such for online classes), Stripe Connect provides a fantastic solution that lets you delay the payment to the vendor for up to 90 days. This means that you get rid of a complex escrow. However, this wouldn’t be a good solution for a market where people book items a long time ahead of time (such as a wedding catering service which could be booked up to a year ahead of time). In this instance, you’ll have to utilize an escrow company like trustly.

My advice is to keep things as straightforward as possible. Try to not use escrows unless essential. Not only can escrows cause an increase in development work (added time and expense) You’ll also have to ensure you’re completely compliant with FCA rules.

3. Input fields

Then, you must think about what data you will require from your customers at each step on their path. For instance when a vendor creates an online listing, what information are they required to fill out? Are they obligatory or non-necessary? Do they need to have placeholder text? What are the validating rules applicable to each type of field (e.g. “must be more than 8 characters”)

When I am working with founders, I prefer to record each of these areas and their regulations on an Airtable document. I also break them down into different categories within the marketplace (e.g. Sign Up and Create a Listing). A form like this will make it much easier (and faster) for your developers to get your requirements understood.

4. Transactional Notifications

Transaction notifications are the notifications (e.g. emails, SMS and push notifications) which you have to notify your customers at different phases of the transaction process. For instance, you may be required to send a vendor an email each time they get an order. It is also possible to give a customer an email after the event asking the company to look over the event.

In designing your transaction alerts it is important to consider the trigger event for each notification, as well as the contents for each one.

I suggest that founders begin with email notifications as they are easy to create and develop. They should not be stunning or well constructed. Keep in mind that they are notifications for transactions and the goal is to inform users of what transpired and what follow up on. To do this, I make sure to keep them simple with all “next steps” clearly highlighted.

In the beginning, when I was running my marketplace I decided to implement transactions via SMS along with emails about six months after we launched. We discovered that SMS enticed users to take taking action (e.g. responding to booking requests) more effectively than email which helped keep transactions moving along and also increase the conversion rate. I think this is because SMS messages cut across the gargantuan noises of notification better than an email. However, before going through the hassle of building SMS-based notifications, I would suggest you test the marketplace few days to determine what kind of notifications will be most beneficial for your customers.

5. Feel and look

In the next step, you’ll have to think about the design and the feeling of your online marketplace. This will include colors as well as fronts, images, and the layout of your websites. To begin I’ll ask founders to define their ideal customers: who they are and what are they doing, what are their interests and what do they not like. Understanding the target audience that you’re creating for is crucial.

This is an illustration of how I would describe the ideal buyer for our cooking class market:

• Young Professional
• Aged 25-35
• In the context of a relationship
• Lives in London
• Loves spending time with friends
• Loves to try new things
• Looks for unique gifts

Then I’ll ask my clients to think of five adjectives to define the kind of personality they wish their customers to display. For instance, is it a fun place or serious? Is it loud or soft?

6. Product roadmap

In the next step, I’d develop a roadmap for the product. A product roadmap provides an overview of the things you’d like to complete immediately and the things you’re planning to do shortly. I prefer to categorize them into categories like:

• What are we working on currently?
• What do we intend to do over the next 3 to 6 months?
• What do we intend to tackle over the next 6 to 12 months?

Future-oriented ideas (a parking lot to accommodate ideas for features)

Many of the founders I have worked with envision creating a product full of extremely sophisticated (and complicated) features. They don’t realize that their idea could take years to create. 

You don’t want to be spending hours in a secluded area, creating an idea in a space and then discover there’s a shift in the marketplace and the product isn’t popular with your intended market. Instead, you should start quickly, receive feedback from your customers and make adjustments to your plans in line with the feedback.

The first release of the marketplace (the version you launch) is supposed to be light, easy and affordable to create. Think about what are the minimum features that you can go live with. This is your MVP (minimum feasible product).

7. Wireframes

Wireframes are drawings on each page in your marketplace. Wireframes can be drawn by hand using pencil and paper, or they can be drawn digitally with specialized programs like Sketch or Figma.

If I’m creating an entirely custom-built market (rather instead of using templates like Sharetribe) I’ll always begin with sketched sketches that I draw myself. I do this since it’s very quick and I don’t need to consider each page in great detail – at this point, I’m just thinking about the type of information we want to present and the way we could present it. I’ll then create wireframes of low-fidelity (grey-scale) using a program such as Balsamiq to provide a further level of detail for the pages. Then, I’ll use Sketch or Figma to design high-quality wireframes (in full colour) to finish the designs on the screen.

8. Prototype

Sometimes developers may find it useful when you create a clickable model to help communicate the structure of your market and how it will function.

It’s a good thing that you can do this with Figma. Add “hotspots” to elements that can be clicked (such as buttons) and then link them to the screen they should be navigating to. In no time you’ll have a stunning clicking prototype, which shows how your marketplace functions!

9. Zeplin

When it’s time to turn over my designs to developers, I utilize an application known as Zeplin. I upload my designs by clicking an icon and invite developers to join the project. They can see every aspect they need to make the replica in the code. This includes font size, weight, and colour, the dimensions of images as well as margins, padding Hex codes (colours) as well as downloaded files (including images, icons and illustrations) at sizes 1x 2x, 3x and 1x. It’s awesome!

10. Kanban board

The last step is to include all the design-related tasks in Trello as the Kanban board. The simplest way to describe it is a Kanban board can be described as similar to a list of tasks with columns that include “To do”, “Doing” and “Done”, containing a card for each task. The tasks are moved in a row from right to left while working through them.

We utilize Kanban boards to share with all of our team members what they need to be doing, the advancement we’ve made and the person who needs to take action to take.

Final thoughts

As you can observe, the process of designing is extremely thorough. It takes lots of planning and thinking, however, it’s crucial to follow each step.

It’s possible to complete everything yourself, but If you do not have a background in design it may take some time to figure it all out. If you have the money to pay an outside UX designer to handle the work for you, I’d recommend you do this. They’ll own the outputs, and ensure that you move through each step at a fast speed. This can speed up the process and you’ll be left with a clearer vision of your MVP and more clear documents for your developers.