Hackathon / VirtuDrip
PROBLEM
The fashion industry is responsible for the highest number of online returns in the world. Clothing is the #1 most returned online purchase, and the average returns for online apparel orders is triple the amount of returns for in-store purchases.
Online returns are not only inconvenient and costly, but they are also extremely wasteful and environmentally harmful. From our research, we found that the main reason for returns is because customers struggle to visualize how clothing online would fit and look in real life.
SOLUTION
VirtuDrip is a virtual fitting room that is reimagining fashion and personalizing the online shopping experience. Users can try on items from a wide selection of tops, bottoms, and accessories to find their perfect style, fit, and colour in clothes. They can also upload items from real online shopping sites to see a mock "try-on" of the item in 3D.
Our product helps buyers shop online with confidence and avoid unnecessary and wasteful returns.
RESEARCH
As the lead UX Designer, I conducted initial research to validate the problem and empathize with our user: an avid online shopper who is environmentally conscious.
Key Findings
- Clothing is the #1 most returned online purchase, with customers sending back up to 40% of garments (Statista, 2024).
- The top three reasons for online apparel returns in the past 12 months, according to surveyed apparel brands and retailers, are size/fit (53% of respondents), color (16%) and damage (10%) (Coresight, 2023).
- Fuelled by the rise of fast fashion, clothing returns alone release the same emissions as 3 million cars in the US (Cleanhub, 2024).
- In 2022 alone, 9.5 billion pounds of returned products were sent straight to landfill (Cleanhub, 2024).
The main struggle with online shopping is that customers struggle to visualize products in terms of the look, feel, and size/fit of items. In other words, the online shopping experience lacks the fitting room experience that customers can only get in store (as of currently).
How might we help online shoppers minimize returns?
IDEATION
We brainstormed how our virtual fitting room would look and function by drawing sketches and agreeing on our must-have and nice-to-have features before starting the design and development process.
Must-have features:
- Clothing selector and virtual try on
- Custom clothes (upload your own image)
Nice-to-have features:
- Landing page
- Colour analysis with recommended colours to wear
- Save and share preset outfits
- Add HawkHacks merch to inventory (to impress the judges)
EXPLORATIONS
Clothing Selector
This shows a bit of my design process, where I started off with a basic wireframe and got feedback from my devs before turning it into a high fidelity design. I experimented with a few other layouts and wireframes, but decided on this one because it was the most intuitive and user friendly.
Branding Explorations
Halfway through the hackathon, I decided to change the entire brand identity and went a little crazy trying to pick a new font and logo (if you can't tell), because my team wanted the product to have a more professional and sleek feel. Having good branding and UI design is so important for the pitch demo as it can leave a lasting impression on judges, influencing their final decision.
Landing Page
After changing the branding, I redesigned the landing page to align with the new visual identity. I also incorporated relevant statistics based on my research to help illustrate the global problem that online clothing companies contribute to and indicate how our solution fits business and user needs.
Colour Analysis
During this time, personal colour analysis and learning about your own colour palette (i.e., best colours to wear based on our your skin tone, hair colour, and eye colour) was trending on social media and Tiktok, originating from Korea. I thought it would be fun to leverage the virtual fitting room technology we built to provide a personalized online colour analysis for users.
Mobile Screens
I wanted to ensure that our webapp would be mobile responsive so I translated my web mockups into high fidelity mobile designs for the devs to reference while coding it.
FINAL DESIGNS
Branding
Website Mockups
Mobile Mockups
OUTCOME
This was only the second hackathon I've competed in and it was my first win! Our project, VirtuDrip, came in 2nd place overall, out of 850+ participants! So proud of myself and my team for this win 🥳🥈
MY IMPACT
- Led the design of brand identity, features, and user flows.
- Created stunning pitch slides that nailed our 3 minute demo.
- Learned Tailwind CSS and contributed to the front end development.
LEARNINGS
Teamwork makes the dreamwork
I took a risk to team up with 3 total strangers from Ottawa, and even let them sleep in my house. Safe to say, it was the best decision and risk I've taken! Disclaimer: I do not recommend trusting strangers 😆
Each member of our team showed up, bringing the best of their skills, mindset, and energy. This made our collaboration and team dynamic truly resemble a dream team, and I'm proud to say that we had so much fun throughout the hackathon while working our hardest. After sleepless nights surviving off pure determination (and Indomie ramen 🍜), we managed to finish our MVP from start to finish in just 36 hours.
Practice and perfect your demo pitch
Oftentimes, hackathon teams spend all their time building the project and leave no time to prepare for the demo and practice their presentation. Your idea can be the most innovative and creative project ever, but you need to sell the judges for them to believe it.
Learning from my previous hackathon (Hack The North), I allocated enough time to work on the pitch slides and script for the 3 minute demo.
This resulted in our final demo in front of the judges going super smoothly. The judges seemed impressed with our project as well as presentation, and we left the room feeling confident in our performance.
NEXT STEPS
Some additional features our team would've liked to implement if we had more time:
- Incorporate accurate sizing guides
- Make the colour analysis feature functional
- Allow user hand gestures to swipe between different clothing items
- Integrate with online shopping sites (maybe a "Buy Now" or "Shop Similar Items" button)
- Create a browser plugin for custom clothing try-on
- Add onboarding tooltips or tutorial screens
