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 about defining your audience, creating a product roadmap and refining user journeys.
The founders I work with have big ideas for their marketplace, but they struggle to explain their vision to developers. They often come to me when they feel “stuck” and need help turning their idea to a live marketplace.
Here I share my process for designing a marketplace.
1. User flow diagram
A user flow diagram or customer journey map shows the path each user takes when using your product. It explains the process of how a supplier adds a listing and how customers can book with a supplier.
When I work with founders I start by asking them to simply describe the steps in words. I ask them questions as we go, making sure to capture the granular details. We focus on one journey at a time.
Here’s a simple user flow diagram for a marketplace.
2. Transaction flow diagram
A transaction flow diagram shows how individuals or entities make and receive payments.
In a marketplace processing transactions, we usually take the payment from the customer before the event and we pay the suppliers afterwards. So it's important to document the "triggers" - e.g. Suppliers will receive automatic payment 3 days after completing their booking.
Here’s how I would design the transaction flow diagram for a marketplace.
I like to use diagrams.net to design the transaction flow but you could also use Whimsical.
3. Input fields
Next, you should consider what information you need to collect from your users at each stage of their journey.
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?
I like to document these forms in an Airtable document. It makes it much easier and quicker for your developers to understand your requirements.
Here’s an example of how I'd document the input fields for a marketplace.
4. Transactional Notifications
Transaction notifications are messages you send to users during different stages of a transaction, like emails, SMS, or push notifications.
You might notify a supplier when they get a new booking, or you may notify a customer to review their supplier.
When designing your transaction notifications, you’ll need to decide what event triggers each notification and the content of each notification.
Emails do not need to be pretty or overly designed. 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.
Here’s an example of a booking confirmation email I would design for a marketplace.
5. Look and feel
You’ll need to think about how you want your marketplace to look. This includes colours, fonts and images.
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 a customer of an experiences 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?
Look at the websites of your competitors and other marketplaces outside of your industry 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?
Take screenshots of everything you like and put it into a moodboard. This will give you inspiration for when you come to design the look and feel of your marketplace.
Here is example of a moodboard:
Finally, choose a colour palette and font(s). If you need some inspiration for colour pallets, I recommend checking out Coolors. Coolors suggests colour combos that go together and save you time from creating your own.
I recommend that you stick to just three colours:
- Primary colour: This should reflect your brand personality (e.g. yellow = positive)
- Secondary colour: This colour should contrast your primary colour
- Neutral colour: This colour should complement the primary and secondary
Use Google Fonts to see how different fonts look when you type in words and sentences.
6. Product roadmap
Next, I’d create a product roadmap. A product roadmap shows what you want to work on now and in the future. It includes features and tasks. 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 future features)
Many founders I work with want to release a product with lots of fancy and complicated features. What they don’t realise is that their vision could take years to build.
Don't spend years working alone on a product. Later, you may realise that the market has changed. Your target audience may no longer be interested. Instead, you want to launch fast, get feedback from your users and adjust your priorities accordingly.
The very first version of your marketplace, should be lean, simple and inexpensive to build. What are the absolute minimum features you can go-live with? This will become your MVP (minimum viable product).
Here's how I would create a product roadmap:
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 of your product strategy. Reassess it often. Listen to your users and find out what’s working for them and what isn't. Some features you thought could wait become important, while others you thought were crucial become outdated.
7. Wireframes
Wireframes are the blue print of your marketplace. You can draw wireframes by hand or digitally using programs like Figma.
If you’re not familiar with design software then you’ll find that there is quite a steep learning curve. To save time and reduce stress, I suggest hiring a freelance UX designer to create wireframes for you.
If you want pictures for your website, go to Unsplash or Canva. They have many free images, like for the homepage.
If you’re happy to pay for images (and I recommend that you do) then checkout iStock and Adobe Stock. They usually have a wider range of high-quality photos than the free sites.
Once the wireframes are complete, I give the developers access to my Figma file ready to estimate the work.
Final thoughts
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.
You can do it yourself, but without design experience, it may take time to understand everything.
If you have the money, hire a freelance UX designer to do these tasks for you. They’ll take ownership of all these outputs and will make sure you progress through the steps at a good pace.
A freelance designer will also speed up the process and will ensure you have clearer documents for your developers.
