Cloato

Your Wardrobe, Reimagined Virtually | UI/UX Case Study
SUMMARY

Problem

In the fast-paced world of fashion, individuals struggle to efficiently manage their clothing collections. This results in disorganized closets, difficulty in outfit coordination, and wasteful purchases.

Solution

Cloato is a mobile application dedicated to helping users digitize and make the most out of their wardrobe. Users can compile their clothing into outfits, filter through their closet to find specific items, share outfits to find inspiration with outfit sharing, and shop in a marketplace that is tailored to their taste.

Roles
UI/UX Designer & Researcher, Interaction Designer
Duration
6 weeks
Tools/Skills Used
Figma, Adobe Photoshop, Adobe Illustrator
Team Members
Noor Haider,  Alex Shaham, Kyle Benalcázar, Kunal Chandel

My Contribution

During the research stage, my responsibilities encompassed crafting user personas, empathy maps, and a user journey map through the utilization of Figma. I also contributed to the interview process with potential users.

Following an in depth analysis of our users, I outlined the user task flow and the information architecture for the main functions of the application. This led to the design stage, where I created the High-fidelity mockup and prototype using Figma, and Adobe Photoshop/Illustrator.

During the evaluation stage, I oversaw several usability testing sessions. Additionally, I assumed responsibility for analyzing and synthesizing the collected data to help iterate the high-fidelity mockup and prototype.

JUMP TO FINAL DESIGN
RESEARCH

Through one-on-one interviews, we were able to learn more about our target users and uncover specific pain points. Using empathy mapping, user personas, and a user task flow, we were able to layout our findings to help us understand and visualize the problem.

Interviews

To learn more about our target users, I took the lead to conduct several semi-structured interviews. Some of our main findings include:

  • Individuals feel indecisive, frustrated, and anxious when it comes to choosing outfits. This process can eat up a lot of time.
  • Individuals ask friends for input on their outfits, and look at YouTube, Pinterest, and social media influencers for fashion tips and advice.
  • Individuals find themselves resorting to wearing the same few outfits, when their wardrobe holds a lot more potential.
  • Individuals would like a tool to organize their clothing and help them pick an outfit. Additionally, a tool that can help them express more creativity and share ideas with their friends.

User Personas

After reviewing the results of the interview, I crafted the following user personas. These personas are intended to guide the group with clear direction to understand the users.

Empathy Maps

To further drive our knowledge of our target users, I created empathy maps. Empathy mapping served as an additional method for us to visualize the underlying needs and pain points of the users.

User Journey Map

I took the initiative to take our two user personas and consolidate them into a User Journey Map. This helped visualize our user's thoughts when choosing an outfit while interacting with our tool. Our User Journey Map was the final key that led us to our design phase.

DESIGN

Ideation

With a full understanding of our users,  we decided on designing Cloato as a mobile application that works as a powerful virtual closet tool.

We brainstormed essential features that should allow users to:

  • Add clothing/accessories to their virtual closet.
  • Compile their clothing/accessories into outfits.
  • Filter through their virtual closet to find specific items.
  • Share outfits and find inspiration with outfit sharing.
  • Shop in a marketplace that is tailored to their taste.

User Flow

I created a user flow that visualizes the specific steps and interactions our user takes to accomplish the main staple of our application, which is modifying your virtual closet by adding or editing.

This user flow reaffirmed that the main function of our application is intuitive, and can provide a satisfying loop for the users.

Lo-Fi Prototype

With the blueprint for our design, we created a paper prototype and demoed it to gain feedback from potential users.

We received the following user feedback:

  • Allow users to upload their own pictures for outfits/items
  • Market should include more detail, compared to just an image of the item.
  • Flow of the application from page to page is good and consistent.
  • Utilize the top of the screen for Add/Edit.
  • Add more emphasis to the user’s outfits in the profile section.
  • “Save” button seems redundant for an iOS application.

We decided to make these 5 changes to address the feedback we received from our paper prototype demo:

  • Reproach the layout and actions it takes to add/edit an outfit.
  • Flesh out the marketplace with categories, a title for the item, and a price.
  • Remove the save button.
  • Allow users to upload their own cover photo’s for outfits/items.
  • Increase the size of public outfits on the user’s profile.

Info Architecture

I created our final info architecture:

Final Design

Utilizing Figma, I created the high fidelity mockup and prototype of Cloato.

The prototype of Cloato showcases key features:

EVALUATE

Usability Testing

To assess the effectiveness of our design, I helped carry out a series of usability testing sessions involving our target audience, which consisted of individuals who expressed an interest in fashion, and those who had a desire to improve their wardrobe.

Following an introduction to the project's objectives and a brief survey collecting demographic information (such as their age, gender, and perceived stress level), we presented them with a sequence of tasks to complete:

  • Add an outfit.
  • Edit a pre-existing outfit.
  • Add a piece of clothing/accessory.
  • View your profile and add a friend.

User Feedback

We then asked them about their experience navigating the prototype, how effective it could be on their life, and the frequency at which they’d use it. In general, our users liked the prototype because:

  • The application’s design is simple and easy to use.
  • Adding outfits/items is intuitive and is visually appealing.
  • It is a tool that they could see helping with the process of choosing an outfit.
  • The friends feature has a lot of potential, and can improve their own wardrobe.
  • It’s a tool that can help with their anxiety when it comes to their fashion sense.

Some constructive feedback we received included:

  • The profile page can be fleshed out more with titles for outfits, and more features for social interaction.
  • Outfits and Closet page look visually similar, this causes some confusion when navigating the app.
  • The marketplace could use an in-app cart so you could purchase multiple items.
  • Add more emphasis to the user’s outfits in the profile section.

Key Takeways

After reflecting on the usability tests, a few key takeaways included:

  • A simple and intuitive user experience that doesn’t overwhelm the user goes hand-in-hand with our vision of developing an app to improve quality of life.
  • Social features expand the core experience of the app, but they shouldn't stray off and create a platform for “showing off” or social gain.
  • Cloato should be an app that users don’t spend countless hours on. It should be a tool that greatly benefits the user, while not requiring a large amount of time and commitment.

Steps for the Future

Based off the constructive feedback we received, and our own vision, a few improvements we’d make for our next interaction would include: