by, jenni lee
fs-3 (1).png

for sale at cmu - case study / ux

for sale at cmu

case study / fall 2018

Overview: Case-study of a buying and selling platform, For Sale at CMU. Design intervention of a mobile app experience which addresses issues of browsing, buying, and selling items.

Skills: Ethnographic research, user interface design, user experience design, prototyping

Tools: Sketch, Adobe Illustrator


 

How might we streamline a community's peer-to-peer resale platform to be more accessible?

 
 
fs-3.png
 

1—intro & context

Buying and selling within a trusted community is integral to college student life and as a result, this group is essential to upholding the safety of that community; however, there are various user experience and interface flaws which prevent the accessibility, inclusivity, and usability of the page.

I, along with a team of 2 others, conducted in-depth research of the For Sale at CMU navigation experience to empathize with the commonly experienced issues of browsing, buying, and selling items on For Sale at CMU. This research then led to the design intervention of a re-designed mobile app experience.


2—user journey tracking

In order to understand the flow of For Sale at CMU, we tracked and mapped out a typical user journey through the Facebook group.

  1. User searches item keyword on left side of page

  2. Products containing relevant keywords appear in search results

  3. User scrolls through items until they choose and click on a product

  4. User expands product description to obtain information about price, pickup location, contact information

  5. User clicks on the seller profile and messages him/her to express interest in product

  6. User comments “messaged” on product post in order to bookmark their place in line among the other potential buyers

 
Screen Shot 2018-12-13 at 11.13.10 AM.png
 
 

3—user interface analysis

Before conducting any research methods or drawing extensive conclusions, we made initial observations of the existing interface to familiarize ourselves more with the platform.

 
 

Home page interface observations

  • The visually cluttered home page with the distasteful banner makes the platform looks illegitimate and users will immediately have the impression of lack of credibility

  • There is confusion with the hierarchy of posts. It isn’t necessarily sorted by date, rather by popularity, and if an item is popular, it most likely will have already been sold

  • Next, in the description of the page, the admins have stated “Please read group rules before posting,” however, the page is so cluttered that it’s difficult to locate this description, resulting in sellers submitting various posts which violate these rules and the admins being overwhelmed by the mass amount of submitted posts, making it difficult for sellers to have their posts clearly show up on the page.

 
Screen Shot 2018-12-13 at 11.18.12 AM.png
 

Item page interface observations

  • When sellers post a product, they are required to list a specific price. However, they often select a random price, such as $1, because they include multiple products in a post. As a result, it is difficult to filter the products by price, as the listed prices are not true to the actual price of the product.

  • People often resort to listing the prices in the product description; however, this can become cluttered and difficult to read with ease. Thus, resulting in difficulty with matching the prices in the description to the photos of the products.

  • The seller will state to “message me for more details” about the product; however, when you message someone on Facebook that you are not friends with, Facebook messenger makes it difficult for the message to be seen, as it is kind of hidden at the top of the messenger interface. As a result, users will often comment “messaged” on the post, or will directly ask questions on the post, resulting in confusion in communication.


4—stakeholder map

We then created stakeholder a stakeholder map in order to better visualize the key players of this design, whether direct or indirect. Doing so allowed us to be cognizant of the users that we were designing for and to analyze the situation from a higher-level, lateral, systems-thinking approach. In this map, we categorized stakeholders into 7 groups of people and positioned them on this map based on how directly affected they were by for sale @ CMU, from specific to general.

 
stakeholder-map-01.png
 
 

5—assumptions & constraints

Before beginning the user research process, we created a list of assumptions and constraints in order to allow us to think laterally, take a step back from the design, understand boundaries, and challenge our assumptions.

Assumptions:

  • Users will be willing to shift from a Facebook group to a mobile platform

  • Users are currently dissatisfied with the existing Facebook group

  • We will gather enough user information to move forward with an app proposal

  • Carnegie Mellon Students and surrounding residents use mobile phones and have access to the internet

Constraints:

  • Project time constraint

  • Coding/developing limitations for an actual fully developed app

  • Budget and material limitation for fully developed app

  • Unable to survey entire CMU population

  • Impossible to attain complete inclusivity, as not everyone even has internet access or a phone


6—user interviews: web-based survey

After reviewing our assumptions and constraints, we were then prepared to begin the research phase of our project.

We created a web-based google form survey filled with questions to ask users about their experiences with navigating For sale @ CMU.

This survey was posted in CMU facebook groups and emailed them out to students.

 
Google forms survey

Google forms survey

 
 

7—web-based survey: synthesis of research

24 responses were received.

Upon our affinity mapping, we were able to conclude that there was a general consensus that the experience of navigating For Sale @ CMU was quite negative.

  • About 30% of the users had never heard of For Sale @ CMU, demonstrating that this platform was not reaching a wide enough audience.

  • 70% of the users who had heard of For Sale @ CMU had never posted or purchased anything from For Sale @ CMU, demonstrating the difficulty and fear of confusion in posting and purchasing products.

  • And only 16% of users who had sold something, had success in selling


8—user interviews: think-aloud

We then gathered 8-10 users, a mix of frequent users and non-users, to sit down and navigate For Sale @ CMU on camera.

Users were to narrate exactly their emotions, actions, objectives, and thoughts. They were given tasks such as asking them to find the cheapest jacket they could, or navigating to the same product they had found on their phone.

 
 
 

9—think aloud: synthesis of research

From this think-aloud, we pin-pointed the common pain points of the interviewees:

  • Users who were familiar with Facebook were significantly faster at navigating the group than non-users of Facebook were

  • Users continually expressed confusion and frustration regarding the organization of the pages

  • Users also had difficulty determining the true price of the products.

  • Users expressed frustration that they had to click on a separate google slides link on order to view the products

  • Users were unclear about the quality of the product and felt uneasy about messaging sellers.


10—user personas

3 user personas were created in order to represent the different user types and shed light on user needs, experiences, and behaviors:

Maya Jain, female, design major, sophomore

“When I was moving into my new home in Shadyside before the school year, around in August, I wasn’t about to spend a lot of money on brand new furniture, so I needed to buy something on For Sale. I remember when I was trying to buy a couch, it was the most unnecessarily complicated process ever— the seller was so uncommunicative and I literally waited at our meeting spot for 45 minutes until he finally picked up and told me that he thought the meeting spot was somewhere else.”

Timothy Kim, male, psychology major, freshman

“I had to buy a toaster from someone once while I had a leg injury, and the seller kept insisting me to meet somewhere off campus near Squirrel Hill to pick it up, but I was literally on crutches. I think that For Sale is a good concept, but for freshmen, it’s really daunting to go off campus to meet people,”

Bob Smith, male, employee

“I don’t use Facebook, so I personally have never used this Facebook group you speak of. I typically just order things on Amazon.”


11—key interventions and rationale

After completing the research phase of this design process, we highlighted key principles and action words to keep in mind while designing the app.

Our primary focus was inclusivity and accessibility for non-Facebook users.

On-boarding

  • Login page allows a user to sign in with their school ID, making it inclusive for non-facebook users to use

Homepage

  • Home page allows users to filter searches by price, product type, proximity to campus, and date posted

  • Default: homepage organized by trusted sellers

  • Search bar is clear and evident at the top, as opposed to being hidden

  • Function to bookmark an item

  • In-app messaging function for the same experience as Facebook messenger such that non-facebook users are able to message sellers

Individual product page

  • Once an item is clicked, there are multiple photos of various angles of the product, with an accurate price listing, in order to ensure legitimacy of product

  • Seller’s profile is linked in the description

  • Description contains specific transaction/pickup information

  • Function to request pickup location change in the case that the user is unable to get to the pickup location in order to increase accessibility

Seller page

  • The seller profile shows ratings, previously sold items, pending selling items, and reviews

  • User has option to connect with the seller through Venmo

Transaction

  • GPS system which temporarily shares location of buyer and seller so they can track each other when meeting


12—wireframe flow

Prior to creating any high-fidelity prototypes, we sketched out wireframe flows to map out the user flow of the app.

Wireframe flow sketches

Wireframe flow sketches

Wireframe flow sketches

Wireframe flow sketches

 
Screen Shot 2019-02-06 at 12.46.31 PM.png
 
 

13—hi-fi prototyping

We then mocked-up a few screens at high fidelity in order to showcase the envisioned user interface of the app. The pink was a playful, visually pleasing choice, and Acumin Variable Concept was able to capture the modern, tech-oriented nature of CMU.

Screen recordings of app flow prototype.