KidswearCycle

Online Resale Platform

The project was created as part of a training course Google UX Design Professional Certificate.Google Career Certificates are part of Grow with Google, an initiative that draws on Google's 20-year history of building products, platforms, and services that help people and businesses grow. Through programs like these, we aim to help everyone – those who make up the workforce of today and the students who will drive the workforce of tomorrow.

KidswearCycle responsive website

KidswearCycle is an online resale platform for parents to purchase and resell children's clothing. The typical user is between 20-50 years old, and most users are families with several children. KidswearCycle's goal is to provide a way to sell used children's clothing quickly and cheaply while protecting nature and the environment.

Current online platforms often lack user-friendliness and focus, making it difficult to buy and sell used children's clothing within a limited time frame and budget. Design a KidswearCycle responsive website to be a user-friendly platform that simplifies the process of buying and selling high-quality, affordable children's clothing, protecting the environment from unnecessary waste.

My role as UX Researcher & UX/UI Designer from start to finish of the project:

🔬 Conducting usability studies

💡 Paper & digital wireframing

🔗 Low and high-fidelity prototyping

📱 Responsive design

🦼 Accounting for accessibility

🔄 Iterating on designs

Understanding the user

User research

I conducted usability research for my project. To better understand my users, I created personas using AI and then trained the AI to describe their needs and wants as if they were real people. I interviewed each virtual persona and asked them questions that interested me. This allowed me to conduct research in a very short time.

The conducted research of personas and user journey map showed that the main problem of the target group is the lengthy and inconvenient processes of searching and purchasing high-quality children's clothing at low prices, on the one hand, and selling unnecessary clothing, on the other.

User pain points

Time

Families with children are often too busy to shop in offline stores or second-hand stores

Cost-effective solutions

Online stores do not offer cheap prices for high-quality children's clothing

UI

Online platforms are not user-friendly, making it difficult to quickly browse and make purchases without a significant time investment

Accessibility

Competitor products provide a limited amount of accessibility features

Persona

Persona: Maria

Problem statement: Maria is a mother of two children who works from home, who needs affordable, high-quality children's clothing in a short time because she has limited time for shopping.

Starting the design

Sitemap

The time to select and purchase children's clothing is the first pain point for the users, therefore I created the information architecture of the site as simple as possible: search with filters, categories of children's clothing, list of recently added items.

After conducting a study of personas, it turned out that young parents would like to learn useful information about children and seasonal sales from individuals and companies, which they could read in articles on the same site. That's why I added links to articles on the main page.

Paper wireframes (desktop)

I sketched out 4 variants of paper wireframes for each screen of my site, marking with a star in each option the most suitable implementation of the site’s functionality.

The final sketch on the right contains all the elements I selected for the main page.

At the very top I prioritized input field with drop-down filters for quick search and big buttons for categories to help users save time.

→

Paper wireframe screen size variations

I started to work on designs for additional screen sizes to make sure the site would be fully responsive, because KidswearCycle´s customers access the site on a variety of different devices.

Low-fidelity prototype

Then I created the low-fidelity prototype, and after that I had received feedback on my designs from members of my team about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.

Usability Study

I conducted the moderated usability study with 4 participants, length 15-20 min. The usability study used a low-fidelity prototype.

These were the main findings uncovered by the usability study.

Usability study: findings

1

2

Description of item

A lot of space is taken up for reviews about the seller, but the description of item is too small

3

Checkout

At the checkout stage, users did not have a clear choice of delivery options

Refining the design

Mockups: Original screen size (desktop)

Mockups: Screen size variations (mobile & tablet)

I included considerations for additional screen sizes in my mockups based on my earlier wireframes.

Due to users shopping from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible.

High-fidelity prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, as well as several changes suggested by members of my team.

This video shows the main user flow and the additional features in the KidswearCycle website (desktop version).

Accessibility considerations

1

I used headings with different sized text for clear visual hierarchy

2

I used WebAIM Contrast Checker for every color combination to comply with WCAG 2 requirements for contrast and color

3

I used icons to help make navigation easier

Going forward

Takeaways

Our intended users mentioned that they found the design easy to use, enjoyed the visuals, and noticed a clear organization of information.

I found out that even small design tweaks can make a big difference for users. The main thing I learned is to always think about what users really need when designing.

Next steps

1

Create chat and user profile screens, add messaging functionality between seller and buyer

2

Add a drop-down block with filters when using the search field on the main screen

3

Conduct follow-up usability testing on the new website

Next project

Page updated

Google Sites

Report abuse