Fio — Your Style Muse

Overview

Fio is a virtual wardrobe and personal style platform designed to turn a user's real closet into a visual, organized and personal digital space.

Users can upload their own clothing, organize individual pieces, create outfits, collect visual inspiration and define their style preferences.

Rather than approaching wardrobe management as a traditional inventory or productivity tool, Fio was designed to feel closer to a fashion editorial, personal archive and styling experience.

The problem

Most people own more clothing than they actively remember, combine or use.

Inspiration is usually scattered across saved posts, screenshots and moodboards, while the actual wardrobe exists somewhere completely separate.

Fio brings those pieces together in one product. The goal is not simply to digitize a closet, but to turn it into a tool for understanding, organizing and better using the clothes that already exist.

• the clothes someone already owns
• the outfits they actually wear
• the visual references they save
• the personal style they are trying to build

My role

I designed and built Fio as a personal product project, defining both its visual identity and the product experience.

• product concept
• interaction design
• visual direction
• wardrobe management flows
• clothing upload and editing
• outfit creation
• inspiration management
• personal style preferences
• data modelling
• frontend implementation

• PRODUCT DESIGN
• FRONTEND DEVELOPMENT
• UX / UI
• DATA MODELLING
• VISUAL DIRECTION

Product concept

Fio was intentionally designed to avoid the visual language of traditional dashboards.

The product combines wardrobe organization with a fashion-editorial experience: large typography, editorial compositions, organic shapes, warm colors, playful interactions and visual references to fashion magazines and curated objects.

The goal was to make organizing clothing feel expressive rather than administrative.

Wardrobe management

Users can build a digital version of their wardrobe by uploading their own clothing items.

Each item becomes an individual piece inside the collection and can hold structured information. Users can also search and filter their wardrobe to find specific pieces.

• name
• category
• subcategory
• primary color
• material
• season
• notes
• number of times worn
• last worn date

1. 1UPLOAD
2. 2ORGANIZE
3. 3USE

Outfit building

Fio allows users to manually combine pieces from their wardrobe and save them as outfits.

This creates a reusable layer on top of the wardrobe itself: individual clothes become combinations the user can return to later.

The current version focuses on manual outfit creation using pieces already saved in the collection.

Inspiration & moodboard

Style does not come only from the clothes someone owns.

Fio includes a visual inspiration space where users can save images that represent outfits, colors, silhouettes or aesthetics they want to explore.

This creates a bridge between external inspiration and the user's own wardrobe.

Personal style

Users can define personal style preferences that describe the visual direction they are interested in.

These preferences are designed to become part of the context used by the future styling assistant.

• favourite colours
• favourite aesthetics
• style references

A wardrobe that learns your taste

The long-term product direction is to connect three types of information.

The wardrobe describes what is available. The moodboard captures visual inspiration. Style preferences describe the user's taste. Together, those elements create the foundation for a more contextual styling experience.

1. 1WHAT YOU OWN
2. 2WHAT YOU LIKE
3. 3WHERE YOU ARE GOING
4. 4OUTFIT SUGGESTIONS

AI stylist — Work in progress

The next layer of Fio is an AI-assisted stylist.

The goal is for users to describe an occasion or context — for example a dinner, university day, job interview or event — and receive outfit suggestions using pieces that already exist in their wardrobe.

This AI recommendation feature is currently in development and is not yet fully functional.

• wardrobe items
• personal style preferences
• saved inspiration
• occasion or context

• WORK IN PROGRESS

Personal space

Because the wardrobe contains personal content, Fio includes an account-based experience that separates each user's clothing, outfits, inspirations and preferences.

Tech stack

• React
• TypeScript
• Supabase
• Supabase Auth
• Supabase Database
• Supabase Storage
• CSS

Challenges

One of the main challenges was designing a data structure flexible enough to represent something as visual and subjective as a personal wardrobe.

Clothing needs structured attributes for searching and filtering, but the product also needs to preserve the emotional and visual side of personal style.

Another challenge was designing several connected experiences — wardrobe, outfits, inspirations and preferences — without making the product feel like a traditional management dashboard. The visual system therefore became part of the product problem, not simply decoration.

Result

The current version of Fio provides a functional foundation for a personal digital wardrobe.

Users can organize clothing, manage individual pieces, create outfits, save inspiration and define style preferences inside a single visual system.

The project currently functions as a wardrobe and personal style platform, while the AI-assisted recommendation layer remains under active development.

What I learned

Fio reinforced the idea that product design and software architecture are deeply connected.

A feature such as outfit recommendations depends on much more than the final AI interaction: the application first needs meaningful wardrobe data, user preferences and contextual information.

Building the product also required balancing structured data with a highly visual experience, and designing an interface where organization does not remove personality.