User Exp.

The Lotus App

Ironhack's Bootcamp Final Project
Case Study

Lotus | Transgender, Non-binary and Intersex Community

Work
Brand Design UI & UX Product Design
Client
Ironhack's Bootcamp Final Project
Timeframe: 2 weeks • Tools: pen&paper, Miro, Sketch, Figma, Invision • Key deliverables: Lean Survey Canvas, Interview Guide, Affinity Diagram, User Persona, User Journey, Problem Statement, Sitemap, User Flow, Mid-Fi & Hi-Fi prototypes

Context

In July 2020, I started the UX/UI Bootcamp at Ironhack Amsterdam, a 9 weeks program to learn about Design Thinking Methodologies, Agile & Lean frameworks. The Bootcamp had us work on projects from UX research, business analysis to final UI design and the creation of design systems following the industry’s best practices.

As a final project, we had 2 weeks to work on a project of our choice. I decided to take this opportunity 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.

The project

While browsing the web and lurking on different communities, I found that people were talking about their journeys and experiences with gender transitioning even if it meant receiving hate.

I wondered is there a better solution? One that allows one to track and post about gender transitioning on a platform where it will be received positively?

So, the goal, at first, was to create a platform to track one's gender transition by creating a personal Timeline. This personal Timeline is shareable and is found in the form of daily logs, divided in three categories: Face, Body and Voice.

However, throughout my research I realized there was another need from the Transgender & Non-binary community and it was informative and educative content.

What is Lotus?

Lotus is the app that helps keep track of one's gender transition and understand the legal, medical and lifestyle steps that one may want to take. The goal is to cater all useful informations on the platform so that each individual can make informed decisions for themselves as not all people who are transgender want to transition, and those who do won't necessarily transition in the same way: it's a personal journey.

The process

Research

Based on my research on gender transition and the feedback from survey and interview participants, I crafted the persona of 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. 

From the persona of Kiera I was able to pinpoint the main pain points on her journey when sharing gender transitioning content online.

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.

From this point on, I wrote my Problem statement:

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.

After tidying my thoughts up with a help of a Mindmap and MoSCoW chart, I was able to build a Sitemap and User flow chart that would help me step into the prototyping phase with a clearer head.

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.

Prototyping

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.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Look&Feel

For the look and feel, I wanted the colors for the app to be inspired by the Transgender, Non-binary and Intersex flags.

Moodboard for the Lotus App featuring 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.

Final prototyping

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.

In retrospect

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.

Overall I’m really proud to have been able to design this project in such a short amount of time.

Next steps

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.

It would have been very insightful to talk to transgender, non-binary and intersex people who would be interested in building such a platform; medical experts; legal experts on Trans and Intersex equality rights... and more.

Other Projects