Work About Resume Contact

1 Thing Against Racism

A place for people to learn and support for a better world.

1 Thing Against Racism mock up screen
What is 1 Thing Against Racism?
1 Thing Against Racism was founded in response to the increased racism against Asians due to the Pandemic. Many people have feelings of anger or fear, yet are hesitant to take action. 1 Thing Against Racism is a non-profit organization that is trying to mobilize all Asians and allies to stand up and fight against racism together.
Objective
  • Design a website to start spreading awareness about Aisan Racism.
  • Create an educational website to learn about racism and Asian culture in an approachable and friendly way.
    • Role:
    UX/UI designer
    Tools:
    Figma
    Team:
    Kotomi Cogdill,
    2 other designers, 3 developers
    Challenges
  • Websites about Anti-Racism usually look serious and aggresive. How might we make it approachable so that we are not demanding that people be open-minded?
  • People usually don't know what to do or where to go to give their support. How might we create a place to learn and connect with other supporters?
    • Solution 1
    Optimize the use of friendly and approachable visuals.
    We tell users we're not an aggresive organization by the use of softer colors and imagery.
    desktop landing page, hero section
    Solution 2
    Create a community for supporters with educational content.
    This is where you learn and connect with other supporters.
    desktop landing page, action section

    Design Process

    For this project, we decided to have a website ready as soon as possible to start promoting, and iterate details of the website later on as we test the design.
    Mid-fidelity Wireframes
    I created mid-fidelity wireframes of the landing page first so that developers can start working on it. I decided to include statistical facts that show racism against Asians is happening and has increased. I also included a hate crime tracker that another team in the organization is building. I wanted to keep the website approachable, but at the same time I wanted users to realize the severity of this issue.

    As users scroll down to the next section, they can learn about how to help. After learning about the facts users can take action—here is where users' frustrations and fear can be turned into support. After that are some interesting articles where users can learn more about Asian cultures. Reading will trigger users' interests about Asian cultures and be more open-minded and understanding.
    mid-fidelity wireframes
    Hi-Fidelity Responsive Design
    To finalize the design, I moved on to visual design and established the organization's branding. For the images, I avoided images of people protesting because it makes the website aggressive. Instead, I picked an image that gives off positive impressions.

    For the statistical information, I decided to reduce the facts from 3 numbers to only 2 numbers. Now we only have the number of cases per month and per year. This way it's easier for users to understand the numbers at a glance. It also will be easy for us to update and gather the information.
    hate crime tarcker
    For the action section, I decided to use the existing designs from what the organization had already. I used icons to visualize what each section is talking about. It will make it easy for users to differentiate and read the ones that they find interesting.
    ways you can help section
    Here's the final responsive design I handed over to the developers.
    hi-fidelity wireframes

    Takeaways

  • Working with a team is more complicated than I expected. Communication is the key to success.
    • View previous case study