rePlay
Overview
how can we reduce the amount of wasted materials sent to landfills?
For this 4 day project, I entered my first hackathon where I had the experience to work closely with a team of designers and software developers. We were tasked with creating a product that would promote environmental sustainability. We created rePlay to target the impact that wasted materials have on our planet and I would lead my team concept to implementation.
This team consisted of three designers and three developers, with my focus being on the user research, usability testing and UX/UI design.
Research
determining our focus. deciding a population of users and what problem we will solve.
Before diving into solutions, I did some supplemental research on the current climate of wasted materials. From our research, I discovered some troubling findings.
20 billion pounds of clothing are thrown away each year contributing to the release of greenhouse gases and toxins that enter our soil and water supply.
80% of all toys also end up being trashed based on the fact that parents don’t know what else to do once their children have outgrown them.
With most of the clothing items thrown out being children’s clothes we decided to focus on this demographic and provide a platform for people to recycle their children's unwanted clothes and toys.
user interviews. what are caregivers doing now with their discarded waste?
Our team had the chance to interview parents and caregivers to learn about their habits and opinions on the reuse of clothing and other materials. From these interviews we discovered that there is a need for a sustainable and cost-effective way to buy, sell, or trade these items.
Design
design studio sketches. getting the creative juices flowing.
We conducted a design studio in order to brainstorm and sketch different ideations for the platform. We then brought our sketches into FigJam and collaborated in putting our favorite elements together to land the most intuitive design.
mid-fidelity wireframes. establishing a framework for devs.
After exchanging constructive feedback and reaching a consensus on our ideas, we used our low fidelity sketches to start building our mid-fidelity wireframes. Once the basic framework of our wireframes was completed we began conducting usability tests so we can gather insights to make any necessary improvements.
Here are some selected screens from our main user flow which takes users throw a simple sign-on and upload task:
User Testing
usability testing. getting feedback on our designs.
Using the testing tool Maze, we had users go through our flow to evaluate the functionality of our designs. We monitored for user error, misclicks, and moments of confusion/frustration. From these test, we were able to make improvements for developer handoff.
Below our some quotes from testers and the metrics we used to gauge usability.
“I’m able to post my item but I’m not really sure how to view my item after I posted it.” - Participant
“I want to be able to click around anywhere on the menus instead of just the tiny button.” - Participant
new iterations. implementing user feedback.
With the feedback from our users, we change subtle visual elements of the design to for a better experience. For example, we updated the response to users posting an item for more clarification and increase the click area for our menus for better use.
Toast for success! Signaling to users that their item has been posted and where they can find their listing right away.
Final Product
style guide. ensuring consistency between designs.
To help speed up the process when building our high-fidelity we created a style guide. The Gambado Sans typeface really matched our brand’s playful and optimistic aesthetic so we chose to continue with this as our logo. This was useful for the team to have a color palette to play around with.
hi-fidelity prototype. presenting the main features.
In order to build our MVP, we focused on some of our most important features. While we did focus on the user flow, we wanted to add some additional interactions to improve usage. Below, you will see how users will interact with each task.
Creating an account is crucial for the user to get started on the app. The user will have the option to use single sign-on or create an account using their email.
After signing on, they can then list an item. During our usability tests, we discovered the camera is an extra step if the user doesn’t need to take a photo. Our improvement would be to have the CTA go straight to create a listing page.
In order to complete the listing, the user will fill out necessary information regarding their item. This includes title, category, listing type, and description. While creating the listing the user also has the option to add tags to attribute their item, or save to drafts if they need to step away.
Takeaways
what happened?
All the trials, tribulations, and effort from my team earned us both first place and peoples’ favorite choice award in this hackathon! I’m very proud of what we were able to accomplish in such a short amount of time and happy for the opportunity to showcase my leadership and design skills. Little did I know that this would cause me to participate in many more hackathons.