Work    Gigs







Fasho


Medium

Front-end, Adobe Creative Suite, Zeplin

Client/Class
Startup Studio

Problem
How might we ensure fit and style satisfaction prior to purchase on fashion retail platforms?

Roles & Duties
Visual & UI Designer

Perfecting our concept, making that vision a testable reality. For us, that was to target fitting problems that come with online shopping.






Product Overview






Users:
Fashion Consumers

Goal/Challenge:
Creating an MVP that has a seamless onboarding process that allows users to mock up a digital version of theirselves

Feature (Main):
Allowing users to map clothes on their virtual model prior to purchase.












Problem


Lookin’ like a fool when you should be looking cool





Ever bought things online and expect yourself to look like one thing. But when the apparel comes, you look like another?

Shopping online does not have to be a gamble for fit and style.

For 3 months, we worked in an agile format:

Unpack ←→ Ideation ←→ Narrative ←→ Research ←→ Iteration ←→ Validation ←→ Design ←→ Communicate ←→ Prove and Complete Narrative






Team


There was always one clothing that didn’t fit our body 





Our Team (left to right):








Challenge


Are you sure you wanna buy that?





“How might we ensure fit and style satisfaction prior to purchase on fashion retail platforms?”

The fashion industry is valued at $3 trillion and expected to grow by 10% in the next four years. Among those, $360 billion is expected to be wasted in returns/refunds.





Context


A *lot* of people shop online. I mean, return is mostly free anyway!





With the rise of e-commerce and brick-and-mortar stores transforming from retail to unique social experiences, more and more consumers are shopping online. In terms of competitors, none have made any significant impact yet, so this means its all still an ongoing race.






Research & Proposed Solution

Lights. Camera. Shop.





We’re aiming to build an MVP that lets users envision apparel on themselves before purchase, ensuring satisfaction in style and fit, reducing the likelihood of returns. This solution would also help brands understand their consumer’s sizing.







Research Insights


It’s a race for solution and consumer’s are curious.



Consumers

  • Loved the idea of being able to virtually try-on clothes before purchasing
  • More stoked about the idea of digitizing oneself
  • Returns is a major problem. Some would rather let it sit in their closet untouched


Retailers

  • Interested in giving their consumers that novel digital experience
  • Curious about how clothes would be digitized (which then became our major concern)
  • Retailers like Burberry and ASOS are already providing cross-checking questionnaires that show the most popular size choice picked by their previous customers


Competitors

  • Some are catered for specific genders
  • Require extensive input of users’ own sizing – as if the user has a measuring tape lying around
  • Rarely any of them live nor have a prototype available
  • For those who digitize clothings, they do it own their own and not rely on a third party


With validation from research and advisors, we were off to building it out.






Visual Branding


The digitized Virtruvian Man



As for the visual brand, I started off by having the team choose a few images from 4 separate moodboards I’ve created, selecting visuals that represent Fasho.



However, one key inspiration that the team had was the Virtruvian Man – a symbol and study of human proportions.



And with all the above, I started to do a few sketches here and there...
and decided on the first draft that was designed from a isometric cube...




Fasho Logo 1.0


After bringing it to the team, it was clear that iterations needed to be done as some couldn’t unsee the beetle shape (if seen horizontally) once they caught it.

This led me to a few edits by readjusting the bottom part of the logo, leading to the final design.



Mapping & Designing & Iterating


Wait, will the backend work tho?




Userflow sketch & T.U.X.


Before we proceeded with the rest of the development, we had to make sure that we were able to extract measurements with one photo and one height input. By using computer vision, our team managed to reach up to 90%> accuracy with a well-lit photo.

To showcase our feature, I came up with a userflow that’s specifically focusing on:

    1. the onboarding process and;
      Users take one front-facing image and enter their height

    2. the “fitting room” screen
      Users take one front-facing image and enter their height, and the latter is where users virtually try-on their clothing of choice.

With as little friction as possible, our goal was to provide the user with our unique feature as early as possible from the moment they start the app. This is based on the common practice where retail apps have users browse clothings they want before forcing them to sign up.


Flow:

Open app --> Welcome message --> Instructions --> Enter height & gender --> Snap a full body picture --> Model --> Shop --> Try on --> Purchase





Key Members





Who we work with and who we test with







Rough UI & Flow







Laid out all the elements one screen:

  • height input in centimeters and inches
  • instructions
  • terms & conditions


After feedback, I realized it was better to split certain elements across different screens so it wasn’t so much of an info overload.

The Terms of Service was a conscious decision to include to address the privacy issues audiences and investors might ask. When the user click next, he/she agrees to our Terms of Service, which includes using their data collected to further improve our engineer side of the project.


Here I’ve split the short intro message with the instructions. In the most simplistic way, I highlighted  vertices and corners of the logo in a way that it looks like a pivot point to hint the notion of “measurement”.






Loading Screen Animation




Building up of the logo



Onboarding Userflow




Intro --> Enter height --> Take photo



Browsing & Fitting Room Flow




By tapping the clothe hanger icon, it adds it to the fitting room (fitting room icon on the bottom nav)




“Onboard” UI Mockups






Onboarding 1: overview and height input

The top priority when it came to designing the onboarding was to make sure it was seamless.

The logo transition was animated in a way where it would highlight vertices, indicating measurement, foreshadowing for what’s to come.






Onboarding 2: Photo taking process with screens showing photo parameters


One crucial thing to note here is that as the photo is being taken and processed at the server (without a GPU), it roughly takes up to half a minute. The loading transition plays a key role in showing progress as compared to a plain spinning icon that leaves users in the unknown.
Back to the Camera (Error State)

During our testing phase, we realized although there was ~85%> accuracy. There was potential for error due to poor photo. So I came up with a error state design that would show during the photo processing phase.


“Browse & Fit” UI Mockups



From browse to fitting room

I placed a coat hanger icon on each apparel for users to select clothes they liked. When users are done selecting their clothes, they can proceed to move to the “fitting room” tab to digitally try them on – kind of how you would do it physically at a retail store.









The entire flow (some were removed due to time constraints)

Open app --> Welcome message --> Instructions --> Enter height & gender --> Snap a full body picture --> Model --> Shop --> Try on --> Purchase


Back-end Structure



In short, the front end involved 3D software (MakeHuman) to create the models; our back end is a Python server with a collection of machine learning algorithms that transform your photo into a set of measurements for the modeling software to use.





The MVP


What we demo’ed to the public





Given the tight time constraints and limited engineering manpower we have on our team, we’ve only managed to build an MVP that runs on a web browser for demo and pitching purposes – at the expense of a pixel perfect UI design.




Mark
© 2019 Jonathan H. Kho
LinkedIn  //  Email  //  Résumé