Hackathon

Designed for

MOBILE

rePlay

Marketplace platform to offer kids items

Time

6 Days

Team

3 Designers, 3 Devs

Tools

Figma

Maze

Canva

GitHub

Hackathon

Designed for

MOBILE

rePlay

Marketplace platform to offer kids items

Time

6 Days

Team

3 Designers, 3 Devs

Tools

Figma

Maze

Canva

GitHub

My role

I collaborated with two designers and three developers to create rePlay, a mobile-first platform that allows families to donate, trade, sell, or buy toys, clothes, and other secondhand gear. We did a competitive analysis and usability testing, allowing us to deliver a minimum viable product. As an interaction designer, I audited the visual affordances-cues that help users understand possible interactions- and the feedback responses- cues that communicate the results of any interaction- when using the MVP of listing an item.

Project overview

Approximately 80% of toys end up trashed after kids outgrow them. The same happens with their clothing, furniture, and goods, thus resulting in pollution, greenhouse gases, and toxins that enter our soil and water supply. We focused on this issue in response to the General Assembly Hackathon November 2022 theme: Environmental Sustainability.

Insights from parents

Our Research Lead supported us by providing insightful user information from 8 interviews. Despite the tight timeline, interviewees shared enough information for us to identify the needs and pain points of our key-user demographic: parents/guardians with kids.

“I want fewer toys taking up space in my house.”

“I want a curated toy selection.”

“I need a community to trade toys with.

- quotes from the user interviews

Problem:

Items outgrown by children end up in the trash because they take up too much space.

Goal:

Create a product that addresses the lack of environmental efforts in facilitating parents with the means to reduce the waste of unwanted kids' items.

Hypothesis:

A space to donate, trade, buy or sell secondhand toys can reduce the disposal of unwanted kids' items.

Meeting expectations

Given the time constraints of the hackathon, we conducted a competitive analysis to gain market insights and identify user expectations quickly. We identified the key competitors - Facebook Marketplace, eBay, and Craigslist - these are all marketplace platforms similar to what we were building with rePlay. Additionally, we explored the innovative toy-swap subscription platform Whirli to uncover possible competitive advantages.

Competitive Analysis

Time for ideas

We created "how might we" statements to help us brainstorm possible design solutions.

How might we facilitate an environmentally friendlier alternative to throwing away outgrown items?

How might we provide a community to parents in the same situation?

How might we help parents find a curated selection of toys?

A discussion within the team prompted us to compare our initial ideas, with a focus on the hackathon theme of Environmental Sustainability. While all of the 'how-might-we's can lead to potential solutions for individuals with excess kids' items, we determined that our first 'HMW' was the strongest. So we used it to guide our design exploration.

Step by step

Listing an item

We conducted a design studio session of sketching to brainstorm different ideas in a short amount of time. We also created a user flow, which gives us a diagram of the user actions in relation to the screens of the product. For this project, we designed the flow of uploading an item to rePlay, a community space for parents.

Flow chart for listing an item

We followed the user flow to create mid-fi wireframes. The UI elements were a combination of bits and pieces from our sketches. These wireframes were low in detail because we needed to test our design choices as early in the process as possible.

Listing settings

A key screen for this product was the upload page. This page allows the user to determine the different specifications of the item the user wants to list.

Listing settings screen

Listing type

Including donation and trading as listing types not only addresses our user’s needs, but also gives this product a competitive edge and supports reducing waste.

A curated toy selection

Categorization and tags will aid users when finding a specific item for their child.

Community

Ultimately, to begin this community, the users need to be able to post a listing.

Looking for feedback

We created a test plan with tasks and interview questions to validate our assumptions. In addition to in-person, moderated testing, we also conducted unmoderated tests using Maze. Fortunately, our results showed that we were heading in the right direction.

This usability test was conducted with 5 users.

On a scale from 1 (poor)-10 (great), how would you rate your experience?

8.2

Average score

How easy or difficult was it to create an account and post a listing?

80%

chose easy.

On a scale from 1 (poor)-10 (great), how would you rate your experience?

100%

said yes.

The results from the usability testing also revealed areas of potential improvement. We began exploring a visual style while implementing the feedback from our testing.

A bigger click area

The radio buttons work well on a desktop environment, but they could be too small for a finger on a mobile screen. So, we made all of the dropdown items field clickable.

“You should be able to click around anywhere on the prompt
instead of just the radio button.”

- quote from the usability test participant

Design change: clickable drop-downs

Letting the users know

I also added a microcopy that reads 'click here to view it' as a signifier that indicates to users the presence of the affordance of pushing a button to view listings or drafts.

“I didn't know I could click here because it doesn't say so.”

- quote from the usability test participant

Design change: additional microcopy

Prototyping while developing

And the winner is...

The collaboration aspect of this project was outstanding. As designers, we continued to communicate design updates to the dev team, delivering a high-fidelity prototype just in time for them to code the look and interactions of rePlay. We presented our work to a panel of judges and earned 1st place in this hackathon.

Try

rePlay (Interactive prototype)

Interactive prototype

Click on the text fields to try the prototype.

Key Learnings:

Effective communication was crucial for our project's success. Despite tight deadlines and working with new people, we kept everyone informed with frequent updates. This reduced stress and helped us achieve great results.

Next steps if given more time:

Continue usability testing with the new prototype.

Test for accessibility

Continue building out the rest of the product.