Case study: Designing a gender transition tracking app
For the challenging ultimate project of Ironhack’s UX/UI Design Bootcamp, I decided to design for a community that I didn’t know well. This is a concept app for Gender Transition Tracking.
We often hear that Empathy is very valuable as a UX Designer. You have to learn about and empathize with situations or mindsets that aren’t your own, and this is what you need to use to design your solutions.
So, I wanted to take the opportunity of the final project at Ironhack’s UX/UI Design Bootcamp to learn about a community I didn’t know well and try to do my best to design for people whose needs were different from mine.
It was a great experience because all I could do was listen and put myself aside, I couldn’t assume anything about what was best for people who were living something I could never imagine going through.
Timeframe: 2 weeks.
Tools: pen&paper, Miro, Sketch, Figma, Invision
It all started on Reddit
Browsing the web and lurking on communities, I found r/trans where people were talking about their journeys and experiences with gender transitioning.
Someone mentioned posting there even if there were “mean comments” and that sparked my curiosity. I was wondering: why post here anyway? What was ultimately the reason that made them want to share their story? Would they like to post somewhere more secure, where everyone would express support and would be kind?
So I started asking questions through private chat and found people kind enough to answer my questions. Some of them told me the reason they shared their story was that they just wanted to celebrate their success, and some others that they wanted to inspire and show people it was possible. I thought this want, and need, was beautifully human and that there was something there to work with as a UX Designer.
The Research
Week 1 was focused on doing UX research.
The Lean Survey Canvas
I started by organizing my research plan and looking at what options already existed.
Doing a Lean Survey Canvas to help me build my survey was the first step. I decided I would build the survey for Transgender, Non-binary and Intersex people. I also considered that valuable input would also come from people currently questioning their gender identity.
It helped build a survey targeted at the right people I needed to hear and learn from. It also helped me scratch down the typical questions like age or gender that I decided weren’t relevant here.
In retrospect: One thing I do wish I had asked was the location or nationality, because some of the informations I wanted to provide through the app were specific to a continent, country or state.
I got 36 answers from my survey and managed to interview 5 people through a private anonymous chat.
These were very insightful and helped me understand better experiences people went through, the feeling of isolation and lack of information on steps to take, their rights, or options they often brought up.
The Brand and Feature Comparison
To get a better idea of what existed so far on the app market I did a Brand and Feature comparison chart. During my personal research, I have found two apps focused on Transgender communities:
- Solace, provides information and resources to guide transgender people through whatever process of gender transition they desire. Now available, for free, on iOS & Android.
- Transcapsule, an app for transgender and non-binary people to document their transitions and track the long-term effects of gender-affirming hormones.
In the survey, people said they hadn’t heard of these two apps but some were using another application called Voice Pitch Analyser.
This chart helped me understand what features existed right now. Solace seemed to be more focused on concrete steps to take during gender transitioning, legally, medically, and personally. Transcapsule is more focused on tracking the progress of transitioning by taking selfies, setting milestones, and reminders. Voice Pitch Analyser is pretty straightforward and focuses on recording voice clips and analyzing the pitch to determine if it sounds more masculine or feminine.
I noticed all of these apps had very interesting features but none of them had internal communities, so I kept that in a corner of my brain.
Affinity Diagram
When a problem is overwhelming, a good solution to organize ideas is to make an Affinity Diagram.
An Affinity Diagram is an organized output from a brainstorming session. The diagram was created in the 1960s by Kawakita Jirō, a Japanese ethnographer, and is also known as the KJ method.
Constructing an Affinity Diagram is a creative process that expresses ideas without quantifying them.
This diagram helped me organize big themes such as Stats & Tracking, Educational content, Community, Personal path, Spiritual or Mental health, Physical & Body care, and Gender identities.
User persona
To apply all of the information I gathered through my research, I made a User Persona.
I created Kiera, an American transgender, and non-binary Young-Adult Fiction Author. They like to be up to date with Trans Rights and news related to the community, feeling empowered is important to them and they wish to empower younger generations as well.
User journey
With the persona defined, I built the User Journey. Kiera wants to track their transition after 15months of Hormone Therapy and shares pictures on social media platforms.
The process goes through many steps as Kiera needs to take the picture, get an app to edit two pictures side-by-side, select an older picture, and post it on social media. The design opportunities come up when they get nasty comments that make them feel bad about their body. But it feels like it’s all worth the hassle when they get occasional thankful DMs from people questioning their gender identity or starting their own transition.
Problem Statement
A problem statement is a clear concise description of the issue(s) that need(s) to be addressed on a project. It is used to center and focus at the beginning, keep on track during the effort, and can be used to validate that the effort delivered an outcome that solves the said problem(s).
My problem statement is as follows:
Transgender people, non-binary people, and people in questioning about their gender identity want to learn about legal and medical steps to take, and post content related to gender identity on a platform where their interrogations, frustrations but also victories and successes will be well-received and understood.
They need to navigate the world from a place of knowledge, feel empowered by being true to themselves, as well as share, learn, grow and feel like they are a part of a community they belong to.
Hypothesis Statement
The hypothesis statement enables us to understand the implication of the question and the different variables involved in the project. It helps to make precise predictions for the launch of the project.
Here, I wrote a hypothesis statement based on the idea that this app would be developed and published. It is as follows:
We believe that by creating a platform for transgenders, non-binaries, and people in questioning about their gender identity, we will give them the tools to build more empowerment and engagement within the community but also, hopefully, the general mindset. We will know we are right when our product achieves a Retention Rate of 28% after 90 days of release and a DAU(Daily Active User*)/MAU(Monthly Active User) ratio of 50%.
*Are considered “active users” the ones who update the personal log/journal, update a goal, and/or upload and share content onto the platform
Mindmap
Again, I needed to organize my thoughts and decided to start a Mindmap. Similar to the Affinity Diagram, the Mindmap visually organizes information. But here, major ideas are connected directly to the central concept, and other ideas branch out from those major ideas.
This diagram helped me organize sections of the app. Starting from the center I determined 6 main sections, each hosting a multitude of branches :
- Tracker
- Goals
- Reminders
- News
- Education
- Community
This Mindmap allowed me to have a better idea of features and sections that could be integrated into the app. However, for an MVP I had to prioritize.
MoSCoW
The MoSCoW method is a prioritization technique to determine the importance placed on the delivery of each requirement. The term MoSCoW itself is an acronym derived from the first letter of each of four prioritization categories (Must have, Should have, Could have, and Won’t have).
This method really helped me strip down some things. It was difficult though because a lot of features felt like they were essential but pushing them to the Could section or Won’t section was necessary at this stage.
In retrospect: the Must section is still very ambitious and I had to abandon some ideas (like the in-app calendar) for the prototype.
Sitemap
Continuing from the MoSCoW method, I was able to think of a Sitemap.
I settled on 4 tabs: Logs, Learning Ressources, Community, and More.
The structure was way more concrete in my head now. I wanted something simple but packed with informative content, knowing what I wanted to display in each section really helped me with keeping things tidy.
User flow
The User flow lays out the user’s movement through the product, mapping out each and every step the user takes — from entry point right through to the final interaction. There are different pathways a user can take when interacting with the app, one of the goals is to enhance the ease of movement through the app and avoid that the user wastes time looking for what they need.
My User flow determines the path to open the app whether you are registered or not and what information is needed to register. Then, based on the User Journey that depicted a non-ideal flow, I chose to draw the ideal flow for the user who wants to register a daily log, share it to the community and read or reply to comments.
As I have been told during my research that the app being password-protected was of the utmost importance, I integrated a log-in screen at the start of every session.
This step helped me make the flow clearer for prototyping.
Mid-fi prototype
All the previous research came to the culmination point of building a mid-fi prototype. Before starting to build the screens, I did a few rapid sketches on paper to get a rough structure.
In my survey, more than 66,7% participants were Android users and because I had never designed for Android, I thought that was another challenge I could try to tackle. So I decided to design on Android 10, integrating some Material Design elements and working directly on a Dark Mode.
So, the flow was composed of a Dashboard (or Homescreen), an overview of the Timeline, a sharing screen, the Community homescreen and an article.
Working on the UI
Week 2 was the time to build the UI.
Visual Comparison
Using the apps from my previous Brand & Feature Comparison chart, I built three Visual Comparison boards.
In terms of visuals, Solace and Transcapsule are the most advanced and refined. I liked the simple use of colors. But when it comes to architecture, my project needed the educational side from Solace and the daily log, milestones and reminders features from Transcapsule.
The Voice Pitch Analyser app, even if the UI wasn’t as much polished, was useful to look at for the use of Material Design. But the technical side of pitch analysis turned out to not be useful for this MVP.
Moodboard & colors
For the look and feel, I wanted the colors for the app to be inspired by the Transgender, Non-binary and Intersex flags.
That meant there would be blue, pink, yellow, and purple. A color to lift everything up could be a dash of green.
I chose the Leaf and Coal as primary colors. In Dark Mode, the background would be somber and the bright green contrasts well with it.
The four secondary colors are based on the colors of flags as mentioned before.
Typography
For the typography, I used sans-serif’s fonts Inter and A Pompadour. I chose Inter for its serious tone and A Pompadour was supposed to bring softness with its rounder, reassuring shapes.
I wanted simple & clean shapes so that they would not overwhelm the colors of the design. I also needed the typography to be easily readable for the learning contents.
Hi-Fi Prototype
The final prototype was definitely a challenge.
Working with the Dark Mode made it difficult to give the look & feel I initially put together in the Moodboard. It also forced me to think harder about my use of color, using my secondaries more as accents in the design.
The use of Material Design elements was helpful to put more hierarchy in my screens and I worked more with depth than I did on other works. The deeper the elements were placed, the darker they should be, this means the topbar (which is always on top of every other elements) would be lighter on the Community screen than on the Homescreen, because of the number of sections there.
Check out the prototype here.
Conclusion
This project was probably the most ambitious I have ever initiated.
I really loved every step of it, I think as a UX Designer it was very important to put myself in a situation where I couldn’t assume anything about the needs of the people I designed for. It was a great learning experience as a designer and as a human, I was really glad to be able to align these two aspects in this project.
I’m aware it is far from perfect, I would love to have had the time to run some tests so I could have feedback on it. I also wish I had more time to design the in-app calendar. But overall I’m really proud to have been able to design this project in such a short amount of time.
What is being done right now:
This concept app is the result of my research and my solutions, but I am aware that it is not helping the Trans & Non-binary community in a concrete way. If you are excited by the idea of such a project, I already talked about Transcapsule in this article: it is an app that is being developed by designer Tobey Tozier right now. They are looking for support and you can do so by donating on their Indiegogo page.
