Designing a marketplace is fun — this is your time to get creative and bring your vision to life! However, it’s not just about creating beautiful wireframes (screen designs). It’s much more than that. It’s also about defining your audience, creating a product roadmap and refining user journeys.

For this reason, if you don’t come from a design background, the process can seem quite daunting. The founders I work with usually have a huge and exciting vision for their marketplace but they don’t know how to effectively communicate that vision with developers. They often come to me when they feel “stuck” and need help turning their idea to a live marketplace.

So I wanted to share the 10-step design process I use with all my clients to help you design your own marketplace.

To show you my design process in action, I’m going to use a fictitious marketplace for online cooking classes and detail the steps I would go through when designing how it works and how it looks.

1. User flow diagram

The first step I would take in the design process is to document the user flow. A user flow diagram shows the path each user takes when using your product. It details all of the steps in each user journey such as how a supplier creates a listing and how customers can make a booking with a supplier.

When I work with founders I ask them to talk me through how they see the site working at a very high level. This gives me a good idea of the key journeys we’ll need to design. We then focus on each user journey in turn, documenting the steps in detail.

Here’s a simple user flow diagram for our online cooking class marketplace in FlowMapp.

You can duplicate this FlowMapp user flow diagram and use it as a template to get you started.

2. Transaction flow diagram

A transaction flow diagram documents how payments are made and received. It’s an important part of the design process and you will want to share and discuss this with your developers. They can provide input on what is possible and make recommendations on how to simplify the build (making it quicker and cheaper).

Marketplaces usually take money up-front from customers and don’t pay suppliers until after the event. Therefore, you should consider whether or not you need an escrow — using a third party to hold funds before they are transferred from one party to another.

Where customers make bookings only a week two in advance (such as an online class), Stripe Connect offers a great solution where you can simply delay the payout to the supplier by up to 90 days meaning you can avoid a complicated escrow. However, this would not work for a marketplace where customers book things far ahead (such as a wedding caterer who could be booked a year in advance). In this case, you’ll need to use an escrow service such as Trustly.

My recommendation is always to keep things as simple as you can try to avoid using escrows unless absolutely necessary. Not only do escrows create a lot more development work (added time and money), you’ll also need to make sure you are fully compliant with FCA regulations.

Here’s how I would design the transaction flow diagram for our simple cooking class marketplace.

I’ve created two simple transaction flow diagrams that you can copy and customise. One is for instant bookings (where booking are automatically accepted by a supplier) and one for approved bookings (where a booking request is reviewed and then approved/declined by a supplier).

I like to use diagrams.net to design the transaction flow but you could also use tools like Whimsical or Lucidchart.

3. Input fields

Next, you should consider what information you need to collect from your users at each stage of their journey. For example, when a supplier creates a listing, what fields do you need them to complete? Are these fields mandatory or optional? Should they have any placeholder text? What are the validation rules for each field (e.g. “must be more than 8 characters”)?

When I work with founders, I like to document all of these fields and their rules in an Airtable document, and separate the tabs into different sections of the marketplace (e.g. Sign Up and Create a Listing). A document like this also makes it so much easier (and quicker) for you developers to understand your requirements.

Here are the input fields I would require for suppliers creating a listing on our cooking class marketplace:

Checkout this Airtable template I’ve created for recording all the fields you’ll need.

4. Transactional Notifications

Transaction notifications are notifications (e.g. email, SMS, push notifications) that you need to send your users at various stages of the transaction process. For example, you might want to send a supplier a notification each time they receive a new booking. You might also want to send a customer a notification after the event to ask them to review the supplier.

When designing your transaction notifications, you’ll need to decide what event triggers each notification and the content of each notification.

I recommend that founders start with email notifications as they are simple to design and build. These emails need to be super pretty or overly designed. Remember, they are transactional notifications and the aim is to inform the user what has happened and what they need to do next. For this reason, I try to keep them fairly plain with any “next steps” clearly highlighted.

When I had my own marketplace, we decided to introduce transactional SMS notifications in addition to emails around six months after launching. We found that SMS spurred our users into action (e.g. replying to a booking request) better than an email which in turn helped to keep transactions moving and increased our conversion rate. I suspect this is because an SMS cuts through the noise of notifications more so than an email. However, before you go to the effort of building SMS notifications, I recommend you run your marketplace for a while to get a feel for what type of notifications would be most helpful to your users.

Here’s an example of a booking confirmation email I would design for our cooking class marketplace.

I’ve created 15 email templates for the transaction notifications I would expect to see in a simple marketplace. You can get your own copy for free on Gumroad.

5. Look and feel — moodboards

Next up, you’ll need to think about the look and feel of your marketplace. This includes colours, fonts, images and layout of your pages. To get started, I ask founders to describe their ideal customer — who are they, what do they do, what do they like, what don’t they like. Getting to know the audience you are designing for is key.

This is an example of how I would describe the ideal customer for our cooking class marketplace:

• Young professional
• Aged 25–35
• In a relationship
• Lives in London
• Enjoys getting together with friends
• Likes trying new experiences
• Looks for unique gifts

Next, I ask my clients to list 5 adjectives to describe the personality that they want their marketplace to have. For example, is it fun or serious, is it loud or mellow?

Here are some example adjectives I came up with for our marketplace:

• Fun
• Trendy
• Confident
• Creative
• Authentic

Next, take a look at the websites of your competitors (direct and non-direct) and other marketplaces outside of your industry but targeting the same audience as you. What type of fonts, colours and images are they using? What tone of voice are they using in their copy? What do you like about their websites and what don’t you like?

You can also take a look at free stock image sites, such as Unsplash to see what type of imagery appeals to you.

Take screenshots of everything you like and put them into a moodboard. This will give you inspiration for when you come to design the look and feel of your marketplace.

This is an example of a moodboard I would create for our cooking class marketplace:

Finally, choose a colour palette and font(s). If you need some inspiration for colour pallets, I recommend checking out Coolors, Color Hunt or Colormind. They show you colour combinations that work well together and will save you a lot of time trying to come up with your own. Unless you have a design background, I recommend that you stick to just three colours:

1. Primary colour: This should reflect your brand personality (e.g. yellow = positive)
2. Secondary colour: This colour should contrast your primary colour
3. Neutral colour: This colour should complement the primary and secondary

For fonts, head to Google Fonts where you can type in words and sentences and compare how they look in different fonts. The best thing about it is, they’re free to download! My favourite free fonts are:

• Epilogue
• Raleway
• Sora

When deciding on colours and fonts, remember to keep referring back to the adjectives you described for your brand personality as well as what you think will appeal to your ideal audience.

For our cooking class marketplace, I chose:

6. Product roadmap

Next, I’d create a product roadmap. A product roadmap is a birds-eye view of the features and tasks you want to work on immediately and what you plan to work on in the future. I like to group them into the following categories:

• What we’re working on now
• What we plan to work on in the next 3–6 months
• What we plan to work on in the next 6–12 months
• Future ideas (a parking lot for aspirational features)

A lot of founders I work with have visions of launching a product that is bursting with very fancy (and complex) features. What they don’t realise is that their vision could take years to build. You don’t want to spend years locked away, building a product in a vacuum, only to find that the market has changed and your product is no longer of interest to your target audience. Instead, you want to launch fast, get feedback from your users and adjust your priorities accordingly.

The very first version of your marketplace (the one you go-live with), should be lean, simple and inexpensive to build. Ask yourself, what are the absolute minimum features you can go-live with? This will become your MVP (minimum viable product).

Let’s use our marketplace for online cooking classes to show how I would create a product roadmap:

Here’s a link to a template product roadmap I have created to help you prioritise your tasks. You can duplicate it and use it as a template to get you started.

I like to create product roadmaps in Trello but feel free to use whichever tool you prefer.

Your product roadmap should be a living, breathing document. Reassess it often. Listen to your users and find out what’s working for them and what isn’t. Some features that you thought could wait until later might quickly increase in priority, and other features you thought were super important, might become obsolete.

7. Wireframes

Wireframes are essentially drawings of every page of your marketplace. Wireframes can be hand-drawn using pen and paper or they can be digitally drawn using specialised programs such as Sketch and Figma.

If I am designing a custom-built marketplace (rather than using a template such as Sharetribe) then I’ll always start with hand-drawn sketches. I do this because it’s really quick and I don’t have to think about each page in too much detail — at this stage, I’m just brainstorming the type of information we need to display and how we might lay it out. I’ll then move into creating low-fidelity wireframes (grey-scale) in a tool like Balsamiq to add another level of detail to the page. Finally, I’ll move into Sketch or Figma to design high-fidelity wireframes (in full colour) to complete the screen designs.

If I’m working with a Sharetribe client, I often skip the hand-drawn sketches and low-fidelity wireframes and dive right in with the high-fidelity wireframes. This is because Sharetribe has done a lot of the thinking for us and have created a complete marketplace website with corresponding wireframes. In this case, I simply need to customise the wireframes for my client’s purposes. However, if the client wants to make significant changes to the template (such as adding new user journeys) then I’ll often go back to pen and paper.

You can download Sharetribe’s Sketch files from their Google Drive. In order to open the file, you’ll need to import it into Figma. I’ll show you how to do this in a future article.

If you’re building a custom marketplace from scratch, take a look at some “wireframe kits” (website templates) shared by the Figma community. You can download and customise them for your needs. It will give you a head start on your designs and could save you lots of time.

If you’re not familiar with design software then you’ll find that there is quite a steep learning curve, however, I’ll provide some easy tutorials on how to use Figma in a future article. If this doesn’t appeal to you, it could be a good idea to engage with a freelance UX designer to design the wireframes for you.

If you need any stock photos or illustrations for your website (maybe on the homepage for example), head over to Unsplash, Canva or Pexels where you can find lots of free images. If you’re happy to pay for images (I recommend that you do) then check out iStock and Adobe Stock. They usually have a wider range of high-quality photos than the free sites.

8. Prototype

Sometimes, developers find it helpful if you can create a clickable prototype to better communicate the structure of your marketplace and how it should work.

Thankfully, you can do this directly in Figma. Simply add “hotspots” to elements that are clickable (such as buttons) and link them to the screen that it should navigate to. Before you know it, you’ll have an awesome clickable prototype that clearly demonstrates how your marketplace works!

Again, I’ll provide instructions on how to do this in a future article but I wanted to mention it here for completeness.

9. Zeplin

When it’s time to hand over my designs to the developers, I use a tool called Zeplin. I simply upload the designs at the click of a button and invite the developers to the project. They are able to see every detail they need to build the exact replica in code. It includes the font size, weight and colour, the size of images, margins, padding, hex codes (colours) and downloaded assets (including icons, images and illustrations) at size 1x, 2x and 3x. It’s awesome!

This is how Zeplin looks:

Screenshot of Zeplin. Credit to: https://zeplin.io/why-zeplin

10. Kanban board

Finally, the very last stage is to add all of the design tasks to Trello in the form of a Kanban board. In its simplest form a Kanban board is a bit like a to do list — it has columns such as “To do”, “Doing” and “Done”, containing a card for each task. You move tasks from left to right as you work through them.

We use Kanban boards to communicate with the entire team what needs doing, how much progress we’ve made and who has an action to complete.

Here’s what a kanban board might look like for our cooking class marketplace:

The backlog column is everything that needs to be done in priority order.

When I’m ready for the developers to estimate a task, I move it to the “Please estimate” column. This signals the developers to provide an estimate for the task (e.g. $40). If they’re not clear on the design requirements, they’ll add a label saying “Clarification needed”. This is my prompt to provide more information or answer any questions they have.

Once they provide an estimate and I’m happy with the cost, I move the card to “In progress”. This signals to the developers that I’m ready for them to start development work on the task.

When they’ve built that feature, they will move the card to “Peer review test” for another developer to test the feature in the development environment. If they find any bugs it will go back to the “In progress” column for the bug to be fixed. If it passes testing, they will move the card to “Acceptance test”. This is a signal to me (or my client) to test the feature in the test environment.

Finally, once we’re all happy that there are no bugs, I will move the card to “Release to production” which means that we are happy for the feature to be released into the live environment.

Once it’s gone live, the developers will move the card to “Production verify” which signals me to do a final check in the production environment to make sure we haven’t broken anything!

Feel free to copy and duplicate the Trello template I made.

Final thoughts

As you can see, the design process is quite in-depth. It involves a lot of planning and thought but it’s important that you carry out every step.

It’s certainly possible to do all of this yourself but if you don’t have a design background, it could take you a while to figure everything out. If you can afford to hire a freelance UX designer to do these tasks for you, I would encourage you to do so. They’ll take ownership of all these outputs and will make sure you progress through the steps at a good pace. It will speed up the process and you should end up with a refined vision for your MVP and clearer documents to hand over to your developers.

Originally published on Marketplace Design Blog by Fiona MacDougall