Multifeed

Go to prototype

Design Challenge:

How can an interactive application reduce the complexity of feed management to such an extent that employees of Dutch micro enterprises can offer and manage products themselves on various marketplaces, without having the technical knowledge?

Marketplaces like Amazon, Ebay and the dutch company Bol.com have become very popular over the years. Consumers like to buy their products through these platforms, because of several advantages like competitive pricing and fast delivery. Trading companies that follow this trend know that it’s very beneficial to sell their products through these platforms in addition to their own webshop. For smaller companies this is either too expensive or it takes too much time and effort.

Since there was not yet an application that was suitable for smaller companies, I started the (graduation) project in collaboration with Prodos. Through interviews and online research I found out what is really important for smaller companies. Below you can read about all the important steps I took while designing the application Multifeed.

Bootcamp

While talking with Prodos about this topic, I learned that there are different ways in which a customer can offer their products on marketplaces and what the disadvantages are for micro entrepreneurs.

The different methods:

  • Method 1

    The micro entrepreneur themself uses a product feed management tool.

    A graphic showing the manual workflow
    Disadvantages
    • Technical knowledge is required.
    • It takes a lot of valuable time to learn how to use the application.
    • If the micro entrepreneur has no experience with such a tool, it entails certain risks such as incorrect information on the marketplace or continuing to pay for the tool without getting the desired results.

  • Method 2

    The micro entrepreneur pays an internet marketing agency to get their products on the desired marketplaces.

    A graphic describing the outsourcing method
    Disadvantages
    • For a micro entrepreneur this is very expensive!

  • Method 3

    The micro entrepreneur puts every product on the marketplace manually.

    A graphic that describes the workflow for trying a product feed management tool

    Disadvantages

    • It takes a lot more time to set up. While time is very important to micro entrepreneurs.
    • When information about a product needs to be changed, the entrepreneur has to do this separately for each channel.

Research

To find out whether these claims were correct, I decided to do some field research. First I interviewed several candidates from the target group. In addition I ran a little test in which I let the micro entrepreneurs work with a product feed management tool to see what problems they would encounter.

Interviews

In order to get a better idea of who exactly the micro entrepreneur is, I conducted a number of interviews with various micro entrepreneurs. Several things I have discovered during the interviews is shown schematically in the persona below.

Persona

Dutch micro entrepeneurs

The persona of a micro entrepeneur

User Requirements:

  • It should be possible to place products on different marketplaces.
  • It should be possible to manage thousands of products.
  • It should be possible to view and manage incoming orders.
  • The application must work on desktop / laptop.
  • Learning the application shouldn't take too much time and effort.
  • The application must be able to generate time or money.

User Tests

For these tests I set up a dummy webshop with a number of products in it. The micro entrepreneurs were then given the task of linking this webshop with the Product feed management tool. After linking the webshop, the micro entrepreneurs were given the task of forwarding the products to a marketplace. To visually show how a micro entrepreneur gets started with a product feed management tool, I created the Customer Journey below.

Customer Journey

Dutch micro entrepeneur tries to use a product feed management tool.

Usability Requirements:

  • The application should use understandable language.
  • It must be clear what must be done at a particular step.
  • The application must let the user know where they are in the process.
  • The application must have a simple interface.
  • The application must provide ongoing support and guidance.

Ideation

I held a brainstorming session together with two experts from Prodos. Here we let go of the usability requirements so we wouldn't limit ourselves in gaining ideas.

We eventually came up with a number of different solutions. These were not completely clear yet, so we started discussing them with each other. Then we found out that some of our individually conceived ideas could be pieced together into a better solution. This ultimately resulted in 3 concepts.

  • Concept 1

    Excel Sheet Generator.

    A sketched out idea of using an excel sheet generator

    This is a web application where the user only indicates on which marketplace they want to sell their products and which category of products they are. The application then generates an Excel sheet that the user can download. The user can then put all of their product data in here. When the user has done this, they can log in to the marketplace to upload this data.

  • Concept 2

    Webshop plugin.

    A sketched out idea of using a webshop plugin

    The user installs a plugin for their webshop. From this plugin, a link with the webshop is automatically made. The user can then choose which marketplace they want to forward their products to. By setting a number of rules, the user can specify exactly which products they want to send to the marketplace. Finally, the user can still control which products they are about to send to the marketplace. If this is not the desired result, the user can still go back to change the settings.

  • Concept 3

    Redesign of a product feed management tool.

    A sketched out idea of using a easy to use product feed management tool

    A product feed management tool that focuses on the micro entrepreneur who wants to decide for themselves which products to send to which marketplace and also wants to manage this themselves. Rather than asking difficult questions without helping the user, this tool will provide full support and guidance within the interface.

Harris Profile

In the end I opted for the third concept: Doing a redesign on a product feed management tool. I made this decision by weighing all conceived concepts against one another with the help of a Harris profile.

A haris profile that weighs the advantages and disadvantages against each other

Product Development

Sketches

When making the sketches, I mainly looked at the different design challenges at hand. I listed these challenges as questions that start with “how can the user…”. I then answered each question by looking for a functional design pattern or by sketching something myself.

  • Dashboard

    How can the application provide useful information to the user on the homescreen?

    Low fidelity wireframe of a dashboard

  • Instruction video

    How can you tell a user where to generate their API key?

    Low fidelity wireframe of an explanation video

  • Multiple steps

    How can you tell a user where to generate his API key?

    Low fidelity wireframe of a list with steps the user has to go through

  • Linking data by clicking on the fields

    How can you make it easy for a user to link fields from the webshop to those from the marketplace?

    Low fidelity wireframe of how data gets linked to the marketplace fields by clicking on the fields

  • Linking data by dragging the fields

    How can you make it easy for a user to link fields from the webshop to those from the marketplace?

    Low fidelity wireframe of how data gets linked to the webshop fields by dragging the webshop fields to the corresponding marketplace fields

Hi-Fi Wireframes

By answering the questions above, I explored different ways of interaction and then selected the best one for redesigning the product feed management tools. I then made Hi-Fi wire frames with this.

  • Dashboard

    High fidelity wireframe of a dashboard on the homescreen

  • Marketplace connections

    High fidelity wireframe of a screen where the user can set add a new marketplace to make a connection with

  • Wizard

    Select a webshop to connect to Multifeed.

    High fidelity wireframe of a screen to select a webshop

  • Wizard

    Link fields from the webshop with Multifeed.

    High fidelity wireframe of a screen where the user can map their product fields to the marketplace product fields

  • Wizard

    Select a marketplace to sell products from the webshop on.

    High fidelity wireframe of a screen to select a marketplace

  • Wizard

    Link the categories from the webshop with categories on the marketplace.

    High fidelity wireframe of a screen where the user can map their categories to the marketplace categories

  • Wizard

    Make a connection with the marketplaces API. On the left side of this screen are instructions the user can follow.

    High fidelity wireframe of a step to set up an API connection

  • Wizard

    Link category-specific fields with marketplace.

    High fidelity wireframe of a screen where the user can map their product fields to the marketplace category specific product fields

Determining the visual style

First, I wanted to put together a color palette for the application. For this I have tried several things. In the end I was satisfied with the last design.

  • First design

    The homescreen's first design

  • First design iteration

    The homescreen's first design iteration

  • Second design iteration

    The homescreen's second design iteration

  • Final design

    The homescreen's final design

While designing the first screen, I already thought about a name and a logo for the application. The name would be “Multifeed”, which means “Multiple Product Feeds”

To fill in empty spaces within the interface I designed the illustration below.

A decorative image to use in Multifeed's user interface

Illustration

More Interface Designs

In the end I designed more screens based on the dashboard design.

  • Login screen

    The login screen

  • Webshop screen

    The empty state.

    The empty state of the webshop overview screen

  • Webshop screen

    With the webshop connected.

    The webshop screen where a webshop is connected

  • Link Fields

    Link fields from the webshop with Multifeed.

    The screen to link product fields

  • Wizard

    Select a marketplace to sell products from the webshop on.

    The screen to select a marketplace

  • Wizard

    Make a connection with the marketplaces API. On the left side of this screen are instructions the user can follow.

    The screen to make an API connection

  • Rules

    The empty state.

    The empty state of the screen where rules are listed and can be added

  • Adding a rule

    The screen to add a rule

  • Simple rule

    The screen to add a simple rule

  • Advanced rule

    The screen to add an advanced rule

  • List of products

    This list shows the products that are about to be send to the marketplace.

    The screen with all the products listed

This video is also available on Youtube

In the end I made multiple clickable prototypes and tested them with Dutch micro entrepreneurs. I have used the results of the user tests to continuously improve the prototype.

A test candidate trying out the paper prototype

Paper prototype testing

After testing the last prototype, the Micro entrepreneurs were very enthusiastic about the ease of the application. Here and there there were still some points for improvement, but in general the users understand what is expected of them and each candidate is sure that they can offer products from their webshop on different marketplaces without the help of an internet marketing agency.

Go to prototype