Making Barter

The Problem

Framing the problems

With zero budget, new furniture was not an option, so we downloaded a few popular secondhand marketplace apps.  After searching and finding unique pieces of furniture for great deals, we realised none of the items were accessible for us to actually buy.  

The 7 problems we faced:

1.We don’t have a car to pick them up.

2.Renting a car is not an option, as we are too weak to carry heavy furniture.

3.Sellers don’t wait and items were sold before we could even organise an external delivery as an alternative option.

4.Smaller items are sometimes not worth the time it takes to travel across town.

5.The look, feel and usability of some of the most popular apps in Germany feel outdated. 

6.The apps were insect hotels, hosting so many bugs that it was hard to count them all.

7.Paying upfront is a no-go as you never know how real the person is until you meet them face-face.

I felt as though all secondhand marketplace apps available to me were mediocre. 

This is where the idea of Barter was born. 

The Design Process

How I formulated the steps of the project

Setting the high-level foundation of the task pathed the way that accelerated me through the project. Using the design thinking approach as my mantra, I moved through the following process to create my product:

🕵️‍♀️ Discovery (analysis of the problem space) 

• The Competitor Analysis
• Quantitative Research
• Qualitative Research
• Research Discoveries

🧠 Ideation (thinking up the solutions based on the analysis)

• User Stories
• MVP
• Sitemap and User Flow
• Pen and Paper Prototype
• Low Fidelity Wireframe
• Medium Fidelity Wireframe

🎨 Design Phase (Visualising the solution)

• High Fidelity Wireframe
• The UI

🦾 Delivery (implementation and testing of solutions)

• Usability Test and Wireframe Iterations
• The Final Barter Prototype

The following 15 steps detail the journey I went through to create Barter. It is my hope that these steps are clear enough for people to replicate and solve a problem they face.

The discovery phase covers everything from research, data collection, and data analysis.  This phase helped me to validate the assumed problems through a combination of UX research methods and business analysis frameworks. 

I separated the research into three steps to help me validate the problems:

1. Secondary Research: Heuristic Analysis of the market fit
2. Primary Research: Quantitative questionnaire
3. Primary Research: Qualitative Interviews

Competitor Market Analysis

Learning from the competition

As a first step, it was important to know who I am competing with, how competitors are different, and what are the opportunities? 

The Heuristic analysis comprises 10 principles of interactive design. They are broad principles and a great way to review the competitive landscape of apps. It allows for a quick and deep understanding of the UX and UI experience of the app. 

The result of the heuristic analysis highlighted the following results.

Insight #1: Lack of a design focus.

Insight #2: Apps have a tendency to prefer the buyer or the seller, never both. 

Insight #3: Content is either overwhelming (too much clutter) or underwhelming (too little and boring).

If you want to read the full Heuristic Analysis report you can find it below.

Personas 

The first assumptions on the users

Before starting my primary research I create personas to help me understand who I was going to target and what my initial hypothesis and assumptions are. This helped me down the line by asking the right questions in my primary research. I decided to focus my efforts on the seller persona. The reason for this is that the sellers must be my primary target user.

Why?

Because without sellers we cannot attract the buyers.

Quantitative Research

The survey

Surveys are a very impactful and cost-reducing way of gathering information in a fast and collected manner. A great resource that helped me to learn more was Norman Nielson’s article on quantitative research. As beneficial as surveys can be, they can have detrimental results and change the reality if questions are faulty or target the wrong users. To make sure that my results yield useful and valid information, I followed the structure below:

Establish your goals, hypothesis and questions.

Establish what you want to find out. Create hypotheses about what you think you will discover through your goals. Under each hypothesis write the questions that will answer the hypothesis.

Shipping the survey

Test out your survey with friends to make sure your questions are valid. After the feedback, share your survey with relevant users for better results.

The Hypothesis Validation

Group the answers under each hypothesis and confirm the validity of your hypothesis.

The survey results signified that many of my hypotheses were wrong. Users of marketplace apps mainly want to declutter and sell fast and for the price that they are asking for. They do not care deeply about the experience. Having said this, they still will refuse to sell to someone who is rude, meaning that the level of connection between the seller and buyer is still relevant.

The service design of the app is of high importance to a seller. They care about the time they spend talking to buyers, and the time they invest in shipping the item and uploading the item. A marketplace app is more than just a mobile interface.

The service before and after the sale is as important as a user-friendly interface. 

Qualitative Research

The interviews

Conducting quantitative interviews was a swift way to help me to validate the quantitative findings and dig deeper into the real human meanings behind the findings I gathered from the survey. As much as interviews can find deep-rooted answers, the answers can also become less reliable if the interviewer uses bad interviewing techniques. I was aware that I must be focused and make sure not to lead and interfere when the interviewee was giving an answer. It was important for me to remember it was not a discussion.

Teresa Torres’s book, The Continuous Discovery Habits was instrumental for my methodology in creating my questions, conducting the interviews, and summarising the qualitative results. I used two frameworks from Teresa to structure my interview process. For the beginning phase, I used the Ladder of Evidence. For synthesizing the results I used the Interview Map.

The ladder of evidence – Asking the right questions

I asked the interviewees to tell me stories. Stories evoke the interviewees’ memories. Real-life stories are one of the richest ways to uncover insights, edge cases, user stories, pain points, and motivations. 

The Interviews  – Documenting the interviews

I conducted 7 semi-structured interviews with users of marketplace apps. Through Linkedin, I recruited people within my network that use marketplace apps at least 1 time per month.

The interviews were conducted over zoom and coded using themes. I coded through Dovetail.com. Dovetail allowed me to easily categorize the stories of the interviewees into a variety of different segments. 

The Interview map – Synthesizing the results

I used Teresa Torres’s Interview map to synthesize the user interview. This helped me to distinguish between what I was trying to learn (the research goals) and what I was asking in the customer interview (the questions). It was also a great memory recap. To this day, I am able to glance over the interview map and remember the details of each individual interview. 

You can find the collection of synthesised interview transcripts and learnings below.

Research Discoveries 

From data collection to data analysis

Many of my hypotheses on the motivations of the sellers were wrong. Here is a summary of what I discovered from the survey results and user interviews:

These findings, and especially the finds that defunct my theories, were pivotal pieces of information to ensure that the product and MVP features are centered on the user’s needs and not contaminated by personal opinions.

User Stories 

Turning the research discoveries into product features

Through the findings, I was able to really grasp what works and what doesn’t work with current marketplace apps. This was my entry point for establishing user stories. The user stories created are rooted in the UX research data. 

This Youtube tutorial helped me to really define each story. It was important to make sure the stories stayed fixated in the findings of the UX research data. The risk of failing this would mean creating an end product that is based on needs that do not exist.

User stories were the turning point for evolving the problems into opportunities for Barter.

I categorised my user stories based on the product features. 

MVP

Prioritising features for an MVP launch of Barter.

As a result of my research, I had 12 product features. It was far too much to technically implement for an MVP. 

Now what?

In order to understand my MVP feature list, I compared the user stories to the four core problems listed in the section above. This comparison helped me know which user story was best suited for solving the pain points.  

1

The Motivation Solution

Less time talking and more selling through easy one-click solutions.

2

The Process Solution

Save time and sell fast through lean communication formats.

3

The Logistics Solution

Improve delivery issues for faster selling possibilities 

4

The Security Solution

Reduce the number of fake accounts

Through the process of eliminating the problems which were not part of the user’s core problems, I was able to reduce my MVP feature list. 

This established the goal of the MVP –  to support sellers with their biggest pain point. Selling items fast, hassle-free, and with security. 

This established the goal of the MVP.

To support sellers with their biggest pain point. Selling items fast, hassle-free, and with security. 

Sitemap and User Flow

Turning the lego blocks into a house

After establishing what main features I needed to build. I had to understand how I can build this. 

Creating the sitemap relieved a lot of pressure in this process. Visualising the foundations of the app helped to define the deliverables and the basic navigation of the app. This was an important starting point that saves a huge amount of time and therefore costs down the line. 

With the sitemap in place, I mapped out the user flow for my MVP of Barter. As established in the MVP step, the goal is to support the sellers to sell fast, hassle-free and with security. This meant that the user flow must contain four pivotal steps – Secure sign-up, Buy now feature, Delivery Option and a Smart Chat funtion.

The features are somewhat complex, long, and require a lot of back-end technicalities. It was important for me to understand the intricate details of how the Barter user flow would work on the surface, but also on the back-end.

To do this I combined the user flow with the Nielsen Norman Group Flowchart. This particular flowchart uses back-end processes and the user flow combined. Using this also had the benefit of understanding the content needed for each frame.

Pen and Paper Prototype

Sketching out the Barter app

At this stage, I was  1.5 months into the project. It was in mid-February. I hopped on a plane to escape the Berlin winter grey and went in search of the sun. As I found myself on a disconnected 3-hour plane journey to Lisbon, I took out my pen and paper and sketched away the first draft of Barter. 

I tried to keep in mind the idea of a minimalist/simple and hassle-free design. I already knew I wanted a minimalist design. So I did not want to overload the screens with content. 

Remembering my learnings from Step 1 (The Heuristic analysis) supported me a lot in this part of the process. I was able to understand what elements of the competitor products worked and which ones did not work. Some great websites I used for best UX /UI practice were mobbin and screenlane.

Using this knowledge,  I sketched alternative solutions for Barter.

Low Fidelity Wireframe

Digitalising and cleaning up the paper sketches

The next day in Lisbon I started to document my sketches as low-fidelity wireframes in Figma. The process went very fast and almost effortless. By lunchtime, I was done. 

As I ate my pastel de nata and drank my cappuccino, I realised how my sketches from the plane journey had simplified the process of creating my low-fi wireframes. I had gone through the basic UX process. The sketches were in my head as well as on paper. All I had to do was clean them up on Figma. 

I saved myself a day of work through my pen and paper sketches (and got to enjoy more of the city!)

Medium Fidelity wireframe

Bringing the Barter app to life through visual design and the discoveries I made

It was at this stage that I made the most of my learning. 

My low-fidelity frames were my architectural blueprints of the app. But as I started to understand the reality of the flow, I also started to add screens to my flow that would simplify the UX experience. 

In my low-fidelity blueprint, I had sketched out 2 screens for the delivery feature. Bringing this to life I realised that I needed 4 screens in order to make it user-friendly to hold all necessary information. This learning really taught me the difference of importance between low-fidelity and medium-fidelity wireframes. Adding the extra content in my medium-fidelity frames also added to my UX understanding of the US necessities.

Low-fidelity wireframes are your technical blueprint, but it will not necessarily mean a good UX experience. Medium-fidelity adds the human touch to the technical framework.  

High Fidelity Wireframe

Bringing the first wireframe prototype to life

After I integrated the visual branding into the medium-fidelity wireframe, I connected the frames to create a usable prototype of the Barter app.

The UI

A minimalist design that brings across the 30-sec elevator pitch.

In tandem with the medium-fidelity wireframe, I began creating the brand identity of Barter. Through my previous visual design experience, this was the most comfortable task for me during the project. 

The most crucial element taken into account at this point was the 30-second elevator pitch.

Barter is a second-hand marketplace app that provides people with first-rate service standards. We build seamless bridges between the marketplace ecosystem by connecting sellers and buyers with instant delivery options and a secure community you can trust.

The Logo

Playful, with smooth interactions and connections that are accessible to all.

The result of this goal is a logo whose font resembles shapes that are connected, playful and smooth. The letters/shapes can be used exchangeably to create an infinite amount of possible connected paths.  

This is a representation of what Barter stands for and what service Barter provides. 

The “dot”

The dot, also known as “Dotoa”, signifies the ecosystem of the Barter. The seller, buyer and delivery. Dotoa is a natural adventurer. She fits snuggly into the lines of Barter and likes to roll around on the quest to discover the unknown. 

Colour

Influencing the design with colour.

Buying second-hand can be overwhelming, the colour choices, especially in-app have to speak to the opposite. I used black and white to signify the straightforwardness of the service. Blue and green are used as secondary colours. Within the UI, I used green and blue to signify actions. Blue are actions that the user can take. Green is the definitive confirmation. 

Typography

Font choices and reasoning.

To counteract the elasticity and playfulness of the Barter logo, I used a font that is inspired by constructivist typefaces of the 1920s. The typeface is strong, geometric, confident, and classic. Due to the amount of freedom that the sellers and buyers have with creating their own content on the Barter marketplace app, it was important to have a font that is human, easy to read, and not overwhelming as a UI element.

Atomic Design

Brad Frost’s book on Atomic Design was a vital resource that I used to build out the style guide for Barter. I separated the different visual branding and UI  elements into their respective atoms and molecules. It was a very comprehensive way to organise and document the style guide. I found this format inspiring as it serves the purpose of being universally usable and recognisable.

Whilst creating the UI elements I focused on simplicity as the key. Barter is the representation of a hassle-free service that was once painstaking. The UI experience had to match this. 

A quote from the interviews helped to guide me:

“Marketplace apps just feel really old school. The interface is just really ugly. It’s the same as Amazon.”

The app experience of Barter should feel modern, reliable and a service that you want to interact with. To give this impression the buttons and icons had to be bold and strong, but not overwhelming. 

I used a 4px radius to take the rigidness out of a straight angle button, yet also avoid the soft feeling of a curved button.

The icons consist of a mixture between soft playful curves and sharp angles. The balance of both extremes brings the playfulness of the Barter logo into the UI experience, without feeling oppressive.

Staying true to my design process, I began to test my prototype in order to understand the UX and UI experience of Barter.

Usability Test and Wireframe Iterations

Going back to the users and testing the high-fidelity wireframe

I separated my test into different goals. The goals reflected different real-life scenarios in the app. 

Test Goals:

To establish the usability of Barter.

• Searching for an item
• Buying an item
• Ordering an item per delivery
• Login and sign up

I recruited 5 users of marketplace apps that tested the prototype. The tests were recorded using a phone. Each user had to play through the scenario and talk me through their actions. I documented the feedback in an excel sheet and synthesized the commonalities.

The results of the testing were very interesting. Each test yielded a new discovery. Interestingly most of the feedback was related to or fixable through alterations in the UX Content. This demonstrated the importance of content and perhaps an element that I was not consciously focused on in comparison to the visual design.

I took the feedback into account and redesigned and/or edited the content to improve its usability.

Prototype 

The final prototype of Barter.

With the changes made I finalised the last elements and connections of the Barter prototype. With the guidance of the 15 steps – from product discovery, finding solutions, testing, and iterating – I was able to create a full-functioning prototype of a marketplace app that addresses many pain points that users currently have with real-life products. 

Please reach out to me if you have any questions or comments. 

I would be happy to connect!