top of page

transparent

Conceptual App and Responsive Website Design

My Role

UX designer creating an app and responsive website from conception to delivery.

The Problem

Caregivers of transgender youth lack quick access to educational resources, care providers, and events.

The Goal

Design a comprehensive resource for caregivers of transgender youth.

I was the lead UX Designer creating an app and responsive website from concept to design for transparent. As the sole designer, I conducted competitive analysis, created user flow, conducted interviews, wire framing, low and high fidelity prototyping, usability studies, and design iteration.

transparent is an informational resource for caregivers of transgender youth. Its purpose is to deliver access to authoritative advice, sympathetic care providers, and awareness to youth and family related events. 

Kicking things off 

Understanding the user

I conducted a user research questionnaire to gauge the needs of transgender youth caregivers. These are the overwhelming takeaways:

Finding community

The majority interviewed expressed an inability to learn about events, near or far.

Reliable research

Most interviewed stated it’s often difficult to locate fact based, non-biased information or professional advice on a broad spectrum of topics.

Seeking help

Most respondents expressed frustration locating professional assistance from providers who understand their child's unique circumstances.

Understanding the competition

I conducted an audit of four competitors to understand what is and isn't available to the identified user group. Insights from this analysis directed design and processes. 

Meet the users

I felt it was important to create a pair of personas to put a face to the users. These personas were used to inform design decisions.

PersonaImage_1.jpg
"If we can make it through high school, I think everything will be alright."
Goals
  • To be supportive of Rosco without being overbearing

  • Connect Rosco with a good support team

  • Find other parents to talk to

Frustrations
  • "Separating fact from fiction."

  • "It's been so hard to find Rosco a therapist."

  • "The school district has been difficult to deal with."

Stephen Jackson

Age:

Education:

Hometown:

Family:

Occupation:

45

Trade school

Worcester, MA

Ex-wife, 2 children

Welder

Stephen is co-parenting with his his ex-wife, Rhonna, raising their two children, Rosco, a transgender boy, and Rian. Stephen has labored for years in the construction trades and currently is a welder on commercial building projects. Stephen balances his intimidating presence with generosity and humility. He is a loyal companion and a fierce advocate for the underprivileged and underrepresented.

PersonaImage_2.jpg
Wendy Yu

Age:

Education:

Hometown:

Family:

Occupation:

50

Some college

Fairfield, CA

Husband, 2 children, nephew

Retail manager

"Be the bubble on the the stream."
Goals
  • Find a way to mend the relationship between Ben and his mother

  • Be promoted to area manager

  • Save money to help put Ben through school

  • Find community

Frustrations
  • "There's got to be better resources than social media."

  • "No one I know can relate to what we're going through."

  • "There's so much conflicting information out there."

  • "Clothes shopping has been tough."

Wendy has two children in college and is raising her 16 year old nephew, Ben, who left home after coming out as transgender. Wendy and her husband, Thomas, have acted as Bens guardians for two years. Wendy manages a local supermarket and recently hired Ben as a checkout clerk. She works hard to provide for her family and support her two girls in college. She loves jogging and going to the movies for recreation.

Creating a framework

A detailed sitemap helped my visualize the project and its architecture. Laid out before me, I could better understand how to best create user flows and navigation.

Sitemap-2.jpg

The Design

Wireframing on paper...

I created a series of wireframes to quickly visualize the various aspects of the project and how they would interact with one another.

...and digital

Building off of the paper wire framing, I constructed a set of digital wireframes to move the project forward for a dedicated mobile app and responsive website.

Mobile app
0.0. Home.jpg
1.0 Learn.jpg
2.0 Events.jpg
5.0 Donate.jpg
Desktop
0.0 Home.jpg
2.0 find support.jpg
3.0 events.jpg
5.0 Donate.jpg
Final designs
Final design

Through iteration and feedback from a usability study, the final designs deliver on the project goal to design a comprehensive resource for caregivers of transgender youth.

Mobile app

Home

iphone-xs-mockup-22485.png

Individual event details page

Events1.png

Learn about donations to transPARENT

Donate1.png

Dive into an event.

Events2.png

Collecting personal details

And payment details

Donate2.png
Donate3.png

Your donation confirmation

Donate4.png
Desktop

Home.

Home.png

Learn.

Learn1.png

Learn. From diverse voices.

Learn2.png

Learn. Blog posts and references.

Learn3.png
Sticker sheet

Inspired by the transgender pride flag, the design elements are intended to present a familiar and welcoming theme to users.

transPARENT Sticker Sheet.jpg

Takeaways

In Summary

transPARENT was a challenging project due to its scope and breadth. It has been developed as an approachable and intuitive resource for many with myriad of individual variables and needs. Design and flow meet the needs of the users, but further usability testing and refinement will enhance the project.

Future Steps
1.

Expand usability testing to a more diverse audience to seek out unaddressed pain points or accessibility concerns.

2.

Conduct further research with user group to itemize any additional areas of need.

bottom of page