EasyFits Avatar Creation Design

  • May 2024-Present
  • UX UI Design
  • Experience
  • travel-app-mockup

    PROJECT OVERVIEW

    As EasyFits set out to lauch a groundbreaking virtual wardrobe to simplify online shopping, the first critical step was enabling users to create their custom avatars. Since the accuracy of the fit relies on users inputting their body measurements, it was essential to both encourage them to provide this vital information.

    My responsibilities:
  • Wireframing and prototyping screens
  • User testing and iterating designs
  • User Research

    WHAT IS THIS PROJECT ABOUT?

    The problem:

    I originally joined the project to design screens specifically for the feature customisation section. However, after testing, our results showed that the onboarding process was not only confusing but also tedious. As a result, we completely redesigned the entire process, ensuring the onboarding remained quick and easy.

    Rough idea of what it looked like before

    old screens
    What did pliminary testing tell us?

    Before we finalised the process, we conducted pliminary testing both in-person and remotely with various users and our analysis suggested numerous changes before we could proceed.

    Therefore, using a quatitavtive approach, the results from our testing revealed:

    Lack of a progress bar left users unaware of the process length

    Too much information to fill at once

    Measurement units had to all individually be changed if needed

    Lack of clear instructions/descriptions

    Unclear tooltips

    Features being skipped during customisation

    Some users felt the process was 'forced'

    Design didn't feel uniformed

    Prototyping

    What did we achieve from the feedback?

    prototypes

    SO, WHAT ACTUALLY CHANGED?

    Let's begin with the information architecture. In the previous design all inputs we wanted users to enter was overcrowding on a single page, which meant it could get a bit overwhelming. Not to mention, we assumed that users would be more than happy to provide all of the information we asked for. So, instead we changed to adapt less busier screens. Still asking for the same information, just giving users more control over how much they can see.

    labeled image 3

    In addition to tackle the overcrowsing issue, we also added a clear progress bar indicating to users length of the process as they progress. Although, most importantly, considering that not everyone knew their basic measurements (e.g., chest, waist and hips), we made sure to give users an option to choose from generic sizes instead. The team had done prior research on what the realistic measurements for each size would be based on the height and weight users enter, and this would in turn generate an avatar as close as possible to the user's body. Although, it is crucial to note that this feature continues to improve as we set out to gather real-time information from users.

    From our analysis, it was understood that one of the main reason why users felt overwhelmed was because we asked them to input their measurement immediately wiithout proper explaination or control. Therefore, we decided it was best to keep this a skippable option but simultaneously encouraging them to modify their avatar. We did so by giving them an idea of what their avatar currently looks like, and should they feel dissatisfied, they can then modify each measurement in more detail.

    labeled image 2

    Lastly, as many users were not completing the entire feature customisation due to the categories being unclear and almost hidden, the layout was changed to adapt a friendlier and likely familar layout. Not only would this allow a better coherent structure as users make their way down the list, but selected categories were also clearly highlighted.

    Full reset options also became available to users should they feel the need to. This was added both to the feature customisation and modify sections.

    labeled image 3

    WHATS AT THE END OF ALL OF THIS?

    To answer that question, once the avatar has been created, the user is directly taken to their profile. Here they are able to customise and modify again, or explore the quizzes we have created just for them (and for us to collect data) or for those with lucky referral codes from our brand ambassadors, they can make sure to let us know who sent from right from their profile

    labeled image 4

    Whilst this page may look finished, we are far from done. I continue to carry-out last rounds of user testing on this new avatar creation process in hopes of learning and improving the onbaording. For example, my testing thus far has revealed that once users reach the end of the process and reach the profile page, they are unsure of what to do this and what they can do with their avatar. Therefore, after discussing with the CEO and the rest of the team, we have agreed to add clear indication of what stores users could potentially use their avatars to try-on clothes and perhaps give them a chance to try-on testing clothes right from their profile as client stores get ready behind the scenes.

    WHATS NEXT?

    I continue to carry out user testing with the help of some of my collegues, and continue to learn more about what is missing and how certain features could be improved. Whilst the process is live, we consider it to be 90% done and usbale, therefore, for the rest of the 10%, I am currently working on new features and specific changes to add to the avatar customisation so that we are able to achieve good UX. The goal is to create a process that is fun and creative, which could potentially even attract more users by simply word-of-mouth.