Work  //  About




Fasho




Medium
Front-end, Adobe Creative Suite, Zeplin

Client/Class
Startup Studio: Fasho

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

Roles & Duties
Visual & UI designer and product manager.

As a team, choose a startup idea and work together to make that vision a reality. For us, that was to target fitting problems that come with online shopping. 









Product Overview









Users:
Fashion Consumers

Goal/Purpose:
Ensure satisfaction in fit and style prior to purchasing clothes online

Feature (Main):
Allowing users to map clothes on their virtual model prior to purchase by allowing users to try on clothes on their digital self.







Research Process




Brief




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

That is the experience we’re capitalizing on in Team Fasho, and we believe that shopping online does not have to be a gamble for fit and style.

The academic part of the project spanned about 3 months, agilely jumping anywhere between:


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


However, it is important to note that the company continued to grow and progress post-graduation.





Our Team (left to right):
  • Jonathan Haojaq Kho (Design)
    Communication Design student at Parsons that is inclined towards UI/UX design
  • Stephen Bongner (CS)
    Senior Software Engineer at Mastercard with 7 years in Biotech, Communications, and Payments
  • Angelo La Roche (MBA)
    Product Leader at Mastercard with 8 years in Payments
  • Shamant Hegde (MBA)
    8 years in healthcare consultation with a focus on analytics and data science
  • Ephraim Montag (CS)
    Dedicated and disciplined coder with weird and keen interest in things you wouldn’t expect









Challenge


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




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









Research & Solution




We’re aiming to build an app that lets users envision apparel on themselves before purchase, ensuring satisfaction in style and fit, taking one step towards reducing the likelihood of returns. This solution would also facilitate understanding of each brands’ target consumer and their sizing.







But why and why now?


With the rise of e-commerce, brick-and-mortar stores are going through a change, where retailers now are using it to provide unique social experiences. Since shopping is already being done online, consumers no longer show up at stores to make purchases. Rather, they’re there to experience something special.

Moreover, none of the other competitors have made any significant impact yet, so this means its all still an ongoing race.











What did we find?

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 male-centric, some are female-centric
  • Require extensive input of users’ own sizing – a struggle if users don’t have 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 good to go with our solution!











Design & Iteration



Userflow sketch & T.U.X.

Let’s back-track a little and review the steps taken to get to where we are today...

One of our key differentiators is measurement extraction 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.

With this in consideration, I came up with a userflow that’s specifically focusing on:

    1. the onboarding process and; 
    2. the “fitting room” screen

The former is where users take one front-facing image and enter their height, and the latter is where users virtually try-on their clothing of choice.








Key Players





Who we work with and who we test with













First page of the branding document










Corporate Branding

Before starting the design and development process, we sat as a team and decided what our brand and voice would be. Together, we’ve compiled a document that further explains who we are, our values, and our voice.




Visual Branding

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 of human proportions. 







And with all the above, I started to do a few sketches here and there...






and decided on the first draft...



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.






Front-end (User Interface)

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.








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










Working with Engineers


Zeplin workspace



Testing and feedback w/ Engineers









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



View the prototype

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, however, at the expense of a pixel perfect UI design.










Next Steps


Logistics
  • Follow up with advisors and brands that have agreed to partner with us
  • Follow up with investors that have expressed their interests

Design
  • User test with target consumers and retailers

Tech
  • Find a better alternative for 3D modelling
  • Find a more efficient way to digitize clothes that does not involve Blender




Mark
© 2018 Jonathan Haojaq Kho
Instagram  //  LinkedIn  //  Email  //  Résumé