UX Juice Bar

UX Juice Bar creates a space for women of color (WOC) in UX to support each other through building mentor-mentee relationships.
View ProcessView Final Design

Overview

Role: Interaction Designer     |     Duration: 7 Days
Type: Google Design Exercise • Passion Project
Tools: Sketch App (Wireframes, Prototypes, Mockups), Procreate (Illustrations), Paper, Pen & Google Forms (Rapid Prototyping & Testing), Material Design Color Tools (Accessibility)

The Problem

How can I help women of color (WOC) who are prospective UX professionals find and receive guidance/support from potential mentors?

A meaningful mentorship is essential for prospective or junior UX professionals to grow fast in their career. However, finding a mentor — whether formal or informal — may be challenging for newbies who have just entered the field and may have few connections. In many cases, aspiring professionals are NOT located in big cities where more established UX communities exist. This makes it difficult to simply "reach out and grab a coffee," meet UX folks at events, or otherwise build in-person connections that can translate into long-term career growth.

Such challenges can be even more frustrating to women, especially WOC who are navigating the white-male-dominated tech industry. Women from underrepresented groups constantly fight not only gender roles but also ethnic and racial categories as well, which gives them a fear to reach out or speak up.

Feeling their "voices" become small in a less culturally diverse environment is a common theme for my participants.

Inequality, discrimination, and other issues that contribute to WOCs’ disadvantages will not magically disappear overnight. In the meantime, WOC need a space where they feel comfortable bonding with each other and seeking/providing support.

The Solution

UX Juice Bar is a solution designed to create a welcoming, supportive, and safe space for WOC in the UX industry to be allies for each other. The platform connects WOC who are seeking guidance with other WOC who are in a better position with resources, especially "giver" types of users who are passionate about helping WOC and want to contribute to the community.

UX Juice Bar serves as a safety net to lift up prospective WOC UX professionals.

The end result of this project is hi-fi mockups and prototype that capture the MVP of the product. One of the goals the product is to establishes a comprehensive security net for prospective mentees. For prospective mentors, who are busy industry professionals, once they set up their profile and sync the app with their main calendar, they would not need to worry about the rest of the process other than confirming requests and replying to messages if there are any.

Process

1. Validate and Dive into the Problem Space

Exploratory Research

Should this community be only inclusive of women-identifying people of color? By doing so, am I actually being “divisive?”

I understood that scoping my project to target one specific group of people would invite questions and, possibly, criticism, so I looked into previous studies, online articles, and existing communities to validate the problem I identified for WOC in UX.

  • Facebook Groups
    I found many meaningful discussions in “Designers Guild WOC,”  a private, WOC-only UX community, which helped answer my questions. I continued collecting quotes to reinforce why this type of exclusive space is needed for WOC.
  • Podcast
    I got unexpected inspiration while listening to the "Google Method" podcast, where three WOC/female designers at Google — Fiona Yeung, Ayan Daniels, and Alison Boncha — shared their experience of taking initiative to tackle diversity and equality issues by establishing Hexagon UX to support women in UX, or by taking opportunities to speak publicly as a WOC designer.

Key Research Insights

Insight ON Woc
A collaborative network exclusive to WOC, which allows them to connect and elevate each other, is a desired and feasible solution.

Listening to my primary target users’ voices through these channels, I affirmed the necessary role of “a WOC-only space.” They also made me believe that, while one user group is in need of mentorship, there are always giver types of users who are passionate about helping others.

My findings aligned with my personal experience navigating the job search. Among all the industry professionals I reached out, WOC tended to respond and showed a genuine passion for helping other WOC overcome difficulties.

A huge shout-out to these WOC designers who kindly offered help, such as remote video calls, referrals, resume/portfolio reviews, and career advice.
Insight on Mentorship
An effective, solid mentor-mentee relationship that works for both sides has to be developed naturally over time.

As much as we want a mentor who can hold our hand along our career paths, a long-term commitment request can be very overwhelming to those who can potentially play the mentor role, and it may not be the best use of time for both sides. Having a specific ask or informal chat followed by an update — rather than a "Can you be my mentor?" request out of blue — is a good way to kick off a mentorship development process.

2. Understand the Users and the Solution Space

User Interviews

The previous discovery phase helped me validate the problem statement and understand prospective mentors' perspectives. To draw a clearer picture of prospective mentees, and to ultimately identify a design solution that caters to their needs, I conducted structured, in-depth user interviews.

  • Knowledge Map
    Before jumping into user interview, I mapped out the "Who, What, Where, Why and How" of this domain. The goal of creating a knowledge map was to unpack my understanding and assumptions established so far.
On the knowledge map, I used keywords to quickly capture my understanding of the topic: Mentorship for WOC.
  • Interview Protocol
    With the knowledge map, I was able to quickly develop a set of interview questions resolve around mentee's goals, needs, and their frustration with existing solutions. The interview protocol helped me ensure consistency across interviews.
I spent 30-40 minutes quickly putting together an interview protocol. During the interviews, I would go with the flow and ask unscripted questions.
  • Recruiting Criteria & Participants
    During the exploratory research, I gathered data of prospective mentors' previous experience and perspectives on what types of mentorship would work for them. Therefore, for my user interviews, I chose to focus on the mentee side. I found the right interview subjects that match my recruiting criteria as followed:

    -  Prospective UX professionals
    -  Women & Non-white
    -  Have had at least one mentor in the past, whether formal or informal
    -  Have an interest in being a mentor/mentee in the future

Competitive Audit

From my personal experience, exploratory research, and conversations with users, I kept track of the existing solutions available and accessible to WOC. I did a competitive audit to see if their solutions would adequately address the user needs I had uncovered through the user research.

All my participants expressed their frustration with their connections on LinkedIn not being responsive.

Key Research Insights

The secondary and primary research phases gave me a solid understanding of the problem space, my target users, as well as the existing solutions and resources. I took a step back to synthesize and analyze what I had learned to inform my design solution.

Insights on User Needs
Insights on goals and Logistics

3. Define the Users and a Solution for Them

Research-based User Personas

Synthesizing all the research data I had collected so far, I constructed two distinct personas to capture the goals, needs, and frustrations of two primary roles I should design for.

User Story Mapping

I mapped the key activities personas 1 and 2 have to go through to successfully connect and build up an informal mentor-mentee relationship. A user story map allowed me to walk through the two personas’ journeys and identify features and content needed for the product.

Ideation

The product gradually took shape in my head throughout the process of creating the UX artifacts mentioned above. Given the time constraints and the scope of this project, I chose to prioritize the key experience for a mentee: Looking for a mentor, connecting with her, and successfully meeting to receive advice.

As a huge believer in “design iteration brings powerful results,” I didn’t expect my design to be perfect at the first attempt. It was more important to quickly try to test out my initial design in order to validate the product concepts, content, and features. I set a time limit (30 mins) to force myself to be scrappy and efficiently sketch out the minimum viable product (MVP).

4. Make, Test, and Iterate on the Design

Initial Iteration - Lo-fi Prototyping

Part 1. Paper Prototyping to test the core flow

Bringing my lo-fi prototype to two prospective users, I tasked participants to find a mentor and schedule an initial chat with the user they found. Through lo-fi prototyping and testing the core flow and functionality, I was able to quickly assessed my design in the early design phase.

The observation and feedback helped me uncover more specific user needs in terms of the information, features, icon, and UI decisions.

I tested with two participants who had different UX specialties and mentorship needs.
I used sticky notes to keep track of user feedback and usability issues. If I had immediate iteration ideas, I jotted down using yellow notes.
Part 2. creative prototyping to test the onboarding & profile set up

I came up with the idea of using Google Forms to test the onboarding and profile set up process. This technique I invented helped me quickly tested if the questions and options worked.

Hi-fi Iterations

ITERATE AND GO DIGITAL — HI-FI WIREFRAMES

I iterated on my design, incorporating the design decisions I made to address the user needs. From here, I started translating lo-fi artifacts into digital wireframes in Sketch.

“The modeling phase represents the first real test for design.” Digital wireframing pushed my to detail and evaluate the screens — ensuring all the required functional elements were well-thought-out and incorporated — as well as be more realistic about the content structure, UI decisions, and interaction.

I created digital wireframes in Sketch.
SPOT USABILITY ISSUES — USABILITY TESTS

With the prototyping feature of the Sketch app, I turned my wireframes into a workable prototypes and tested with four participants.

5. Craft the Experience

Brand Development Process

As a designer with a product thinking hat, in addition to solving a problem for users, I wanted to take my solution to the next level by giving it a vivid brand identity and an appealing look-and-feel. Therefore, brand concept development took place throughout this project.

Brand Ideas

To define the brand, I brainstormed ideas based on items and spaces people would associate with "meeting up with people to seek advice" such as Cafe, Coffee, Tea, Space, Network, Lounge, Room, and so on. Yet, during the initial exploratory research phase, I found that most of them, especially "Cafe" and "Coffee," have been previously used, and it would be hard to differentiate my product from others if I chose something similar.

The "grab a coffee" concept has been used by many products, such as "Cafe UX," "UX Coffee," "UX and Coffee."
"UX juice Bar" Logo & theme colors

The key brand idea was drawn from a user interview with P2, who spent the last summer at Google as a UX Design intern. When she walked me through her experience as a mentee, she mentioned that she always met up with her Life Mentor at the juice bar at Google in early mornings — grabbing healthy, delicious juice smoothies to set the right tone for the day. I instantly fell in love with this idea for many reasons.

  • Juices can be of many colors.
    → The diversity of colors could send a message that this community is welcoming and inclusive of any women-identifying people of color, including all non-white ethnicities and races.
  • Fresh fruit and vegetable juice are one of the best ways to get a high concentration of nutrients essential for healthy physical development.
    → A glass of UX Juice is healthy for your growth as a UX professional! 💪
I sketched logo ideas and theme colors for the brand.
User Feedback

In order to find out whether this brand concept would resonate with my target audience, I ran 5 preference testing sessions and engaged in many hallway conversations to solicit feedback.

UI and Visual Design

Accessibility

Before I started working on the final visual and UI design, I checked whether the theme colors I picked were accessible, as well as what text colors I should avoid. This step was to ensure the accessibility of my design by providing sufficient color contrast.

I tested the text legibility using the Material Design Color Tool.
Pixel Perfect

With industry practices and the Material Design guidelines in mind, I took the time to push pixels, as well as designed in "8's." I faithfully followed the 8pt rule to achieve consistent spacing and scalability.

I used 4pt / 8pt / 16pt / 24pt / 40pt / 48pt / 64pt for all padding and margins between elements.
Delightful Design

Out of my passion for this project and a desire to make users' experiences delightful, I relied on one of my favorite types of design: Doodles. Understanding that repeated imagery may lose its charm over time, I only show illustrations on screens that won't appear too often, such as the ones in users' one-time onboarding flow.

I was very pleased with the outcomes because my illustrations proved to work well as delightful details, "wow-ing" my participants in the testing sessions while piquing their interest and excitement.

I created the illustrations in Procreate. My doodling process, just like my UX design process, was highly iterative.

6. Reflect

Project Impact

UX Juice Bar creates a safe and supportive space where WOC UX professionals in different levels of positions can feel comfortable sharing UX expertise to help each other grow in this field. This collaborative model can also be applied to any group who would need an inclusive space that is exclusive to them.

More and more companies are embracing cultural diversity and releasing annual diversity reports to demonstrate their commitment and continued progress. Improving diversity and equality in workplace certainly requires long-term efforts. UX Juice Bar can serve as a channel for companies to achieve the goal of diversity recruitment by partnering with their sourcing and hiring teams, especially Diversity Recruiters or Specialists, to promote job opportunities or host events for WOC.

References
  1. Connecting Diversity Efforts in the Workplace with Business Mission, Goals, and Objectives
  2. Riot Games hires a chief diversity officer to address toxic workplace culture

Scalability

The current information architecture allow UX Juice Bar to accommodate more features to Home, Discussion, and Events, depending on user needs and business goals. Meanwhile, the modular design system can help accelerate new work by empowering the team to share and repurpose basic modules.

Takeaways

Stay curious and think beyond the standard process to find ways to continue gathering user data and crafting the best experience for them.

Working under time pressure, I realized the importance of being creative and resourceful in order to deftly walk around obstacles. I was really glad that I came up with my own techniques (e.g., using Google Forms to rapidly prototype the profile set-up process on mobile devices) to solicit my target audience's feedback on my design.

I wholeheartedly enjoyed the process, and I am excited to chat with you about UX Juice Bar!

My passion to give back to the UX and WOC community and my determination drove me throughout the end-to-toe research and iterative design process. This project was a confidence-booster because I realized how much I could accomplish in this short-term, 7-day design challenge. All the knowledge, industry experiences, design chops, along with various professional skills (e.g, project scoping, organized and efficient documentation, and effective time management) I have gained allowed me to be a adaptive and effective UX Design practitioner as a whole.

Final Design

1. Interaction Map

2. User Flows

• Join the Community

• Get the Right Help from the Right Person

Home & Search

Mentor/Peer Profile

• Schedule a Chat

• Receive the Help

Overview
Process
1. Explore
2. Understand
3. Define & Ideate
4. Iterate
5. Craft
6. Reflect
Final Design