MIDDLE
The online person to person buy-sell platform where you don't cut out the middle man but instead add them in!
Safely buy and sell items locally by opting to leave the item in a designated location, have a verified MIDDLE courier deliver the item for you, or even just accompany you when you meet the buyer or seller.
Project Details
My Role: Project Designer
Tools: Figma and InVision
Methodology: Double Diamond Method shown to the right. Life happens and many times you will have to go back and forth between steps as you shall see.
Problem Space: Online buy-sell platforms often lack adequate safeguards, which makes them ripe for theft, violence, or worst case even death. According to one ProPublica report, there have been 13 murders of FB marketplace users since the beginning of the pandemic alone.
Why is it an issue?: People not knowing exactly who it is that they are dealing with makes it easier for criminals to prey on ill informed individuals.
Goal: To reduce the amount of crime that comes with in person marketplace transactions. To create an online buy sell platform that is as safe as possible.
Possible ways to alleviate problem?: To have people submit as much public information about themselves as possible so people will understand who they are meeting with. To include more people in transactions so more people are aware of what is going on.
Project Assumptions: "We believe customers have a need to safely sell things in person, the number one value a person wants to get from our product is safety, our primary competition in the marketplace will be Craigslist and FB Marketplace, and lastly our biggest risk will be people’s safety and the safety of their personal information."
Hypothesis Statement: Increased safeguards will reduce online buy-sell platform related crime. I will know this is true when I see online buy sell platform related crime rates in decline.
Target Demographic
The target demographic were middle aged men and women who frequently use buy-sell platforms. This group was chosen because they tend to be the largest group of users of these platforms.
A series of interviews were conducted with 3 persons of the target demographic in order to create a "persona". A persona is a fictional person representative of the target user audience. Highlights and themes from the user interviews are below. What is called an "Affinity Map" was used to synthesize this data and can also be seen below and to the right.
-
There was a lot of consensus of the answers in regard to location and backgrounds of participants.
-
Themes built of the responses from interviewees were the meeting place, participants of the meeting, and details of the meeting.
-
Although some more than others, everyone was motivated to make sure they would meet in a safe place and received enough information of who they were meeting with to assess the risk.
-
Some were actually willing to get into a fight while others had more pacifistic behavior.
-
Distance was also problematic for everyone after about 10 miles.
From the data I got back from the Affinity Map I was able to ask myself...
"How might we inform and protect users of online buy-sell platforms so they can be safe?"
Persona
Now that I had some data from real people I was able to create my fictional persona Eva Hernandez, a thrift shop owner frequently buying and selling items in her community. Featured are her Motivations, Behaviors, and paint points when it comes to her buying and selling through current buy-sell platforms.
Eva's Experience Map
Below is an "experience Map" which shows the highs and lows of how the task of selling items currently is for Eva before my solution is in place.
User Stories and Task Flow
I created 23 user stories and grouped them into categories of “searching”, “delivering” and “communicating”
I then chose the 10 user stories I felt most integral to the desired experience of the user persona and expanded upon them to get the core epic of selling an item without meeting the buyer. I then used this data to create the Task flow below. A task flow is a diagram that shows a series of steps that users complete for a specific task.
UI Inspiration Board
The User interface Inspiration used for the UI board mainly comes from everyday apps but can mainly be summed up as coming from competitors and just plain clever apps.
The simple login with the large logo for the espn fantasy football app, the carousel for the old itunes program, and the large seemingly endless feed of curated items FB marketplace uses for its app are just some of the Inspiration I got for my app.
Sketching
Before jumping into designing in Figma it is important to brainstorm and come up with initial sketches of the design.
These sketches are inspired by the UI inspiration board and after several iterations become ready for prototyping. To the left are the solutionary sketches finally settled on to proceed forward with designing.
Grayscale Wireframes
From my sketches I created "grayscale Wireframes". As you will see these had to be put to the test and refined until they were the best version of themselves. A group of 5 users tested the 1st iteration and another group of 5 users tested the revised version. All tests were conducted over zoom. The revisions made from the second group of user testing is what became the final grayscale wireframes ready for Hi-fidelity color and image injection.
Users gave a range of feedback but it could mostly be summarized into the following themes of: Bad placement, Bad Copy, and Bad font sizing. The following revisions were then made according to our Design Prioritization Matrix we made for the first session which like the name implies, helps chart out which features to prioritize.
Login
-
Remember me needs to be above login
-
Sign up is spelled wrong
-
Make forgot smaller and underlined
Home
-
Maybe should be may be
-
Scroll placed on right hand side
-
Give Nav icons more padding
-
Change “news” to scams
-
Make home icon to the left, chat on the right
My Listings
-
Add create first listing message
-
Add name and location for item
-
Add how many posted
Listing Details
-
Move “images” lower (caused failure of completion of task)
-
Increased size of the font
-
Scroll on the right side
-
Change method transfer to bullets
-
Lower submit listing button
Camera Screen
-
Change add to add
Photo
System Decision
-
Increase font size
Revised Protoype User Feedback
Luckily this time around there were much less revisions suggested to be made since they were mostly all addressed after the first round of testing. Again the following revisions were made this time according to our second Design Prioritization Matrix.
Login
-
Indicate purpose of app
Home
-
Change edit criteria to edit search criteria
-
Change “scams” to “Alerts”
My Listings
-
Lighten arrows indicating not usable yet
Listing Details
-
Move “images” lower (forgot to implement change and again caused failure of completion of task)
-
Make methods of transfer left aligned
Camera Screen
-
Change add to add
Photo
System Decision
-
Capitalize C in camera
Finally, what you will see next is the polished product after two rounds of user testing with 5 users each. It will be this version that will then move onto being updated with images and color.
Usability Testing and Sessions Output
An in depth report or "usability testing and sessions output report" was conducted going into the details of the user testing. Just below is a small preview of the report and includes the used test script and test session output charts. As you will see the exact same “images” issue (because it was missed in the 1st revisions) caused failures in both sessions.
“Hello and thank you for helping us test our contactless person to person marketplace app. As the name implies our app is geared towards tackling the issue of doctor wait times. As one of our testers I will be giving you the following persona and scenario to test as. You are a female thrift shop owner and are very busy. You constantly buy and sell things for your shop but can be fearful of not knowing who you are dealing with so you want to use the app to buy and sell without coming into contact with the other person. Please know that we are testing the app and not you and that there are no right or wrong answers. We will ask you to fulfill a series of tasks and record your responses as we move along. We value your feedback and encourage you to share all your thoughts.”
“What do you like and or dislike about the login screen?
“What do you like and or dislike about the Homescreen?”
“Do you have any further thoughts or suggestions?”
Brand Development
Part of brand development is coming up with colors and typography that represents the product you are creating.
As you will see I gained inspiration from my mood board to create a wordmark (font based logo), app Icon, and finally a full fidelity prototype.
Mood Board
The mood board largely draws inspiration from the past. The tone and feel of the inspiration was class and luxury. The “More, Than” formatted statements below were created to help conceptualize the inspiration sought after. To the right are some of the things that gave inspiration
More lavish than meager.
More retro than Modern.
More Smoky than Airy.
More old school than new school.
More vintage than contemporary.
More gloomy than Bright.
More relaxed than excited.
More opulent than stark.
Wordmark
Some initial ideas for the naming of the app was “MIDI”, “HUX”, and “Give-N-Go”. All the ideas catered to the central function of the app which is to supply a middleman or middle ground so buyers and sellers do not need to come into contact with one another.
MIDI sounded more like a musical app since a “MIDI” can refer to a piece of technology in creating music. HUX was short for Huckster which is a person who sells smalls things but the word over the years has come to have a negative connotation. Give-N-go just sounded too ambiguous.
The final name settled on was “Middle” in that it reflects the purpose of the app and also has a “nice ring to it”.
After some exploratory sketches what you see to the left are the final wordmarks in white on black and black on white formats. The font used is “Josefin Sans” which is an older looking font to go along with the vintage theme.
App Icon
Just like the wordmark, after some inital sketches here to the right is the final app Icon as created in Figma. It is three happy faces with two filling in the characteristics of the third. They eyes have that vintage cartoon look to them to again go along with the vintage theme.
The Icon is representative of a third person sitting in on the buying or selling of a product in the marketplace.
It was later updated to add yellow to the third happy face to inject more color into the design.
UI Library
To ensure consistency across the app, I then created a UI library. A UI library is basically the instruction manual on how to recreate the app in its entirety.
It includes everything the app contains annotated and measured so that other users other than the original creator can know how to manipulate the design and function of the app on their own.
To the left is a “bird’s eye view” of the UI Library for the MIddle Marketplace app.
It is divided into sections of “Atoms”, “Molecules”, “Organisms”, Templates, and Pages. It also includes the colors, typescale, and Spacing sections. Atomic Design is a methodology used for creating and breaking down a design system. Below are the five distinct levels.
Final Prototype
Below you see the final Hi fidelity prototype with all the color, imaging, and typography inserted.
This final prototype was made possible from all the brainstorming and inspiration boards as part of the design process.
A user riding his bicycle while thinking of possibly buying a motorcycle.
.png)
A user getting that successfully posted a bicycle for sale.
A user logging in to the homepage while on the go.
A user getting ready to enter in information about an item they are selling.
Marketing Site
In order to build publicity and drive traffic towards the downloading of the MIDDLE app I had to make what is called a “Responsive Marketing Site”.
A Responsive Marketing Site is a website to promote a product that can be viewed on different devices such as a desktop or mobile and adjusts accordingly to which device the site is being viewed on to allow for optimum functionality.
To the right is the marketing website in both desktop and mobile form with the mobile being the skinnier of the two. The desktop version allows for more padding and spacing for elements to be displayed while the mobile must implement space saving features such as a carousel to contain the same information.
Alternate Platform
Because the marketplace app is already built for mobile it is only natural that it should next be built for a desktop.
A desktop version, similar to the marketing website, would allow for the user to have more spacing and bigger images that would not limit it nearly as much as the sizing for the mobile.
The subject matter of the app also tends to be one where people might spend hours upon hours browsing so it is important that they are comfortable using the site and can make the most of its use.
Key Learnings & Next Steps
Some of the Key Learnings from the project are:
-
As much as you adhere to the design process you constantly go back and forth between steps.
-
Organization is key because if you don’t address it at first you come to pay for it in the end when it bites you.
-
It is tough to not be solution oriented at first when tackling a problem because afterall it is good research that will lead you to a true solution.
Next Steps will be to build the desktop version and address accessability to ensure that everyone is able to use the site. Finally once these are addressed, then hand off things to developers.
Impact of Design
It is with all the research and testing conducted that I hope the design will allow for a safer experience for local buyers and sellers.
If this is to be the case there should be a significant drop in crimes related to buying and selling locally if users correctly use the site and its offerings.
It is with all the research and testing conducted that I hope the design will allow for a safer experience for local buyers and sellers.
If this is to be the case there should be a significant drop in crimes related to buying and selling locally if users correctly use the site and its offerings.
Tarrot Cards
Tarrot Cards
I would say that using my product too much would lead to hoarding a bunch of unnecessary things in your domicile.
My product allows users to connect with community members but from a distance. It allows them to disconnect by not having to come face to face.
I would say that it respects other people's boundaries by completely avoiding them all together if opted to.
It might be inappropriate to use my product if the user has a shopping addiction similar to the hoarding issue previously mentioned.
I think cultural habits such as those of the pandemic and people not wanting to be in close contact with each other is actually a plus for my product.
I think my product might reinforce that social distancing from one another even after the pandemic is long gone.
I would say an alien would need to use my product if they didn't want to risk revealing their identity in public. They could only have to worry about the courier seeing their true form.
I would hope that my product does not keep people so secluded that they forget how to interact with people everyday.
