DaN Enz Design
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
Team: Francez Urmatan & David Lind
example flow: network using
the community feature
-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
-wireframing
-timed design studio
-member usability testing
-design iteration
-incorporate stakeholder
feedback
-high fidelity prototype
-prepare deliverables
-present to stakeholder
-handoff
-impact & reflection
-next steps
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.
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.
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.
Gamify TransTech’s learning library with progression tracking & assessments. Offer badges for interacting on the app.
Consider how to incorporate LinkedIn’s networking & learning features in a more casual, community oriented setting.
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
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.
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.
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.
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.
