OVERVIEW

Hyphenated is a platform that shines a light on Asian American narratives through a tarot card-inspired experience and connects audiences to culturally-appropriate mental health resources. It aims to help Asian American users improve their mental wellbeing by feeling heard in their cultural experiences.

As co-founder, I hoped to address parts of the Asian American experience that are often ignored by the media. I worked with a small team of a product manager and engineers to build the MVP.

This product was launched for one year, but has not been renewed as the team has moved on to other projects.

TYPE

Product Design (web)

ROLE

Product Designer
Team: 1 Product Manager + 2 Engineers

TOOLS

Figma
Framer
InVision
JIRA/Github
Miro

TIMEFRAME

22 weeks

Background

The rise of Asian hate crimes in the wake of the COVID-19 pandemic forced many Asian Americans—including myself—to reflect upon our places in the United States. These acts of racism, whether major or minor, have always had a huge impact of Asian American mental wellbeing. Following the lean start-up framework, my team and I created Hyphenated raise awareness around some of these issues. As design lead with a business background, I led the research and UX/UI strategy, and also partnered with the PM on product and business strategy.

Key Achievements Thus Far:

1. Identified pain points and turned an idea into a product. The process of bringing a product from research to ideation to tangible thing is an amazing feeling in itself. It’s made me realize just how important user testing and reiteration are in all parts of the process. The product is still in development and has not been released, but our growth as a team and our belief in our mission has been a truly incredible driver.
‍
2. Juggled many different hats. Working in an early-stage mode with limited time and resources was not easy. I conducted research, sketched, tested and designed the product alongside writing and illustrating product content, crowd-sourcing, and creating pitch deck presentations for the business and marketing side of the business.
‍
3. Presented to engineers and stakeholders. I was able to implement the skills that I gained from my sales role at IBM in both designing and delivering presentations to onboarding engineers and stakeholders. Prior to launch, I will be preparing and pitching our project to industry experts.

Understanding User Needs

Preliminary Research

We started out by conducting market research and 7 high-level interviews to understand what pain points people were experiencing.

User Research

We conducted 7 in-depth interviews with individuals who identified as Asian Americans within the age group of 18-25.

This is some individuals revealed:

"I moved around a lot growing up. My whole life has been, 'How do I fit in? How do I make them not hate me?'"

"I need a therapist who understands my culture and background. Otherwise, it's hard for them to get me."

"I felt that my mental health, compared to what my immigrant parents were going through, was insignificant."

"Growing up, mental wellbeing was not viewed as a necessity in my family. I always pushed it to the side."

User Personas

Based off our research, I created user personas that best encompassed the key profiles that surfaced. Since secondary research had also shown that one's racial identity had a direct relationship with mental wellbeing, we decided to focus on User 2 as our core audience segment as their need was also typically experienced by User 1.

User 1: Shruthi

User 2: Kevin

Empathy Mapping & Behavioral Archetypes

In order to gain an even better understanding of what some of our Persona 2 users were going through, I used empathy mapping to create a behavioral archetype with the user's main goal and struggles. We would keep these user needs in mind as we moved forward into our defining our product vision.

User Journey

Based off our research, I created a basic outline of our user's journey in dealing with mental wellbeing and cultural stressors. Due to the nuance and complexity of mental health (as well as our team's lack of medical training), we decided to focus on addressing our user's frustrations when it comes to facing cultural stereotypes and finding suitable resources to help them process their emotions.

The Product Vision

Ideation & Feasibility Mapping

We gathered as a team for brainstorming and ideation. I walked the team through a 2x2 matrix of Feasibility vs Impact, and worked closely with the engineers on this session to determine which ideas would be the best to pursue.

We discussed feasibility of the product by looking at the timeline and the bandwidth of our engineers. We defined impact on our user by reviewing the problem statement and user goals in mind. We knew that we could not create a "Swiss army knife solution" to solve all of the issues our users were facing. To address this issue, we analyzed all of our solutions through the lens of the problem statement.

Our acceptance criteria for our solution was that it would promote mental wellbeing, help our users feel validated and seen in their experiences, and serve as a resource for the Asian American community.

We determined our product would have 3 key focus areas:

1. Asian American-centered focus. We want to address issues specific to Asian American-identifying individuals.
2. Curated resources for growing community and allyship. We want to provide links to outside mental wellbeing and educational resources.
3. Narrative validation: the "you are seen" of representation. We want our users, who reported feeling misrepresented by popular media, to feel that their struggles are heard.

Competitive Analysis & Barriers

I conducted market research on other products to understand how problems in this area were being addressed and how we would set ourselves apart. I specifically looked at mental wellbeing resources for minority groups in search of inspiration.

While many of these mental health help resources were created by or with physicians, some did have side features focused on dealing specifically with day-to-day minority experiences (i.e. micro-aggressions, shame in taking up space, masking, etc.). I decided to pursue a route similar to this, specifically focused on the Asian American experience, and bring these previously side features to the forefront.

Our Solution

From our research, we knew that many young Asian Americans felt bogged down by stereotypes and the lack of proper Asian American representation in the media. We decided to focus on issues that our interviewees stated have affected their mental wellbeing, all of which were related directly to their Asian American identity.
‍
At long last, we arrived at our solution: A tarot card-inspired web application that helps young Asian Americans unravel their trials and tribulations, enabling them to share their experiences with each other.

Our Unique Approach

Hyphenated is named for the hyphen that used to appear between the words "Asian" and "American." This controversial hyphen was removed in 2019 from the Associate Press Stylebook because its presence carried the connotation that the hyphenated person could not be fully American and that their ethnic/racial identity was a less important modifier. By removing the hyphen, both parts of a person's identity would carry equal weight. We chose this name to empower our users to take charge of their identities.

Many of the topics that we were addressing are charged with emotion. For many users, these topics are a point of stress that negatively impact their mental wellbeing. We conducted extensive research on relevant topics and synthesized our findings into approachable, bite-sized information. We also wanted to take advantage of the fact that tarot card reading is a "feel-good" activity that is familiar with our young adult user group.

We help young adults who identify as Asian American to verbalize their experiences and rethink their mental wellbeing by giving them a magical and educational medium to interact with.

Defining the MVP

Key Features

Due to our limited resources and timeline (to launch on May 1st, the start of Asian American History Month), we categorized our ideas into “Necessary” and “Nice to Have.” I like to call it, “Shaping and shaving the dream.”

After discussions with the engineers on technical, time, and financial constraints, we prioritized the following key features:

"Tarot" cards with Asian American-specific experiences and narratives. Many interviewees expressed difficulties in sharing their unique experiences and struggled with feeling heard. Using tarot cards as inspiration for our product would allow us to present information in a digestible format. Given the timeline, we decided to create 6 cards for our MVP.
List of culturally-appropriate mental wellbeing resources. Since our users revealed that they struggled with finding resources when it came to mental wellbeing and their Asian American experiences, we decided to include a list of curated external resources. This feature would help to fill some of the gaps in our product when it came to accessing culturally-appropriate mental health help. One of the resources we have so far is a list of Asian American therapists in the U.S.
Community building and connection. To build more community connection with our users, we decided to create a Twitter account and add a social sharing feature so that users could share their experiences within the community.
Original and AAPI community-sourced artwork. I identified misrepresentation to be one of the stressors that many users experienced in their day-to-day lives. Thus, we had a strong focus on sourcing the tarot card artwork from the AAPI community so that our users would be able to see their identities represented in the pieces.

Storyboard

User Flow & Lo-Fi Sketches

I created a user flow along with a lo-fi wireflow to help our developers get a better picture of my design vision. We also used this opportunity to discuss the feasibility of individual features within our solution and prioritize the features in our development timeline. Due to time constraints and limited developer resources, we decided to go with a simpler user flow.

Usability Testing & Iteration

I conducted two rounds of usability testing with a total of 7 users before finalizing my designs. For the first round, I used medium-fidelity wireframes with the goal of analyzing the general user flow. For the second round, I used a high-fidelity clickable prototype with the goal of measuring user impact and gathering insight on smaller product features.

Here is a brief overview of the testing process:

Introduction of the project goal and building rapport with the user.
Set up context and scenario. Let the user to navigate through the prototype while thinking out loud.
Ask follow up questions and gather feedback on product goals, visuals, and topic impact. Thank them for their participation and time.

Here's what our users had to say:

"Your cards address these charged topics differently. It's not loud and angry like what you see on social media. I like that this lets me reflect in my own thoughts."

"The card topics really stood out to me. I love that I see myself in these stories and can relate to them."

Design

Design System

Before I moved into high-fidelity designs, I created a design system that would create a whimsical and magical appearance. I went with the serif font, Cormorant, to add to the fantastical mood and to ground the content. The body is in Work Sans and card content is written in Georgia for increasing readability.

Artwork

I illustrated 3 out of the 6 cards in our MVP, as well as the artwork on the home page. I wanted the color palette to match the general mood of the rest of the product and to fit into the topic's written content.

Landing Page

One concern with the first landing page was that the Call to Action ("begin") button was too far down and that users would have to scroll for a while before getting to it. Usability testing revealed that despite being placed in a controlled testing situation, users were more keen to move forward than to read all the text on the page. To suit their needs, I cut the scrolling space and added visuals to the instructions. I also added copy to create an exploratory game-like experience so that users would be more engaged.

Card Topics Page

To increase engagement and adhere to the tarot card-like experience, I added visuals to the card topics page. I decided on a design that would display the 6 cards in a row so that all topics would be clearly displayed without having to scroll. Our developers also said that a row would be easier to work with when it came to responsive design. The "Surprise Me" button was added in as an additional card so that it would not be a separate entity from the deck.

Reading Results and Resources Page

In order to maintain the same hierarchy amongst the resources, I removed the numbers and placed the lists side-by-side. Due to time constraints, I also removed the list from the site and decided to use Notion to create added flexibility for editing resources and to decrease the workload on the developer. The card reactions and feedback were momentarily removed from the MVP to prioritize the social sharing capability.

The MVP

Next Steps

Track success metrics of our MVP. For engagement, we planned to track # of weekly active users and # of social media shares. For retention and satisfaction, we planned to track the % of repeat users and NPS (Net Promoter Score).
Build social media presence. As a part of our Go-To-Market strategy, we plan to build a strong social media presence. We created a Twitter account to promote our MVP while reiterating on our product.
Build mechanisms to re-engage users. We want to build a database to allows users to create accounts and experience a more personalized approach. We hope to implement features that would enable users to save their results and receive weekly card readings.
Optimize the mobile experience. Given the time frame, our web application is not responsive for all screen sizes. We would continue to optimize the mobile experience.
Expand to other minority groups. After we complete our current deck for Asian American communities, we want to be able to create tarot card decks catered to other minority groups.

Learnings & Reflections

Adapt to changing requirements. New timelines, priorities, and usability testing results meant that the scope of our product was constantly changing. Even with these changing requirements, I had to adapt and continuously deliver the most functional designs for our users, despite the tight deadlines.
Prioritizing early on helped us make tradeoffs during an emergency. Two weeks prior to launch, one of our developers notified us that she would not be able to continue with the project due to other life concerns. With only one developer left and two weeks remaining, we had to re-evaluate the unfinished MVP features. It was difficult to "let go" of the previous product vision, but we had to be flexible and move forward with our MVP. I created new high-fidelity wireframes suited to the changes and ensured that our remaining developer felt supported in all aspects.
Focus on the MVP. With limited time and resources, we had to focus on the features that would deliver the most value to our users rather than attempt to create a "Swiss army knife" solution. Often times, I had to take a step back to focus on the bigger picture and not get bogged down by the details.
Ask stupid questions. I previously had not worked with developers in such a large volume, and I quickly learned that all the questions I had asked in the beginning contributed to a smoother team dynamic and process later on. I was able to gauge what my developers needed from me as a designer and provide value accordingly.
Future improvements: When it came to responsive design, we prioritized desktop interface before mobile interface for our MVP. Near the end, we were running short on time for our developers to work on the mobile interface in detail. In future projects, I would prioritize the mobile interface before I work on the desktop interface for design ease and to capture the larger user group that browses the web on mobile.

Hyphenated