WEB APP • UX UI • CODING
Lucid
Problem
Transitioning in B.C is not an easy task.
For this project we chose to tackle the problem that many trans people face when coming out: where do I find the right information on trans healthcare?
Solution
Lucid: An online healthcare roadmap for trans people in BC, Canada.
My Role
Duration
- UX/ UI Designer
- Developer
2 months
Software
Defining the problem
Research
Canada is the first country to collect and publish data on gender diversity from a national census.
Through our research we found some important information:
Key Takeaways
-
1 in 300 people in Canada are transgender.
-
In 2021 there was 100,815 transgender people in Canada.
-
Among provinces and territories, Nova Scotia, Yukon and British Columbia show the highest proportions of transgender and non-binary individuals.
Available Resources
What resources are there for those coming out as trans?
TransCare BC
TransCare BC is the main website that provides transition information to people in British Columbia.
It is hard to navigate, confusing, and overwhelming.
Rainbow Health Ontario
Rainbow Health Ontario is not a BC resource, but it is where TransCare BC gets most of their resources.
It’s extensive, and easier to parse, but no less overwhelming.
The Problem
So what do you actually need to be able to transition in BC?
Essentially all of this:
List of trans resources in BC, Canada.
If all of these resources exist, why do we need a solution?
Trans Healthcare in Canada
In October of 2023 Egale, Canada’s national 2SLGBTQI organization, published a report on women, trans, and non-binary people and their access to healthcare in Canada.
- There was 35 participants in this study.
- Approximately half of them were transgender.
- A lot of findings were discovered but one quote stood out:
“Say you were going to a new physician, and you said, 'I was recently diagnosed with diabetes', and they replied, 'I never dealt with diabetes before, find someone else', you know that wouldn’t be right. You can’t do that.
If you’re lacking knowledge, you are the healthcare provider responsible for finding that knowledge. It shouldn’t be up to patients or organizations to develop resources.”
- Finn
(30s, white, queer, transmac/genderqueer, suburban Atlantic Canada)
Designing a Solution
Concept
A Transitional Roadmap
Our proposed solution to help trans individuals to more easily access healthcare is creating a transitional roadmap.
We wanted users to be able to click through different sections, laid out in a way that is easy to understand, not overwhelming, and not entirely sterile.
Transitional Roadmap
Design
Early designs and planning revolved a lot around the functionality, and how the site would work. We worked on each of the categories and subcategories to plan their hierarchy and relationship.
Paper Wireframes
Paper Wireframes
Later designs and iterations involved a lot of discussion about the visual appearance of the site, and how to make something for trans people without making it "too trans".
Medium Fidelity Wireframes
We chose to go with a UI consisting of cards and to move away from lists. We felt this design improved the experience and mostly represented the younger users expectations of UI. We took inspiration from games and mobile apps.
We mainly took inspiration from skill trees in videogames that show progression intuitively.
Medium Fidelity Wireframes
Safety Considerations
The reality is that not every trans person is safe at home, we wanted a site that allowed for an element of subtlety if thats what the user needs.
Our users may may not want for people to find out what they have been accessing online. They may not have their own private phone.
We have to take into account that our solution cannot leave behind any indication of the delicate nature of the topics discussed.
Development
Lucid
Presenting Lucid, an online healthcare roadmap for trans people in BC, Canada.
We decided to develop the website as a web app the user could access from anywhere and didn't have to install on their phone.
I wanted a fast, lightweight website so we tried to use as little Javascript as possible. As the developer, I mostly used HTML, CSS with some Javascript and JQuery.
Information Filter
First thing the user sees is a form to input information.
Form determines what information is shown
After clicking Submit the user is taken to the cards page.
Cards Page
Full cards page
Information appears to the user depending on their age and gender assigned at birth. This is important because some information is age sensitive and not all information is pertinent depending of gender assigned at birth.
Filtered Variations
Assigned Male at Birth (AMAB)
Assigned Female at Birth (AFAB)
Under 18
Information Pages
I wanted the user to never leave the screen. Preventing several open screens was crucial in keeping the website footprint to a minimum, making it easier to close the website quickly in case of emergency. A solution was to use the iframe option in CSS to load other pages without leaving the original one.
Information page (Talk and Text Lines)
Panic Button
Lastly, I added Panic button that can quit the website as fast as possible to prevent it from being seen by a third party. The user can also press the Escape key to achieve the same result.
Panic Button (Mobile)
The button quickly opens new page on a different website (in this case cineplex.com), and changes the current page to google.com.
Reflection
Based on the design and development process I learned a couple of lessons:
- Go to the source: When trying to solve a problem for a group of users you should involve the group in question as much as possible.
- Being inclusive means listening: When trying to create a inclusive and accessible experience, I should talk less and listen more.
Next Steps
Next steps for the project would be:
- Usability Testing: Because of the delicate nature of the project I don't feel we have enough resources to carry on with that yet.
- Move the whole platform into React.js: Since this website is a proof of concept, moving it to React.js would allow for better iteration and less repetitive code.
- Expand information: Include resources from other provinces in Canada or abroad, plus an option of filtering info by location.
- Improve security: Expand security considerations regarding personal information such as history, cookies, etc.
Thank you for reading!