Transtech mobile app

back to top

Building a Home for the Trans Community in Tech

TransTech is an incubator for LGBTQ Talent in Tech with a focus on economically empowering the T, transgender people. TransTech’s mission is to empower, educate, and employ those facing barriers in tech education, as well as to reduce instances of discrimination.

Timeline: 3 Weeks
Role: UX/UI Designer
Reported to: Executive Director E.C. Pizarro III & Programs & Membership Coordinator Mataoe Nevils
 Francez UrmatanDavid Lind


example flow: network using
the community feature

The Challenge
TransTech approached our team looking for a phototype to prove the concept of consolidating their community and resources onto one platform: a mobile application. Currently, TransTech uses multiple websites, slack and discord to connect their community. We set out to design a mobile version of TransTech that encompasses their core values, connects their extensive network, houses learning resources, and considers accessibility needs.
The Process



-stakeholder meetings
-member survey
-member interviews
-competitive analysis
-current state audit

-affinity mapping
-"I" statements
-user personas
-problem statement
-"how might we" questions
-solution statement

-principles & style guide
-site mapping
-user flow
-timed design studio
-member usability testing
-design iteration
-incorporate stakeholder

-high fidelity prototype
-prepare deliverables
-present to stakeholder
-impact & reflection
-next steps

The Outcome

A new way to meet, connect & forge professional relationships. The design has five features that work seamlessly together to achieve the goal of creating a digital home for Trans individuals: social feed, member profiles, community, chat, & learning.

Discover & Define

survey resondents
member interviews
personas constructed
Affinity Mapping

We compiled observations & quotes from survey results & interview and organized them into an affinity map.

Members want a simple, inclusive, and informative solution to connect with other trans folk in tech.


We used both sides of the mentor/mentee dynamic in personas in order to encapsulate the needs and goals of members looking for jobs and members willing to offer guidance on the platform.

Problem Statements

  • The Avid Programmer needs a more efficient way to find trans folk who are looking to change their career because I want to offer guidance and my expertise creative community & advance their career.
  • The Curious Coder wants to connect with trans folk who are interested in trying to advance themselves in the tech industry because they feel it is difficult to find like-minded people.

How might we...

  • Create an inclusive & accessible platform for professional LBGTQ+ discourse?
  • Cultivate a space where trans people have access to educational programs that will help them in finding jobs in tech?
  • Give mentors a space where they can share their expertise with others within the app?
  • Help members gain employment using the resources available on TransTech Social?

Comparative Analysis

We researched top of the line platforms in order to draw inspiration for the TransTech mobile experience. Here are some examples of our process using pluses and deltas.



  • Best in the business gamification for education.
  • Duolingo tracks and rewards progression through courses, units, & modules.
  • Assessments used to continue to ensure key topics learned before advancing.
  • Fun characters with their own personalities & designs make the app more engaging.


  • Can be intrusive with notification system
  • You can negatively-reinforce your friends to do lessons
  • Assessments used to continue to ensure key topics learned before advancing.
  • Users can run out of hearts and have to wait to do next lesson (or pay to advance)


Gamify TransTech’s learning library with progression tracking & assessments. Offer badges for interacting on the app.



  • LinkedIn is the premier networking and job search platform online. For most, the job search and talent sourcing is synonymous with the services offered by LinkedIn. Over 48 million people search for jobs on the platform a day.
  • LinkedIn has community building features such as groups.
  • LinkedIn offers a learning platform where users can complete assessments to earn skill badges to display on their profile.


  • LinkedIn is the premier networking and job search platform online. For most, the job search and talent sourcing is synonymous with the services offered by LinkedIn. Over 48 million people search for jobs on the platform a day.
  • LinkedIn has community building features such as groups.
  • LinkedIn offers a learning platform where users can complete assessments to earn skill badges to display on their profile.


Consider how to incorporate LinkedIn’s networking & learning features in a more casual, community oriented setting.

Current State

TransTech currently hosts its offerings on multiple platforms. Currently there is no central hub for members to find and leverage everything TransTech has to offer. TransTech has three different websites (one for donations and information, one for member resources, and one for their annual summit. Members also have access to a discord to connect with other members, view jobs, and share resources.


Design Principles & Style Guide

TransTech uses a full color wheel across their brand, so we used black and white for the majority of the UI. This allows TransTech's colors to be stand out and be used as CTAs and highlight important information in the app.

The interface should:
1) remind members of TransTech products
2) follow industry design standard and conventions
3) offer appropriate assistance when encountering something new

Design Iterations

From sketching to prototype is an iterative process. This section will cover some examples of how we went from pen and paper to fully interactive high-fidelity prototype with mid and high fidelity usability testing, meetings with TransTech, Figma magic & a few green teas.


Prototype in Figma

The Community Feature: Emulating in-person networking with introductions & leveraging your connections' connections. This feature will act as the primary method to connect & network with new people, the primary reason people want to use TransTech.

Lo-Fi and Mid-Fi Feedback

The community feature impressed both the clients and members in usability testing, but the main feedback was some found it difficult to navigate without more information. We needed a way to help users through the feature for the first time. Users ranked ease of navigating the Community a 4.4/5 in Mid-fidelity testing.


The Hi-Fi added visual feedback & step-by-step instructions to help advance the member through the flow to effectively leverage the community tab to network.

Social Feed

Prototype in Figma

The Social Feed : This will serve as home feed where members will be able to post, view, and interact with content such as articles, photo posts, articles, events & sponsored content.

Lo-Fi and Mid-Fi Feedback

Our initial rendition of the social feed used TransTech's colors to distinguish between post types. Testers & our design team found the design did not fully fit into the "dark mode."


The Hi-Fi cleaned up the UI to provide a more visually appealing experience that fit better with the other features in the app while still effectively differentiating between posts using positioning and coloring. The color indicators became a rounded bar & each tile is black on a dark grey background.


Prototype in Figma

The User Profile: We designed the member profile to give the user agency to show off what they bring to the table and why they are using TransTech. Members can add identifiers to their profile and badges earned from completing trainings and attending events, for example.

Lo-Fi and Mid-Fi Feedback

The profile is practically the member's resume & cover letter in the application, so as designer we went to work ideating on what exactly should be on the profile. We attempted to fit a lot of content and CTAs on the main screen. In later versions, we tested moving certain content around to establish hierarchy and to clean up the look when you first enter the profile. In addition, TransTech Stakeholders highlighted the importance on indicating who allies are, rather than indicating who on the platform is Transgender.


Changes here focused on polishing up UI positioning for an easy to read & customizable experience where members can express themselves in a professional and personal way. Users can display self-identifiers such as role on the app (ex. mentor), and add a 1-3 of these to a profile ring. Skills, badgework, and links to external resume and portfolios can be found further down the page. Based on stakeholder feedback, we added profile indicators for allies. After all, this is a platform for LGBTQIA+ people and allies are welcome.


Next Steps

  • Accessibility: Incorporate UI designs that address mental and physical impairments.
  • Build out Light Mode UI
  • Search & Filtration: Consider narrowing down search functions for people/network
  • Posting Jobs: UI and user flow for Recruiters to post jobs on the app
  • Consider adding additional reactions to posts

 Impact & Reflection

We received glowing reviews on the prototype from the stakeholders.

Executive Director E.C. Pizarro was certain our work would help his team secure funding he was looking for to bring the app to life. Program Coordinator Mataoe called the presentation and design "the best birthday gift they have ever received." Along with our deliverables, E.C. asked for a recording of our presentation to show to CEO Angelica Ross. According to E.C., Angelica also loved the design.

We are staying in touch with TransTech for next steps and more updates will follow!

TransTech gave us a lot of creative agency in this project. We were given an idea: a space for their members on mobile. We took the idea and set out to conquer a very large scope. We would not have been able to put together a prototype with this level of interaction or features without all three team members firing on all cylinders, and for that I thank Fran and David!

For this project, time management and team communication was essential for success.