1 of 21

TRANSEND APPAREL

Transend Apparel is a website that will be created as a channel for the new trans community to be able to swap their closets and receive clothing that fits their gender, while getting rid of the old clothes that no longer represent them.

^{Prepared by :}Laiba, Rain Lokadottir, Wakako Nishimura-Anderson, Christina Bennett.

TRANSEND APPAREL

P A G E 0 1

2 of 21

TRANSEND APPAREL

PROJECT OVERVIEW

The Problems:

Trans people often struggle to find sustainable, affordable ways to find clothing while also struggling with finding clothes that fit properly. This is a problem because 29% of the transgender adult community lives in poverty, making it even harder to purchase clothes. The trans community also faces a lot of discrimination which can hinder them from wanting to try clothes on in traditional brick and mortar stores. How might we provide an outlet that allows transgender people to find clothing that fits at an affordable price?

The Solution:

Our goal is to create a website that will ultimately help the trans community in getting rid of their old clothes while giving them a chance to affordably receive clothing that aligns with who they are. We want to be able to create a safe space for those in the community that need help with this change.

Our Roles:

UX Designers & Researchers: Laiba, Rain Lokadottir, Wakako Nishimura-Anderson, Christina Bennett.

Timeline: 3 weeks

Tools: Figma, Trello, Invision, Visual Studio Code, GitHub

P A G E 0 2

3 of 21

TRANSEND APPAREL

P A G E 0 3

01.USER RESEARCH INSIGHTS

During our interviews and survey, we discovered that those in the trans community struggle to find affordable clothing that's comfortable and the correct size. Therefore, we believe that the majority of our users take a while to transition their closet and we might be able to help if we were to create a website that allows an affordable way for users to receive a whole closet worth of clothes. We might do this by creating a way for users to trade their closets with others who are transitioning, too. Doing this will allow our product to make a difference in the trans community by allowing them to connect and help each other transition.

32% of the trans community are facing difficulty to transition a new wardrobe after coming out.
39.9% of the trans community are presenting in alignment with their gender from 1-3 years.
31.8% of the trans community tend to buy new clothes once a year.
35.1% of the trans community have only 101$-200$ budgeted for clothes per year.

(Insights)

4 of 21

TRANSEND APPAREL

USER RESEARCH INSIGHTS

(PROTO PERSONA)

P A G E 0 4

Our prototype persona, Kai, is a 22-year-old who has recently come out as transgender. With a desire to change his outward appearance, Kai is facing challenges in finding clothing that aligns with his gender identity while staying within his limited budget. He expressed a wish for a more convenient and affordable way to dispose of his old wardrobe and obtain a new, more masculine one. As we develop Transend Apparel, we aim to address the specific needs and challenges that individuals like Kai face when it comes to finding clothing that matches their gender identity.

5 of 21

Affinity diagram

LINK

6 of 21

TRANSEND APPAREL

I Like, I Wish, What If

P A G E 0 5

To ideate important features for our app, we decided to use a brainstorming activity called "I Like, I Wish, What If". This activity allowed us to openly discuss and come up with features. After we felt we had enough ideas, we categorizes and voted on which ones we thought would work best for our users

7 of 21

TRANSEND APPAREL

(USER INTERVIEWS AND EMPATHY MAPPING)

P A G E 0 6

(Feature Prioritization)

(Empathy Maps)

Following the user interviews, we developed a plan to address pain points experienced by the trans community in relation to finding clothing that aligns with their gender identity. We also conducted an empathy mapping session to better understand users' needs, preferences, and behaviors. Using this information, we prioritized features based on their feasibility, stakeholder input, and impact on user experience. Our goal is to create a platform that provides a positive and inclusive experience for all users.

USER RESEARCH INSIGHTS

8 of 21

TRANSEND APPAREL

P A G E 0 7

(USER PERSONA)

Following the empathy mapping exercise, we analyzed the data gathered from the user interviews to create a user persona. This persona represents our target audience and their needs, behaviors, and preferences. By defining this persona, we are better equipped to design and develop features that align with our users' goals and interests. Our aim is to create a platform that addresses the unique needs of the trans community and fosters a sense of belonging and inclusivity.

02.DEFINITION AND IDEATION

10 of 21

TRANSEND APPAREL

DESIGN STYLE TITLE + GUIDE

P A G E 0 8

We have maintained a consistent color palette that aligns with the original design.
The mood board images inspired us to use a more appealing combination of pink and purple shades throughout the design.
We incorporated gradient colors in our font choices to make the website more visually attractive and user-friendly.
The logo has been designed to work effectively with gradient colors and features the new color palette.
Social media iconography has been added to the footer for easy access to social media platforms.
We have created different button state versions to ensure an engaging and interactive user experience.

11 of 21

TRANSEND APPAREL

P A G E 0 9

MOOD BOARD

A mood board can serve as a helpful reference throughout the design process and can ensure that all design elements are aligned with the overall visual direction of Transcend Apparel.

12 of 21

TRANSEND APPAREL

P A G E 10

USER FLOW

When the user visits the site, they see a "Log In" option if they have an account, otherwise they land on the homepage.
If the user doesn't have an account, they create one by providing their pronouns and location on the homepage.
The user then inputs their size and style preferences since this is a transcend apparel website.
After that, the user can view their matches.
If the user has a match, they can select it to proceed to the next step.
If the user hasn't selected a match yet, they can either go back to their profile or continue viewing the matches.
When the user selects a match, they are prompted to choose a payment type. The available options are Apple Pay, Credit Card, and Google Pay.
The user inputs their address and confirms the order.
Finally, the order is processed and the user is taken to a confirmation page.

To help us visualize and identify the different elements of the process, and the interrelationships among the various steps, we used the user flow (created for MVP) as a graphical representation of the ecosystem.

13 of 21

TRANSEND APPAREL

03.PROTOTYPING

P A G E 11

(LOW-FIDELITY PROTOTYPING)

In the low-fidelity prototyping stage, we created rough sketches of the website design that included a simple navigation bar, size chart for clothes, and a basic footer. This helped us to quickly visualize and iterate on different design concepts without investing too much time or resources.

14 of 21

TRANSEND APPAREL

03.PROTOTYPING

P A G E 12

(MID-FIDELITY PROTOTYPING)

To address these issues, we moved onto mid-fidelity prototyping and incorporated more detailed design elements, such as dropdown menus for the navigation bar and interactive elements for the size chart. We also added more links and options to the footer to improve website navigation.

15 of 21

TRANSEND APPAREL

04.TESTING AND ITERATING

P A G E 13

LOW-FIDELITY USER TESTING (LINK)

Participants found the terminology used on the site easy to understand and inclusive.
One participant found the CTA (call-to-action) button unclear at first but realized it was a button after clicking it.
Participants knew to click on the CTA button to create an account.
Some participants suggested that if they weren't logged in, there should not be a profile button.
Participants found it easy to locate their matches by clicking the "Show me my matches" or "Take me to my matches" button.
Participants appreciated the option to see matches or go to their profile.

Overall, participants found the site easy to use and navigate. They appreciated the inclusive language and the option to view matches or go to their profile. However, one participant had difficulty identifying the CTA button initially.

16 of 21

TRANSEND APPAREL

03.PROTOTYPING

P A G E 14

(HIGH-FIDELITY PROTOTYPING)

17 of 21

TRANSEND APPAREL

04.TESTING AND ITERATING

P A G E 15

HIGH-FIDELITY USER TESTING(LINK)

The participants generally found the terminology used on the website to be clean, not confusing, and inclusive. However, one participant noted that the term "tens" could be mistaken for referring to trans people instead of clothing.
Most participants found the sign-up process easy and straightforward. However, one participant had questions about why image details were required and suggested making it optional.
Participants found the matching process easy and intuitive, with the "View my matches" button being a popular choice. However, one participant had difficulty reading the small font in the footer.
Overall, the feedback from the participants was positive, with the website being described as professional-looking and inclusive.

Video link

18 of 21

TRANSEND APPAREL

P A G E 16

HIGH-FIDELITY A/B TESTING(link)

Whether an open text box or a dropdown menu is more user-friendly, the majority of participants found option B (dropdown menu) to be more user-friendly. However, for inclusivity, the opinions were more divided with some participants finding option A (open text box) more inclusive while others thought both options were equally inclusive or that option B with an open text box for "not listed" option would be the best.

Determining which image option is more inviting and clear for the mission of Transcend Apparel, the majority of participants found option A (group of LGBTQIA+ people) more inviting and clear as to the mission of the company.