Flair
Celebrating identity through style
An app that leverages fashion to create a supportive space for trans and queer creatives, amplify underrepresented voices, and promote gender-affirming inclusivity, empowering all bodies and identities.
Flair
Celebrating identity through style
An app that leverages fashion to create a supportive space for trans and queer creatives, amplify underrepresented voices.
Flair
Celebrating identity through style
An app that leverages fashion to create a supportive space for trans and queer creatives, amplify underrepresented voices, and promote gender-affirming inclusivity, empowering all bodies and identities.
Flair
Celebrating identity through style
An app that leverages fashion to create a supportive space for trans and queer creatives, amplify underrepresented voices.
Awards
UCI Designathon 2024, 2nd Place
Roles
UX Designer
UX Researcher
Timeline
48 hours
Team
Kaiwen Tang
Richie Sarinana
Jump to solution ↓
Flair
Celebrating identity through style
An app that leverages fashion to create a supportive space for trans and queer creatives, amplify underrepresented voices, and promote gender-affirming inclusivity, empowering all bodies and identities.
Awards
UCI Designathon 2024
2nd Place
Timeline
48 Hours
Product
Kaiwen Tang
Richie Sarinana
Owen Payton
Roles
UX Designer
UX Researcher
Full-Stack Designer
01 THE PROBLEM
For many transgender and genderqueer individuals, fashion is way more than just clothing — it's a vital expression of their identity and a way to navigate the world.
01 THE PROBLEM
For many transgender and genderqueer individuals, fashion is way more than just clothing — it's a vital expression of their identity and a way to navigate the world.
Yet, finding clothing that truly resonates with their sense of self can be challenging in a landscape dominated by heteronormative standards.
This project was born from our shared experiences in the queer community and the struggle to find fashion spaces that truly celebrate and affirm our identities.
02 The research
Understanding our users and the problem space.
02 The research
Understanding our users and the problem space.
Research Procedures & Statistics
We listened to 20+ genderqueer people… and their frustration is undeniable.
We listened to 20+ genderqueer people… and their frustration is undeniable.
Through 25 user surveys and 3 user interviews, we received input from people from all across the queer gender spectrum to explore stories and challenges with finding fashion inspiration, how their fashion goals relate to their identity, and possible features for Flair.
Through 25 user surveys and 3 user interviews, we received input from people from all across the queer gender spectrum to explore stories and challenges with finding fashion inspiration, how their fashion goals relate to their identity, and possible features for Flair.
76%
76%
…struggle to find accurate brand, price, or availability of products.
64%
64%
…struggle with where to start when exploring new styles.
80%
80%
…want to document outfits over time & track their evolving style.
User interviews
A conversation with three trans people:
Frustrated by: A lack of trans-inclusive fashion platforms, along with algorithms that fail to protect against transphobia, making it harder to find affirming clothing and leading to user disengagement.
Motivated by: The desire to express their evolving identities through gender affirming clothing and connect with a likeminded community.
A conversation with three trans people:
Frustrated by: A lack of trans-inclusive fashion platforms, along with algorithms that fail to protect against transphobia, making it harder to find affirming clothing and leading to user disengagement.
Motivated by: The desire to express their evolving identities through gender affirming clothing and connect with a likeminded community.
Research Synthesis
Sorting through the notes, quotes, observations, and research data by creating an affinity map.
competitive analysis
Currently, there isn't an efficient solution.
One of the main platforms for fashion inspiration is Instagram: a popular but algorithm-driven platform that often overlooks queer and trans fashion. Analyzing competitors revealed that mainstream apps prioritize reach over inclusivity, leaving trans users without tailored experiences.
One of the main platforms for fashion inspiration is Instagram: a popular but algorithm-driven platform that often overlooks queer and trans fashion. Analyzing competitors revealed that mainstream apps prioritize reach over inclusivity, leaving trans users without tailored experiences.
Summary of research
Challenges in Finding Affirming Clothing
Trans and genderqueer individuals struggle with limited inclusive options along with a lack of price and product transparency, making it difficult to find clothing that truly reflects their identity.
Lack of Inspiration and Starting Points
Users often feel lost when exploring new styles, lacking clear guidance or resources to help begin their fashion journey.
Unsafe and Unwelcoming Mainstream Platforms
Unchecked transphobia and a lack of tailored experiences on mainstream platforms lead to disengagement and frustration, leaving users without safe, affirming digital spaces.
03 The Design
Encapsulating our research into a streamlined experience.
User Journey Map
Mapping the user flow.
Based on the research, trans and genderqueer individuals prioritize product and style discovery along with outfit documentation. Thus, the main processes of the user journey consist of a personalized onboarding process, then viewing a product, creating a post or collection, and viewing your timeline or collections.
Based on the research, trans and genderqueer individuals prioritize product and style discovery along with outfit documentation. Thus, the main processes of the user journey consist of a personalized onboarding process, then viewing a product, creating a post or collection, and viewing your timeline or collections.
LoW Fidelity Wireframes
LoW Fidelity Wireframes
Starting from square one
I narrowed in on the home, profile, and post screens at this stage and wanted to gather external feedback early. I asked users to navigate the prototype with guidance to observe:
Whether the layout felt intuitive
If there were features or information they thought were lacking
How they felt navigating the screen
Wireframe Takeaways:
Positive: The overall layout was received well and users said that it seemed intuitive.
Negative: Users didn't like the multiple options in the navbar and would prefer something simpler and more straightforward. The amount of options was overwhelming, especially in a new app environment.
Thus, we decided to opt for a simpler navbar design. Talking to our testers, they informed us that fewer options meant the app felt cleaner and less daunting.
Branding and Design System
A playful approach to fashion.
Taking a page from gentle pastel shades that subtly evoke pride flag hues, we've pieced together an easy-on-the-eyes design system that exudes warmth, fun, and positivity. The selection of colors establishes a jovial atmosphere, and the written content projects an assertive yet comforting, positive and motivating tone.
Copywriting
Keeping things positive.
We prioritized language and content that encourage confidence and inclusivity, recognizing that uplifting queer voices is an intersectional issue. Uplifting Voices is a key feature designed to amplify and celebrate queer perspectives with messaging that’s empowering, positive, and affirming.
We prioritized language and content that encourage confidence and inclusivity, recognizing that uplifting queer voices is an intersectional issue. Uplifting Voices is a key feature designed to amplify and celebrate queer perspectives with messaging that’s empowering, positive, and affirming.
User testing and iteration
Lets iterate!
After the initial navbar change from our low-fi testing, we were satisfied with the navbar's appearance and function… But further A/B testing showed us that users were still unsatisfied by the navbar—it seemed "empty" and externally inconsistent with other apps.
Edits were made to labels as well: our first design was problematic since it forces users to use memory to recall what the labels were.
Lets iterate!
After the initial navbar change from our low-fi testing, we were satisfied with the navbar's appearance and function… But further A/B testing showed us that users were still unsatisfied by the navbar—it seemed "empty" and externally inconsistent with other apps.
Edits were made to labels as well: our first design was problematic since it forces users to use memory to recall what the labels were.
How can I upkeep visibility of the system status during onboarding ?
Onboarding is the user's first impression of the app and an essential element for user retention. Guaranteeing that the user is visible of the system status (ie. number of steps) is vital for a smooth and reassuring experience.
How can I upkeep visibility of the system status during onboarding ?
Onboarding is the user's first impression of the app and an essential element for user retention. Guaranteeing that the user is visible of the system status (ie. number of steps) is vital for a smooth and reassuring experience.
04 The Solution
Final Design Walkthrough
04 The Solution
Final Design Walkthrough
Onboarding
A welcoming and fresh tutorial.
A welcoming and fresh tutorial.
Our onboarding features positive copywriting with safety-first agreements, emphasizing inclusivity and empathy. The custom vector art is fun and bright, and the linear process allows users to select their style, ensuring a welcoming and straightforward experience.
Our onboarding features positive copywriting with safety-first agreements, emphasizing inclusivity and empathy. The custom vector art is fun and bright, and the linear process allows users to select their style, ensuring a welcoming and straightforward experience.
Onboarding
A welcoming and fresh tutorial.
Our onboarding features positive copywriting with safety-first agreements, emphasizing inclusivity and empathy. The custom vector art is fun and bright, and the linear process allows users to select their style, ensuring a welcoming and straightforward experience.
home
A colorful mosaic of fun.
A colorful mosaic of fun.
Flair's homescreen divides into "Explore" and "Following" sections. The mosaic-bento feed strikes a balance between readability and content density, highlighting special posts like creator spotlights, suggested styles, and dynamic, inclusive tagging to filter by identity or style.
Flair's homescreen divides into "Explore" and "Following" sections. The mosaic-bento feed strikes a balance between readability and content density, highlighting special posts like creator spotlights, suggested styles, and dynamic, inclusive tagging to filter by identity or style.
home
A colorful mosaic of fun.
Flair's homescreen divides into "Explore" and "Following" sections. The mosaic-bento feed strikes a balance between readability and content density, highlighting special posts like creator spotlights, suggested styles, and dynamic, inclusive tagging to filter by identity or style.
posts
Share your fashion journey & save fits.
Share your fashion journey & save fits.
Individual posts display users' names, pronouns, and optional tags, with a storytelling aspect for transitions. Features like saving, commenting, and safety-reporting/blocking, along with affirming suggestions, promote engagement. "You may also like" further increases interaction.
Individual posts display users' names, pronouns, and optional tags, with a storytelling aspect for transitions. Features like saving, commenting, and safety-reporting/blocking, along with affirming suggestions, promote engagement. "You may also like" further increases interaction.
posts
Share your fashion journey & save fits.
Individual posts display users' names, pronouns, and optional tags, with a storytelling aspect for transitions. Features like saving, commenting, and safety-reporting/blocking, along with affirming suggestions, promote engagement. "You may also like" further increases interaction.
Product lens
View tagged items and shop related.
View tagged items and shop related.
The product lens showcases user-generated content and product tagging with a toggle feature to view where items are located. The product discovery feed appears in a carousel underneath, enhancing the shopping experience and personalization.
The product lens showcases user-generated content and product tagging with a toggle feature to view where items are located. The product discovery feed appears in a carousel underneath, enhancing the shopping experience and personalization.
Product lens
View tagged items and shop related.
The product lens showcases user-generated content and product tagging with a toggle feature to view where items are located. The product discovery feed appears in a carousel underneath, enhancing the shopping experience and personalization.
Profile and journey
View fashion timeline and organize saved inspo.
View fashion timeline and organize saved inspo.
User profiles allow identity and pronoun tagging for full inclusion. Users can toggle between their saved content or their personalized timeline. Tailored fashion cards based on habits further enhance the user experience and engagement on the platform.
User profiles allow identity and pronoun tagging for full inclusion. Users can toggle between their saved content or their personalized timeline. Tailored fashion cards based on habits further enhance the user experience and engagement on the platform.
Profile and journey
View fashion timeline and organize saved inspo.
User profiles allow identity and pronoun tagging for full inclusion. Users can toggle between their saved content or their personalized timeline. Tailored fashion cards based on habits further enhance the user experience and engagement on the platform.
05 THE Conclusion
Flair was my second-ever designathon project and held deep personal significance for both me and my teammates. Flair emphasized fashion — something all three of us love — as an essential tool for identity affirmation.
Designing Flair was an exercise in intentionality, highlighting the importance of being deeply thoughtful when building a platform aimed at celebrating evolving identities.
Lessons Learned
Scope Creep: Flair became too broad in its feature set, attempting to address a wide range of needs but sacrificing depth in doing so. A more focused approach targeting key pain points specific to transitioning individuals would have created a sharper, more impactful experience.
Process Hiccups: The time crunch led to rushed iterations, making it difficult to track and refine concepts effectively. A more deliberate process, incorporating additional lo-fi and mid-fi wireframes, would have improved our ability to test and iterate thoughtfully.
Feature Prioritization: An Effort vs. Impact matrix would have helped focus on high-value features, ensuring a cohesive and manageable product. Instead, we tackled too many ideas at once, leading to a less polished outcome.
Future explorations
Future directions for Flair include transition-specific tools like outfit guides, personalized styling, and safe shopping resources.
Community features such as collaborative boards and user-driven content could strengthen connections, while fashion challenges and mood-based recommendations support long-term engagement.
Participating in this designathon was an exciting and rewarding experience! Grateful to my amazing teammates Kaiwen and Richie, the judges for their feedback, and UCI for hosting such a fun competition <3
05 THE Conclusion
Flair was my second-ever designathon project and held deep personal significance for both me and my teammates. Flair emphasized fashion — something all three of us love — as an essential tool for identity affirmation.
Designing Flair was an exercise in intentionality, highlighting the importance of being deeply thoughtful when building a platform aimed at celebrating evolving identities.
Lessons Learned
Scope Creep: Flair became too broad in its feature set, attempting to address a wide range of needs but sacrificing depth in doing so. A more focused approach targeting key pain points specific to transitioning individuals would have created a sharper, more impactful experience.
Process Hiccups: The time crunch led to rushed iterations, making it difficult to track and refine concepts effectively. A more deliberate process, incorporating additional lo-fi and mid-fi wireframes, would have improved our ability to test and iterate thoughtfully.
Feature Prioritization: An Effort vs. Impact matrix would have helped focus on high-value features, ensuring a cohesive and manageable product. Instead, we tackled too many ideas at once, leading to a less polished outcome.
Future explorations
Future directions for Flair include transition-specific tools like outfit guides, personalized styling, and safe shopping resources.
Community features such as collaborative boards and user-driven content could strengthen connections, while fashion challenges and mood-based recommendations support long-term engagement.
Participating in this designathon was an exciting and rewarding experience! Grateful to my amazing teammates Kaiwen and Richie, the judges for their feedback, and UCI for hosting such a fun competition <3