On May 2, 2022, a draft opinion circulated among Supreme Court justices suggests that earlier this year a majority of them had thrown support behind overturning the 1973 case Roe v. Wade that legalized abortion nationwide was published by Politco. As a person with a uterus, I was completely distraught with how the supreme court of this country I live in disregarded human’s bodily autonomy. Feeling the need to channel this rage somewhere, I began to ideate a site that provides how hostile some states are to people with uterus, the history of constant fight for abortion right, and the resources to help pregnant people. I started this project in May of 2022, and ironically enough, it was named ‘If Roe V Wade is Overturned’. Sadly, it was then changed to ‘Roe V Wade is Overturned’ soon after June 24th, 2022. 
          <u><a href="https://www.politico.com/news/2022/05/02/supreme-court-abortion-draft-opinion-00029473" target="_blank">Leaked draft opinion of the Supreme Court voting striking out Roe V Wade↗</a></u>

Background

Using Miro and traditional pen and paper, I began to list out important thins to include in my site. Knowing that ,after Roe V Wade is overturned, abortion right is determined on a state level, I want to make case study of each states. I decided to observe 6 states that are hostile to people with uterus: Missouri, Texas, Kentucky, Alabama, Oklahoma, and Louisiana. For each states, I wanted to have multiple sections: statistics about abortion, how each state pro-choice representatives fight for abortion rights, a gallery of protestors, and resources for pregnant people.

Research

Afterwards, I began to create wireframes on how the bare bone of the website would behave. At this stage, I started to be aware of the language of the site, of how visual metaphors can speak to viewer. I also wanted to make sure that the language of the site is gender-neutral and inclusive. 

Ideation

Design and Develop

I had mininal knowledge of JavaScript before this project, therefore, whenever I have an idea of a prototype I wanted to see if it is possible for me to code it. This led to me prototype or designing through code and Figma at the same time. This took a large amount of time in the project since I am not designing everything through Figma first. If I restart this project, I would have done more designing in Figma before moving into codes. I also should have collected all the content before moving into codes so that it would be easier to tie everything in. Furthermore, I want to implement more user testing for this project. 

Reflection

Roe V Wade Is Overturned

Created launch-ready promotional assets, including App Store visuals, social media posts, Meta ads, and reusable templates aligned with brand guidelines

Social Media

App Store Screenshot Assets

Designed and developed responsive email templates to support product launch campaigns

Email Templates

Little Sky Steps

This concept represents an initial design direction for the Riot Games homepage — exploring how bold modular layouts and expressive visuals can bring the brand’s personality to life online. The homepage reimagines Riot’s digital presence through a flexible grid system combining large-scale typography, vibrant hero imagery, and dynamic content modules that highlight games, culture, and community stories.

Homepage

This concept explores a dedicated Riot Games Music experience — a cinematic, rhythm-driven page that celebrates the soundtracks, artists, and creative collaborations behind Riot’s universe. The layout pairs oversized typography with bold, layered visuals to mirror the energy and motion of Riot’s music culture.

Music Page

Motion

Riot Games

Have you Eaten?

During the merger between Worbler and SKU IQ, our Inventory Management Software partner, I researched and designed a branding proposal to support the transition. Working from brand pillars developed with the Creative Director—Intelligent, Cutting-Edge, Streamlined, and Collaborative—I explored a visual direction centered around an abstract infinity symbol formed into a “P” letterform, representing connection, continuity, and scale. 
 
The color palette balances energy with clarity. A bold purple anchors the brand with confidence and originality, while lighter pink and purple tones introduce playfulness and a modern polish. Off-white, soft grey, and off-black provide a neutral foundation, creating contrast and readability while allowing the brighter hues to stand out without overwhelming the experience. 
 
In addition to the visual system, I created motion design animations to pitch and showcase the new brand direction to investors.

Post-Merger Brand Identity

Entering 2025, our team redesigned the Editor using a modular approach. I created wireframes and designed an experience where all core editing tools live on a single screen, making video editing more approachable for novice users. 
 
 Users can edit Script, Stickers, Text Styles, Colors, Media, Voices, and Music without leaving the Editor. An Overview panel shows all applied effects at a glance, while the Product Info panel surfaces key commerce data—such as monthly GMV, brand, price, variations, and distribution channels—pulled from our Inventory Management Software partner. 
 
Components start collapsed and expand as needed. As more panels open, the Product Info and Overview panels automatically collapse to preserve editing space and keep the focus on creation.

Unified Editing Experience

Once users have finished customizing their video, they can seamlessly publish it through the Export flow. I designed the Export experience to support both standard video downloads and direct posting to TikTok with a shoppable link, including clear guidance for completing the setup. 

Within the Export flow, users can also customize captions, visibility settings, viewer permissions, and video content disclosures, making it easy to finalize and publish content without leaving the Editor.

From Edit to Publish

I designed the Editor to allow users to easily swap video templates at any point in their workflow. In addition, I designed the Template Library, where users can browse all available templates in one place. 
 
To help users quickly find what they’re looking for, the Template Library includes category-based navigation, sorting options, and visibility into templates already used in drafts for a specific product. This makes template selection faster, more intuitive, and better aligned with each user’s existing content. 

Template Library

Post IQ

There is no popular digitized educational mode for sex education. Majority of sex ed resources are either in book or video forms. In the digital age, an app could be more accessible for some people than other traditional medias. Furthermore, a lot of current sex ed resources, while they are useful and provide a lot of insight, are quite outdated in terms of gender inclusivity. Therefore, I want my product to center around inclusivity and respect. <strong>How can we address this issue for being a trauma-informed, inclusive, sex-positive sex-ed resource, while also being accessible to individuals of all genders, sexual orientations, and cultural backgrounds?</strong>

The Challenge

To better understand the gaps of current sex education resources or platforms out there, I started by conducting research with the following goals: 

→Understanding how people first learn about sex education and continue to learn about it afterwards 
→Determine the role of sex ed in society and personal idenity/self love 
→Understanding how to communicate sex, intimacy, and relationship with healthy attitudes 
→Discover ways to be inclusive to all users of different of all genders, sexual orientations, and cultural identities.

The Approach

<strong>Competitive Analysis</strong> 
Kama

Research Methods


        <div style="width:100%; display:flex; flex-direction:row; gap:20px;">
          <div style="width:50%; display:flex; flex-direction:column;">
            <strong>Strength</strong>
            → Unique combination of educational content and community engagement 
            → Sex-positive approach 
            → Wide range of educational resources on sexual health, wellness, and relationships, including videos, articles, quizzes, and interactive features
            → Has expert inputs
      </div>

      <div style="width:50%; display:flex; flex-direction:column;">
        <strong>Weakness</strong>
        → Lack queer-inclusive contents
        → Limited features for tracking progress
        → Limited personalization
      </div>
    </div>
  


        <div style="width:100%; display:flex; flex-direction:row; gap:20px;">
          <div style="width:50%; display:flex; flex-direction:column;">
            <strong>Strength</strong>
            →Accessible for people with different abilities, with features such as closed captions and alternative text for images.
            →Inclusive of diverse identities and experiences, including LGBTQ+ individuals, people with disabilities, and people from different cultural backgrounds.
      </div>

      <div style="width:50%; display:flex; flex-direction:column;">
        <strong>Weakness</strong>
        →Is designed for young people ages 10-14, so it may not be as useful for older teenagers or adults. 
      </div>
      </div> 
  

<div style="width:100%; display:flex; flex-direction:row; gap:20px;">
          <div style="width:50%; display:flex; flex-direction:column;">
            <strong>Outreach questionnaire</strong>
            <img style="border-radius: 10px" alt="outreach-questionnaire" src="/images/respex/respex-textimage-13.jpg">
            Gauged users’ experiences with sex-education in traditional form and digital form. I found that most users first approach sex-education informally, either through their parents or self-exploration. 
      </div>

      <div style="width:50%; display:flex; flex-direction:column;">
        <strong>Secondary research</strong>
        <img style="border-radius: 10px" alt="secondary-research" src="/images/respex/respex-textimage-14.jpg">

        Researched differernt statistics of different demographics on how, when and where they learn about sex ed. The Guttmatcher Institute has many reports on the state of sex ed in the US.&nbsp;<br>
Link to studies <u><a href="https://www.guttmacher.org/state-policy/explore/sex-and-hiv-education" target="_blank">1↗</a>,&nbsp; <a href="https://www.guttmacher.org/fact-sheet/american-teens-sexual-and-reproductive-health" target="_blank">2↗</a>,&nbsp; <a href="https://www.guttmacher.org/fact-sheet/sex-education" target="_blank">3↗</a></u>
      </div>
      </div> 
  

Other Research Methods

Throughout my research, I have learned some of the pain points that users run into when engaging with sex education resources. 

→Lack of community when it comes to sharing experiences due to stigma and shame 
→Lack of inclusive content, especially for the queer community 
→Dry and impersonal contents that make it hard to relate and learn 

Therefore, I came up with these goals in mind before starting the design process.

Insights & Goals

With my research, I decided that the scope of demographic or audience that Respex would cover is 16+ and of all genders.

User Personas

Utilizing my research, I created three user personas based on the idea of the teenager, the young adult, and the mid-life adult.

By creating a userflow, I want to show the distinction between a user that has an account and a guest user. Understanding that sex education might still be a stigma for a lot of people, I want to give users the option to opt out of having an account yet still being able to use Respex to learn about sex ed. However, if they do create an account, they are able to have personalized content that is aware of their gender identity, sexual orientation, cultural or religious background, and past experiences or trauma.

User Flow

To convey a sleak, clean appearance with a modern twist, I wanted the visual design of the app to spark interest, and a playful energy. I chose a pixel typeface, PP Mondwest, for the logotype for the modern, digitized look. The gradient colors/duos are used to as branding for the app.

Visual Design

<div style="width:100%; display:flex; flex-direction:row; gap:20px;">
          <div style="width:50%; display:flex; flex-direction:column;">
            <strong>Sign Up Page with Questionnaire</strong>
            With my research, I felt that a survey to see how users identity is pertinent to suggesting lessons or contents that are best suited for them. 
Reading on how to design for genderqueer people <u><a href='https://uxdesign.cc/beyond-the-binary-5-steps-to-designing-gender-inclusive-fields-in-your-product-ff9230337b4f' target='_blank'>[1]↗</a>, <a href='https://dscout.com/people-nerds/4-design-principles-for-gender-identity-inclusion-and-how-to-get-them-implemented' target='_blank'>[2]↗</a></u>, I wanted to acknowledge the intersectionality of gender expression, therefore, I used typeaheads form to allow for infinite possibilities while retaining structured data. 
Language is also important. Instead of saying “Others” for the pronouns that are not listed, I used “Self-Identify” instead, since the former might suggest alienation for some users.
      </div>

      <div style="width:50%; display:flex; flex-direction:column;">
        <img style="border-radius: 60px; width: 80%" alt="sign up with questionnaire" src="/images/respex/respex-textimage-4.gif">

       
      </div>
      </div> 
      <div style="width:100%; display:flex; flex-direction:row; gap:20px;">
          

      <div style="width:50%; display:flex; flex-direction:column;">
        <img style="border-radius: 60px; width: 80%" alt="sign up with questionnaire" src="/images/respex/respex-textimage-16.gif">

       
      </div>
      <div style="width:50%; display:flex; flex-direction:column;">
            <strong>Main Page</strong>
            For the users to be able to keep track of their lessons, I wanted to use an indicator before each lessons to see how much of the lesson the user has read through. 
      </div>
      </div> 

      <div style="width:100%; display:flex; flex-direction:row; gap:20px;">
          <div style="width:50%; display:flex; flex-direction:column;">
            <strong>Lesson Page</strong>
            To make the content more engaging and up to date, I wanted the lesson to be story-based, or slidelike. This way the user can share to their social media or bookmark certain slide for future use.
      </div>

      <div style="width:50%; display:flex; flex-direction:column;">
        <img style="border-radius: 60px; width: 80%" alt="sign up with questionnaire" src="/images/respex/respex-textimage-17.gif">

       
      </div>
      </div> 
      
      
       

The Solution

<div style="width:100%; display:flex; flex-direction:row; gap:20px;">
          

      <div style="width:50%; display:flex; flex-direction:column;">
        <strong>Designing for queer people</strong> As a queer designer, I want to explore different ways that queer people are left out in the process of design. Small details could enhance an user experience and create a more inclusive enviroment.
       
      </div>
      <div style="width:50%; display:flex; flex-direction:column;">
            <strong>Future improvements</strong> One aspects that I think can be added to improve the experience is adding forums functionality for users to find their community and likeminded individuals.
      </div>
      </div> 

Respex

Using the data from the US Environmental Protection Agency (EPA), I wanted to visualize how stream temperature changes over time and how much it affects the quality of lives of the fish species that live in the Chesapeake Bay. Furthermore, I knew that I also want an engaging, interactive element so that the reader would be interested in reading more about this study case. I also wanted a deadpan, also sarcastic tone to this project.
        
        The data sets are:<br><div style="text-align: center;"><div style="text-align: left;"><u><a href="https://www.politico.com/news/2022/05/02/supreme-court-abortion-draft-opinion-00029473" target="_blank">Climate Change Indicators: Stream Temperature↗</a></u><br>
        <u><a href="https://www.epa.gov/climate-indicators/snake-river" target="_blank">Tribal Connection: Trends in Stream Temperature in the Snake River↗</a></u>
        

The project started out as just static slides. However, feeling that it was not enough and I wanted to expand this more to an interactive format, I went ahead and coded a web version.

In reflection, I would want to add another section to measure how many streams changes their temperature significantly. Furthermore, I appreciated the fact that I was adaptive with my design. In the original initial slides, I had a clipping mask when the background changes to black and therefore the text would be white to create a contrast. However, this was way more difficult to achieve through code. Therefore, I decided to make the background to move in a certain way that would make it easier to change the text entirely. 