Eco Kiddo

UI/UX Design | Course Project | 2022 Summer

Empowering parents to make sustainable clothing choices through smart label scanning and accessible recycling solutions.

Course COMP4511 User Interface Design and Construction

My Role UX/UI Designer

Team Adam H., Cindy L., Sheina E.

Timeline 4 weeks, Explore 1.0-2.0 Design October 2022

3 weeks, Delivered November 2022

Tool Figma, Balsamiq, React Native

Summary

Problem

Parents with young children are constantly buying new clothes and items and throwing out old ones as their children grow with rapidly changing needs. Though parents want be eco-friendly, their busy lives pressure them to engage in convenient buying and disposing practices that are not always the most sustainable option, increasing the chances that it will end up in landfill.

Solution

We aimed to develop a solution that helps parents make more sustainable clothing choices by enabling them to identify garment materials through label scanning and locate nearby recycling collection points via an interactive map. Through our research, we found that this approach best aligned with users' needs and primary pain points. While a second-hand marketplace for children's clothing presented strong commercial potential, concerns around purchasing pre-owned items remained. Ultimately, we prioritised reducing waste and promoting sustainable purchasing decisions, ensuring our solution effectively addresses market needs while having a positive environmental impact.

Eco Kiddo APP

User Centred Design Process

User Research

We did user research using IDEO card sorting methods, including interviews and surveys to identify our main target users and key features.

Frame+339.jpg
Frame 156.png

Persona and Journey Map

The persona was developed based on insights from our interviews and survey findings:

  • Parents prioritize quality and design over sustainability when purchasing clothes.

  • Many parents hesitate to buy second-hand clothing for their children due to hygiene and wear concerns.

  • Parents frequently buy new clothes, but often donate or give away old ones rather than selling them.

  • They value convenience and prefer solutions that fit easily into their busy routines.

  • While sustainability is not a primary concern when purchasing, they recognise the importance of responsible disposal.

Based on these findings, we created six personas and Journey Maps（only the parts I worked on are shown） representing our target users.

1.png
2.png
3.png
Journey Map-Johanna.png
Journey Map-Louise.png
Journey Map-Daniel.png

Empathy Mapping

Map Template-Johanna.png
Map Template-Louise.png
Map Template-Daniel.png

Information Architecture and Low Fidelity (Paper) Prototype

After creating the information structure, we conducted user testing with 6 participants using a paper prototype (all in online mode because it was during an epidemic).

The initial version had 5 main functions: signup/sign in, fabric information, donation map, label scanning, and personal information(profile).

However, after user testing, we believe it is important to make it easier for users to make donations as well as simplify the process, and we should separate the pickup function (order management) from the map function.

Paper.COMP4511.15的副本2.png
Paper.COMP4511.16.png
Paper.COMP4511.17.png
Paper.COMP4511.18.png
Paper.COMP4511.19.png
Paper.COMP4511.20.png
Paper.COMP4511.21.png

Testing And Improvements

User Feedback

  • Creating an Account

    · Users found the process easy and intuitive.

    · They liked the logo and the button placement.

    · Suggested improvement: Make the "Remember me" option more noticeable.

  • Scanning Label

    · Users appreciated that recent scans appeared on the home page.

    · The information displayed was not overwhelming.

    · Some users were confused about whether scanning required a specific angle or lighting.

    · Suggested improvement: Make the scan button more prominent.

  • Learning About Material

    · Users preferred searching for materials via a search bar.

    · Some found it confusing to determine the material category.

    · Sorting fabric options alphabetically was useful.

    · Suggested improvement: Increase text size in the "Wood" category and highlight recyclable materials better.

  • Finding a Donation Location

    · Users found the search function potentially ambiguous.

    · Suggested improvement: Request location permissions explicitly to provide accurate results.

    · Users appreciated clear location details and directions via Google Maps.

  • Favoriting a Location

    · The heart icon for favoriting locations appeared too faint.

    · Suggested improvement: Make the heart icon stand out more clearly as a button.

  • Booking an Appointment

    · Users found the pickup button location confusing.

    · They were uncertain about donation methods and how to specify items.

    · The plus button did not stand out due to similar shading.

    · Suggested improvement: Clarify donation item selection and improve button contrast.

  • Viewing Notifications & Profile

    · Users liked the notifications.

    · The username and avatar seemed editable.

    · Some found the profile icon unnecessary.

    · Suggested improvement: Consider adding a profile button to the navigation bar.

The changes we considered

Map Page

  • Asks user for location permission

  • Change the save location button

  • Provide directions to location/link to Google Map

Home Page

  • Removing of Search box because it is confusing on what users can search for

  • Profile icon or avatar and username to indicate users to click on that to navigate to Profile page

  • Sorting of fabrics at horizontal flat list/carousel

Learn page

  • Category/filters option

  • Type button is confusing

  • Show materials in a sorted/priority view

  • Enlarge text size when viewing a specific material

Scan label

  • Asks user for camera permission

  • Provide more instructions

  • Make Scanner button more prominent

  • Rethink about the navbar buttons

  • Should the navbar always appear so that user can access to the Home page directly?

  • Make material details pop up draggable

  • Link to learn page ?

Sign up

  • Remove remember me option when signing up

Booking pickup/appointment

  • Can users edit their booking pickup?

  • Do we need to rethink about the page layout and contents

  • Change the colour of the buttons

  • Change pick up wording at Nav Bar

  • Make plus button more prominent

  • Remove item and method options

  • Need more instructions and explanations when filling the details

  • Remove 1 recycled indicator in the order details page of 'order collection‘

High Fidelity Prototype

We conducted the first round of high-fidelity prototype testing with six participants. Based on their feedback, we refined the interface details, application structure, and logic, resulting in the final high-fidelity prototype.

Interaction prototype edited by Figma.

*All the content displayed on the page is done by me (team collaboration) or independently, and the part completed by team members alone is not displayed.