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.
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.
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.
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?”
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?
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:
Retailers:
Competitors:
With validation from research and advisors, we were good to go with our solution!
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:
- the onboarding process and;
- 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.
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.
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
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 inputThe 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 parametersOne 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