End to End

Curbs: Your Local Source for Sharing without Spending

Role

UI/UX Designer

Tools

Figma, Maze, FigJam

Timeline

Oct 2024 - Feb 2025 (20 weeks)

Final Deliverable

Getting to know you

Background / Problem / Goals / Contents

Introduction

~

Introduction ~

Background

For this project, I was tasked with creating my own app from end to end, where I would be in charge of all research, conceptualization, design, and usability testing. To get started, I needed an app idea.

As someone who values sustainability and enjoys getting things for free (who doesn't?), I'm a frequent flyer of my local Facebook Buy Nothing groups. These groups are inspirational to me in their ability to connect neighbors and create more resilient communities through mutual support. In a society that often prioritizes individualism and consumption, the tradition of close-knit communities where neighbors help and share with one another has faded.

Problem

Existing “Buy Nothing” resource platforms have limitations. Facebook groups are not designed for ecommerce-related tasks and have unorganized item listings. The Buy Nothing Project app itself is extremely buggy and unreliable, driving users away. There are very little safety measures in place for users. As a result, scammers lurk in the shadows.

There’s a need for a standalone app that can offer a more structured, user-friendly approach to free community-based exchanges. Whether someone is looking to live more sustainably, save money, or simply declutter, they should be able to do so safely with ease.

Goals

Understanding...

  1. What specific problems users face in Buy Nothing groups on existing platforms

  2. What motivations users have for borrowing/trading as opposed to buying/selling

  3. How users can feel safe engaging with their neighbors in this way

To do this, I needed to talk to existing users. I scoured the Facebook Buy Nothing groups and messaged people who seemed rather active through posts and comments. I also analyzed platforms related to “Buy Nothing” to get a sense of what each different space had to offer.

Deliverables

UX Design:

  • Competitor Analysis

  • Interview Reports

  • Affinity Map

  • User Persona

  • Task & User Flows

UI Design:

  • Branding

  • Prototypes

  • User Testing Reports

  • Wireframes

  • UI Component Kit

Understanding your neighbors

Competitor Analysis / Interviews / Affinity Mapping

Research

~

Research ~

Competitor Analysis

I viewed 3 potential competitors of my future app. Of course, I analyzed my inspiration and direct competitor, Buy Nothing Project. I analyzed 2 other indirect competitors, Offer Up and Nextdoor.

Buy Nothing App

  • Very poor usability

  • Full of bugs

  • Questionable accessibility

Offer Up

  • Efficiently create a post in 4 steps

  • Detailed progress bar

  • User profiles complete with rating systems, buying/selling stats, highlighted compliments

Nextdoor

  • Most easily navigable

  • "For sale" tab has a dynamic scrolling experience

  • Thoughtful hierarchy

  • Detailed listing pages

Click to enlarge

In these interviews, I wanted to…

  1. Identify user frustrations and barriers

  2. Explore user motivations and needs

  3. Analyze engagement patterns

  4. Address safety and trust concerns

I reached out to about 8 people, only 5 replied in a timely enough manner for me to consider interviewing them. I ended up interviewing each of these people in a variety of different ways.

  • I met at a Starbucks almost 30 minutes away where they work. They had two small kids in tow that were bribed into sitting and behaving for (most of) our nearly 30 minute conversation with McDonalds, stickers, cookies, and the promise of a trip to the park afterwards.

  • I met at my neighborhood coffee shop 3 minutes down the road. This person gave me a lot of material. A lot. I learned that he refurbishes old bikes and gives them away to people who need them. He is very passionate about two wheeled transportation and even got a little choked up at one point. Our interview ended up being around an hour long, making me late to an appointment.

  • I messaged back and forth with this person the most. She works as a digital product manager herself! At the time, she was also volunteering for city council campaigns and was out of the house for most of the day. The time slot we agreed on, over zoom, was at 8pm. Thankfully, our interview was on the shorter side of about 25 minutes.

  • I interviewed this person over the phone after she had picked her kids up from school. The poor woman, I could tell she was preoccupied during our conversation. That being said, this interview felt like pulling teeth. She gave me very short answers and successfully navigated around my prompts for her to share more. I didn’t end up getting a lot from this interview, which only ended up being a little less than 15 minutes.

  • I was getting desperate for interviewees at this point, and asked my boss if he’d ever used a Buy Nothing group. Thank my lucky stars, he said yes! After my shift was over that day, he sat down with me to be interviewed. It felt kinda funny having our roles reversed in this situation. He gave me a lot of great material over the course of about 25 minutes and was easy to talk to, just what I needed to wrap up my interviews.

Interviews

Affinity Mapping

After conducting 5 user interviews with people from my local Buy Nothing Facebook group, I had some expected and unexpected findings. Circling back to my three main goals, I found that:

  1. Users mostly face issues in regards to search and filtering limitations, unreliability in moving from posts to messaging, and human error such as others not following through or updating posts to reflect their current availability status.

  2. Users like to feel a sense of community. They are motivated by decluttering, sustainability, and saving money for themselves as well as others. Users would rather not put effort into trying to sell something and appreciate FB Buy Nothing groups as a straightforward way to accomplish their goals.

  3. Users feel safe engaging with others in these groups. The bulk of their interactions with neighbors do not require meeting face to face because they will opt for unscheduled porch pickup instead. When users do interact in person, they have reported exclusively positive experiences.

Click to enlarge

“I have to go through a whole bunch of stuff I’m not interested in.”
— Interview 1
“It’s not worth the effort to try to sell them.”
— Interview 4
“It’s not necessarily about safety, but trustworthy of time.”
— Interview 2

Whats the problem and how can I help?

Actionable Insights & HMWs / User Persona / Task Flow / User Flow

Define

~

Define ~

Actionable Insights & HMWs

Since I was designing a whole app from scratch with limited time, I knew that there would be some concessions I would have to make in solving the problems brought forward by my users. I was not going to be able to solve every problem, and the problems I did want to solve for, I would need to do so simply. Thankfully, a lot of the issues the users had only needed a function to be more efficient.

  • Users Want Low Effort

    • How might we simplify the sign up and onboarding process to make joining the platform feel quick and effortless?

  • Users Want to Search, But Recognize Limitations

    • How might we reduce the time and labor required for users to find items?

  • Barriers in Communication Cause Frustration

    • How might we provide users with a quick and structured way to express interest without unnecessary back-and-forth about pickup?

Notice how I decided to focus on users wanting low effort? It is here that I like to remind myself that I’m not trying to reinvent the wheel with each design choice because the best solution is often the simplest one. I forget that very easily.

User Persona

Using my affinity map, user interviews, and insights, I created Erika Thompson, my user persona from which I would draw my design flow inspirations.

Erika is a mom of two working full-time that values sustainability, helping out her neighbors, and keeping her living space tidy. She’s annoyed by the limitations of Facebook’s Buy Nothing groups and needs a more efficient and low effort service to find and schedule the pickup of items because, while she appreciates the convenience of “shopping” online, she has limited time outside of work and her kids.

Click to enlarge

Task Flows

I wanted to demonstrate 2 flows. The first would be account creation/onboarding, the second would be messaging a lister. I wanted to understand what pages I would be designing, so I laid out the simplest path to complete each task.

Click to enlarge

User Flow

Remember what I said about easily forgetting to design simply? That is evident here in this user flow; I made a lot of work for myself. I wanted to explore designing tooltips, which seemed like it would be exciting to prototype for.

Click to enlarge

Creating a neighborly feel

Branding / Low to High Fidelity Iterations / Prototype / UI Component Kit / Testing

Test

~

Design

&

Test ~ Design &

Branding

With a vibrant cooler toned color palette, smooth wave patterns, friendly illustrations, and rounded iconography, I wanted to curate a visual identity that felt non threatening yet would demand your attention and be exciting to look at. Accessibility was a must, so I made sure my color palette and typography was accommodating. 

The name “Curbs” is drawn from the practice of taking items to the curb and putting a big “free” sign on them, hoping someone will pick them up before the garbage man. For my logo, I wanted to do something simple, so I decided to go with a wordmark logo using Bellota. I knew that I would need a smaller version of my logo to fit smaller screens, so I kept the C and iterated on it several times. I played around with different color combinations, backgrounds, gradients, and wave patterns. Jumping off of the wave pattern I was adding to my logo and using on the bulk of screens as a header transition, I added a sparkle to the logo inspired by the sparkles I was adding to my header flairs as iterations progressed. It was a small detail, but a notable part of my branding throughout the design.

Mood Board, Style Tile, & Logo

Click to enlarge

Click to enlarge

UI Component Kit

I started building my UI component kit as soon as I began to digitize my wireframes. This made my workflow much more efficient and helped to streamline the iteration process by ensuring uniformity in my design, even as I added or adjusted certain elements.

I organized my components either by what they accomplish or by page to make navigation of my component library a little easier.

Low to High Fidelity Iterations

I sketched my key screens: dashboard, listing page, chat and inbox, personal listings, and the sign up pages. I brainstormed different layouts that highlighted the content a little differently. Receiving feedback, I then digitized and iterated on my wireframes to move into testing my flows.

Click any image to enlarge

Home/Dashboard

  • Search bar next to profile icon

  • Filters (sort by, category, etc)

  • Location (V1) OR map with pins around where current listings are located (V2)

  • Listed items with picture, potential status bubble for “new,” title, and distance (V1) OR just title and picture (V2)

  • Nav: home, my listings, chat, new post (V1) OR home, my listings, chat with separate button bottom right for creating a new post (V2)

Listing

  • Large picture with clickable carousel (V1) OR swipe-able with progress bar (V2)

  • Back button top left, share and bookmark far right

  • Title followed by lister’s info with description (V1) OR title with status, info like distance, description, lister’s profile

  • Prompt to ask a question or otherwise contact with number of people already contacted (V1) OR sticky buttons for asking a question or requesting the address for pickup (V2)

  • Map showing approximate location

  • Similar listings (V1)

Inbox

  • “Inbox” title with back top left, notification top right

  • Separate folders for messages received about a personal listing vs messages you sent to others

  • “Received” shows your listings at top with pic & title, shows how many people are asking a question vs requesting address

  • Individual chats

  • Option to mass send “item gone” to people who messaged

Chat

  • Listing name’s title with top left back button, top right notifications

  • Picture of other user and user’s name

  • Chat messages

  • Auto replies with message bar and send button

My Listings

  • “My listings” title with back button top left

  • Filters: Active, expired, archived, saved

  • Picture & title, buttons to edit or delete, view messages underneath

  • Sticky new post button bottom

Onboarding

  • Opens with logo & name, teaser/preview with sign up or login buttons

  • Sign up page logo & title up top with back button top left, enter name/email/password x2, option to sign up with google or Nextdoor, sign up button at bottom with “already have an account? Login” beneath

  • Large welcome illustration with text and captcha

  • Selecting location by enabling location or entering zipcode manually, which opens as a drawer

  • Map of where you are with surrounding neighborhoods selection and confirm or option to go back and reenter

  • General onboarding modal after confirmation on top of dashboard with slideshow progress bar, illustration, text, and option to “skip” or “next”

My design process could best be described as chaotic. My eye for design really gets a workout when it comes to iterating on my wireframes. I can tell when something doesn’t look quite right and am apt to play around with different elements and make adjustments until it feels right, even if I hadn’t accounted for them in my low fidelity sketches. I learned to create components for my designs very early on to save myself time in that regard. As a result, I typically have 4-5 different iterations between low fidelity and final high fidelity.

Dashboard & Listings Iterations

Click any image to enlarge

Iteration 1: Tested

  • Header with profile icon

  • Location, clickable

  • Listed items with picture, potential status bubble for “new,” title, and distance

  • Nav: Home, my listings, chat, new post

  • Picture with progress bubble

  • Title, user, description

  • “Send user a message” prompt with option to request address

  • Similar listings

  • Message sent modal

Iteration 2

  • Applied branding and style tile

  • Drop shadows on buttons

  • Adjusted header to fit a screen on prototypes

  • Filters comes up as separate bottom drawers

  • Content filled in with pictures, illustrations, titles, etc

  • Listings fill screen, not rounded

  • “Send” button moved outside of typing area

  • Adjust spacing issues

Iteration 3: Tested

  • Added header flairs

  • Filter pills removed

  • Filter comes up as full page to select all filters in one area

  • Filters show up on results page after selected, can remove

  • Modal buttons changed to close X top right and “view chat” full button at bottom

  • Touch up details

Iteration 4

  • Touch up details

  • Filters back to pills with bottom drawer, only one option to change

  • Button in filter to view results

  • Added “Further Away” listings in results

  • Took away “Pending” status on listings

Onboarding Iterations

Click any image to enlarge

Iteration 1: Tested

  • Added options for email/Google/Nextdoor sign up

  • Captcha in creating new account

  • Shortened creating account to just email/password

  • Viewing by neighborhood selecting vs radius

  • Onboarding full pages vs modals or tool tips

Iteration 2

  • Applied branding and style tile

  • Adjusted spacing

  • Logo in every header

  • Viewing radius

  • Onboarding as full pages

Iteration 3: Tested

  • Adjusted spacing

  • Designed swipe/tap for onboarding pages via prototype

Iteration 4

  • Adjusted wording to emphasize key element of app

  • Added additional onboarding slide to emphasize key element of app

Testing

Iteration 1

My goal was to have at least 5 participants, but I ended up having 13 participants! To conduct the testing, I employed unmoderated user testing through Maze to receive feedback on:

  • Intuitiveness

  • Usability

  • Layout

  • Areas of confusion

  • Style preferences

    • Area of viewing as neighborhood selection vs radius

    • Onboarding via tool tips vs feature pages

Tasks

  1. You’re new to the app. Create an account via email and go through onboarding.

  2. As you're browsing, you see an interesting item. Send the lister a message about the item's dimensions.

Key Findings

100%

completion rate

54%

prefer feature pages

77%

prefer viewing radius

50%

scroll for onboarding

Moving forward:

  • Use feature pages for onboarding

  • Use viewing radius for location

  • Make onboarding pages scrollable instead of individual pages

Iteration 3

I had 4 participants go through unmoderated testing so I could find out:

  • Do users understand the premise of the app?

  • Do users feel comfortable sharing the information asked in onboarding?

  • What is a user’s confidence level in completing task 2?

  • Usability of filtering method

  • Areas of confusion

  • Feedback on design

Tasks

  1. You’re new to the app. Create an account via email and go through onboarding.

  2. You’re looking for something to put potted plants on. You’d like to see the newest listings and you’re willing to travel up to 15 miles to pick it up. Message the person with the newest item and request their address for pickup.

Key Findings

Task 1

100%

completion rate

4.8★

comfort sharing information

40%

understand full premise

Task 2

80%

completion rate

3.8★

confidence completing task

60%

nothing unexpected

Due to prototyping malfunctions, there was a 20% drop off rate for completion

Moving forward:

  • Make the app’s fundamentals more apparent during onboarding in task 1

  • Simplify filtering step in task 2

  • Adjust the prototype for functionality during filtering in task 2

High Fidelity Prototype

Take a minute to give it a test run!

Tasks:

  1. You’re new to the app! Sign up via email.

  2. You’re looking for something to put potted plants on. You’d like to see the newest listings and you’re willing to travel up to 15 miles to pick it up. Message the person with the newest item.

What I take with me

Lessons Learned / Next Steps

Final Thoughts

~

Final Thoughts ~

Lessons Learned

  1. Growth comes from overcoming challenges

  2. Embrace iteration and flexibility in design

  3. Time management and prioritization are critical

Next Steps

  1. Moderated user preference testing for the filtering system to better understand how users think and why

  2. Iterating wireframes and adjusting the prototype based on feedback

  3. Moderated usability testing of filtering system to better understand points of confusion

Feels Good

  • User interviews

  • Affinity mapping

  • User personas

  • POVs & HMWs

  • Task flows

  • Creating a component library

  • Accepting feedback

Needs Work

  • Sense of urgency

  • Insights

  • Sitemapping

  • User flows

  • Prototyping

  • Unmoderated testing

  • Accepting imperfections

Previous

Responsive Redesign: Karnage Construction