The Company
TransTech is an non-profit incubator for LGBTQ Talent with a focus on economically empowering the T, transgender people. TransTech develops members’ skills and builds value within marginalized LGBTQ communities. TransTech members have access to online community and trainings as well.
Objective
Design the new TransTech Social mobile application. This app will integrate all current features and content TransTech offers its members into one place.
My Role
Lead client/team communications throughout the project journey.
Managed project scope and timeline and facilitated daily standups.
Tracked product progress to ensure all benchmarks were achieved on schedule.
Synthesized research through user flows, journey mapping, affinity mapping, and persona creation.
Iterated sketches in Figma into wireframes and low to high fidelity prototypes, creating and implementing an entirely new design system and UI.
Transformed the clients’ current learning center into a gamified learning experience.
Conducted usability tests to gain insight on further user needs and suggestions.
Role
UX/UI Designer, UX Researcher
Team
UX/UI Designer & Researcher Fran Urmatan
UX/UI Designer & Researcher Dan Enzminger
Timeline
May 2022 - July 2022
Methods
Using the Agile method: User Surveys & Interviews, Competitive and Comparative Analysis, Affinity Mapping, Persona Creation, Journey Mapping, Design Studios, Usability Testing, Wireframing and prototyping
Tools
Figma, Slack, Notion, Trello, Google Suite, Otter AI, Zoom, Pen & Paper
In a rush? Here’s a quick project overview
Outcomes:
Designed the mobile application for TransTech Social
Gave users a new way to stay connected and form new professional connections
Provided LGBTQ+ job seekers a quick means to make first contact with recruiters
Incorporated a chat feature that eliminates the need for apps like Discord or Slack
Tailored user profiles for each members’ unique needs and wants
Redesigned and gamified the existing Learning Center to allow users an optimized way to track progress
Summary:
Within a short timeframe, we delivered our client a professional, user-centered application that blew them away, and brought several to happy tears. We made it our focus to design an app that was both completely unique, but also embodied TransTech’s vibrance, inclusion, and embracement of diversity. The love and passion we put into this project was an incredible and unforgettable experience.
Let’s start with the basics
What is the problem, and how can we fix it?
PROBLEM:
So what are we trying to fix?
Content and interaction is split up between the current TransTech website, Slack and Discord for groups and messaging, the TransTech Summit Site, and external job seeking websites
SOLUTION:
Here’s what we propose...
Develop a mobile app that will allow users to access Transtech’s learning library, chat, engage in group discussion, network, job search, and engage with the LGBTQ+ community, all in one place.
So what’s our plan?
The focus of Phase 1 was to obtain data on current TransTech members. We gathered information on their current needs, wants, likes and dislikes, as well as conducted a comparative analysis.
In Phase 2, we synthesized our data into an affinity map, and formed it into I-Statements and “How Might We” questions. We finished by defining two problem statements, one for each persona we created.
Phase 3 marked the beginning of designing our app. We started with a design studio and finished the phase with a mid-fidelity prototype ready for usability testing.
By Phase 4, we had a working high-fidelity prototype ready to present to our client.
Research Logistics
We asked TransTech’s current user base about their experiences in navigating through the website, networking with others, and other features they would like to see in the app.
N = 18 (All participants were current TransTech members at the time of this survey)
Questions focused on identifying the primary reason for TransTech membership, user needs, wants, and pain points
Survey insights
-
“I wanted to use my position within the tech industry to open opportunities for trans folks and prepare them for the needs of the industry through things like interview prep and discussion. I was also hoping to hire some folks.”
-Survey Taker 7
-
“Award systems are always fun (badges for things like: long time member, educator, engager, fly on the wall (active but quiet), job guru (shares jobs), etc”
- Survey Taker 13
-
“I would love to see a way for more seasoned members of the tech community to offer services like resume review, mentoring, and interview prep.”
-Survey Taker 11
User Interviews:
N = 6 (All participants were survey takers who volunteered to be interviewed)
Questions were essentially the same questions asked in the survey, but in this format we were able to ask the “why” behind the “what”
Interview insights
-
“ …I feel like mentorship and the personal aspect are missing from TransTech. I’m at a point in my career where I would love to be able to educate people about this stuff. TransTech can definitely offer a lot of value in this aspect. I’d like to give back…”
- Interviewee 3
-
“… I think the content they have is pretty good, but there’s a lot of it and picking up where I left off is a problem. Progress tracking needs to be improved especially, especially if I haven't been on the website in a while. I have to search to figure out where to pick up again.”
- Interviewee 5
-
“TransTech emphasizes equity amongst the LGBTQ community in the workplace. They know and understand me and my job searching experiences. The Trans experience on the job market is different than everyone else's. TransTech understands this.”
- Interviewee 2
Let’s figure out what the members prioritize
We asked members “If the following features were available, rank what you consider most to least important
(5 being MOST important, 1 being LEAST)”
What do members currently use the site for most?
Users ranked job seeking & recruiting as the most important feature. However, the majority said the primary reason they use the site is for LGBTQ+ engagement.
Comparative Analysis
We decided to look at other successful comparators who we felt have optimized a gamified user experience to draw inspiration from.
Duolingo does a great job of allowing users to progress down the learning path giving them a sense of completion and achievement.
Peloton is leading the charge in handing out accolades to its users for completing certain feats. Peloton members take pride in their badge collection.
We wanted to make sure TransTech users could achieve the same goals as Linkedin users while also creating a more personalized and community driven feel.
A tale of two personas…
Due to the diverse list of reasons users were engaging in the TransTech community, we decided to create two personas.
The first persona, Avid, embodies the many TransTech users that have already found employment and/or success in the tech field, and now are ready to give back by means of mentorship or offering employment.
The second persona, Curious, represents the multitude of TransTech users wishing to enter the tech workforce, learn new skills, receive mentorship, and gain employment.
With personas created and problems identifed,
HOW MIGHT WE:
● Create a space where trans people have access to educational programs that will help them find jobs in tech
● Create an inclusive & accessible platform for professional LGBTQ+ discourse
● Help users gain employment using the resources available on TransTech Social
● Give mentors a space where they can share their expertise with others within the app
Color Theory ● Typography ● Iconography
Design, refine, repeat
Let’s look at the evolution of our app
Usability testing: What did TransTech users have to say?
Users were given 3 tasks. Once all three tasks were completed, users were asked a series of qualitative and quantitative questions to allow us to fully hone in on pain-points and areas of concern.
Task 1:
Find an event
Bookmark it
Confirm bookmarked event is in “Saved Posts / Events”
Users ranked ease of navigation 4.7 out of 5
Task 2:
Complete “Course 2” in the Learning Center
Users ranked ease of navigation 4.1 out of 5
Task 3:
From the connections tab, use a member of your community to introduce to introduce and form a new connection
Users ranked ease of navigation 4.4 out of 5
Usability testing: Addressing the pain-points
Users found it confusing figuring out where in the learning module they had left off, and some were confused why they couldn’t skip ahead. To address this, we added a character piece to denote their current progression as well as made all future module greyed out with a “locked” symbol to show they are not available yet.
While users stated they enjoyed the use of colors to differentiate post types in the social feed, they found amount of color to be overwhelming. This was addressed by removing color on the footer portion of the post, and minimizing color usage up top while also keeping it visible to the user.
Reflection:
This was an incredible experience from start to finish. We had a fantastic client from day 1, and I really can’t emphasize that enough. On our day 1 sit down, they discussed the deliverables they wanted, but let us use our creative process for the rest. I had a great team as well. The three of us were able to draw off all of our unique strengths while leaving egos at the door, and by doing so, we were able to deliver a product we were all proud of.
This project also came with challenges. Time was our biggest enemy. We made the choice early on to do all surveys, interviews, and usability tests with only TransTech users. This allowed us to cater our app to their needs and wants, but it also meant we had to be extra diligent with our time. We also had to make some tough choices on leaving out some features. We had planned on expanding the “community” tab (which we nicknamed the spider web) to include a zoom-out feature that would show the user their entire network, but agreed with time restraints, we would not be able to do this justice, and made the tough call to add it to “next steps.” If I had to do anything differently, it would be to do a better job prioritizing which features were needs, which were wants, and which were just things we thought would be cool.
As I mentioned before, Fran, Dan and myself all take great pride in what we were able to accomplish. What made it more rewarding was the reaction we received from our clients during the stakeholder presentation. Many of them have been with TransTech since its inception, and for them to see their idea come to life brought them to happy tears. I can’t ask for a better hand-off than that.