case study • ux design • SOcial equity
case study • ux design • SOcial equity
Flair
Flair
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.
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.
Jump to solution ↓
Jump to solution ↓
Roles
UX Designer
UX Researcher
Full-Stack Designer
Team
Kaiwen Tang
Richie Sarinana
Owen Payton
Awards
UCI Designathon 2024
2nd Place
Timeline
48 Hours
May 17 – 19, 2024
Awards
UCI Designathon 2024, 2nd Place
UCI Designathon 2024
2nd Place
Roles
Roles
UX Designer
UX Researcher
Full-Stack Designer
UX Designer
UX Researcher
Full-Stack Designer
Timeline
48 hours
Team
Kaiwen Tang
Richie Sarinana
Owen Payton
Overview
Overview
In Spring 2024, I participated in UC Irvine's annual Designathon, where the design prompt challenged us to "create an app that fosters creative expression for a more inclusive society".
Our team's solution, Flair —a fashion app for transgender and genderqueer identities—stood out among over 200 competitors, earning us 2nd place!
In Spring 2024, I participated in UC Irvine's annual Designathon, where the design prompt challenged us to create an app that "fosters creative expression for a more inclusive society ".
Our team's solution, Flair —a fashion app for transgender and genderqueer identities—stood out among over 200 competitors, earning us 2nd place!
01 THE PROBLEM
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.
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.
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
02 The research
Understanding our users and the problem space.
Understanding our users and the problem space.
Research Procedures & Statistics
Research Procedures
& Statistics
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.
…struggle to find accurate brand, price, or availability of products.
64%
64%
…struggle with where to start when exploring new styles.
…struggle with where to start when exploring new styles.
80%
80%
…want to document outfits over time & track their evolving style.
…want to document outfits over time & track their evolving style.
User interviews
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
Research Synthesis
Sorting through the notes, quotes, observations, and research data by creating an affinity map.
Sorting through the notes, quotes, observations, and research data by creating an affinity map.
competitive analysis
competitive analysis
Currently, there isn't an efficient solution.
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
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.
Trans and genderqueer individuals struggle with limited inclusive options along with a lack of price and product transparency.
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.
Users often feel lost when exploring new styles, lacking clear guidance or resources to help them 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.
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
03 The Design
Encapsulating our research into a streamlined experience.
Encapsulating our research into a streamlined experience.
User Journey Map
User Journey Map
Mapping the user flow.
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
- Whether the layout felt intuitive
- If there were features or information they thought were lacking
- How they felt navigating the screen
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.
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.
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
Branding and Design System
A playful approach to fashion.
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.
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
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.
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.
User testing and iteration
User testing and iteration
Lets iterate!
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 we 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
04 The Solution
Final Design Walkthrough
Final Design Walkthrough
Onboarding
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.
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.
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.
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.
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.
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 explorations for Flair include transition-specific tools such as outfit guides for transitioning bodies, personalized styling recommendations, and safe shopping resources tailored to unique needs.
Enhancing community engagement through features like collaborative boards, styling tips, and user-driven content would foster deeper connections.
Additionally, retention strategies like fashion challenges and mood-based recommendations could ensure consistent user engagement and sustained value.
Participating in this designathon was such an exciting and rewarding experience! I’m incredibly grateful to my amazing team (friends) Kaiwen and Richie for their collaboration, the judges for their valuable feedback, and UCI for organizing and hosting this super fun competition :)
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
Thoughtfulness in Design:
Participating in my second designathon, I realized the significance of being intentional when designing for marginalized communities.
Building a platform like Flair required a user-centered approach, ensuring inclusivity and empowerment at every step.
Process Hiccups:
Time constraints led to rushed organization, limiting iteration tracking and refinement.
More lo-fi and mid-fi prototypes could have facilitated robust testing and smoother iteration cycles.
Feature Prioritization:
Balancing ambition with focus was a challenge. Fewer, high-impact features tailored to transitioning individuals could have deepened Flair’s effectiveness.
Future explorations
Future explorations for Flair include transition-specific tools such as outfit guides for transitioning bodies, personalized styling recommendations, and safe shopping resources tailored to unique needs. Enhancing community engagement through features like collaborative boards, styling tips, and user-driven content would foster deeper connections. Additionally, retention strategies like fashion challenges and mood-based recommendations could ensure consistent user engagement and sustained value.
Participating in this designathon was such an exciting and rewarding experience!
I’m incredibly grateful to my amazing team for their collaboration, the judges for their valuable feedback, and UCI for organizing and hosting this fantastic event.
Let's keep in touch!
Let's keep in touch!
