portfolioCovers4.jpg

Website Design & Development

Role

UI/UX Designer

Web Developer

Timeline

February 2020 - March 2020

Software

Gender Diversity

genDiv.png

Figma

HTML/CSS, JavaScript, JSON, D3.js

 

What is this project?

This project was created with the intention of creating awareness and encouraging people to welcome new identities, meaning non-binary genders, sexual orientations, etc. This platform can also be used to learn about how to respectfully address people who identify as non-binary. For individuals looking for support resources near them, the website has an interactive element which shows resources near you as well as useful links to learn more about non-binary genders.

The website has interactive elements such as smooth scrolling, a world map with hover-based interactivity, an input field which displays a variety of results, and explanation of gender, sexuality, and the difference between the terms

portfolioCovers4.jpg

Overview

Intro

The website's interaction starts off with a short explanation of the website's goals and what users can find on it. Users can also use the header menu to navigate through the webpage.

genDiv_final1.png
genDiv_final2.png

Interactive Map

By hovering over the map, users can find out how to address non-binary genders in various languages and local dialects around the world.

Informative Sections

The website offers short definitions and explanations of common misconceptions about gender, sexuality, and their differences. 

genDiv_final3.png
genDiv_final4.png

Access to resources

This website also includes a resource locater, which displays nearby resources based on a user's chosen location. Users can use this interaction or more resources from the footer to seek help or support about gender identity.

portfolioCovers4.jpg

Topic Brainstorm

Mind Mapping

Brainstorming topics and connections

This brainstorming was related to internet-inclusivity and problems related to digital diversity. This exercise made me specifically pinpoint the causes and solutions to certain social problems. The main things I focused on were integration and acceptance of cultural, gender, racial and financial diversity. The internet should be an open platform for all humans regardless of their backgrounds, and they should each have an equal voice among the public. One of the main issues I narrowed down was the fact that gender identification is not well-known in our communities. There should be platforms to educate people as to what each pronoun or identity means, hopefully leading to a more gender-inclusive environment. All of this can come under the big umbrella of social media and technology usage, which could be censored for offensive commenting, as an attempt to achieve equality. In the end, I based my project on gender identification with a focus on homophobia, awareness of pronouns, etc.

genDiv_brainstorm1_edited.jpg
portfolioCovers4.jpg

User Research

Academic Research

Gender Diversity around the world

Advantages of diversity in everyday life:

  • Diverse backgrounds, ideas and points of view have helped us build and invent as a nation.

  • It can increase adaptability and promote creativity and innovation with the wide range of new ideas and perspectives.

  • Improves professional atmosphere and encourages development, constant updates in policies, language and infrastructure.

 

Importance of diversity in everyday life:

  • In terms of gender-based diversity, many countries around the world are creating awareness about gender pronouns and the use of gender-neutral language.

  • Inclusive language is important because it creates a sense of respect and acceptance in our society.

User Interviews

What do users want to see in the application?

My  first interviewee  is a female college student who has been in very close contact with the LGBTQ community and passionate about being able to create a better life for people identifying with non-binary genders.

  • The difference between gender and sexuality, which people get confused with quite often

  • Names of organizations in each country which deal with gender identification issues or non-binary term usage

  • Counseling services to help with gender dysphoria and suicide prevention helplines in each country

icon2.png
icon1.png

My second interviewee is also a female college student with strong feminist views. She believes equity and respect for all genders needs to be encouraged and enforced around the world.

  • She mentioned a lot of similar ideas to the first interviewee 

  • Emotional focus on the non-binary gender community and their process of coming out, should they have to come out

  • How and where to get the right help while they are in this process of accepting their identity. This ties into dealing with abusive family members who refuse to use correct pronouns or feeling misunderstood in their own communities and households.

SWOT Analysis

Interactive website comparisons

genDiv_research1.png

Comparison 1: EQUIP

I explored a web application called EQUIP, an observation tool made for tracking student participation in classes. The goal is to create more equitable classrooms for children to grow in.

Characteristics:

  • The home page interface is fairly simple.

  • The page has a menu symbol at the top-right corner of the page with a bold color to make it stand out. The menu shows a drop-down with different navigation items.

  • In case of forms, the main navigation menu has an option for signing up to the service and there are also buttons throughout the page for the user to be directed to a sign up form.

  • Much of the content on the page has been cut down to show only important or attractive parts and a ‘read more’ button for the user to further learn about the organization. A lot of this content is also placed in bold-colored boxes or under big headings to show their importance.

  • Other than the main navigation and the logo on the far left on the page, there is no specific navigation which leads the user to move through pages.

  • The buttons have a hover element which enables users to realize that it is clickable.

  • The menu icon used is a universal icon used in websites across the web as well as mobile applications.

Improvement Suggestions:

The website is well designed in terms of functionality and overall aesthetic. I would have liked it to have more information on the main page instead of having previews of information, especially since the website only has 3 pages. At first sight, this website made me realize that it was related to education and classrooms, with pictures of little kids as well as older college students on the page.

genDiv_research2.png

Comparison 2: Project READY

I also explored Project READY: Reimagining Equity and Access for Diverse Youth. This website has a series of free, online professional development modules for school and public youth services staff to help improve their knowledge about race, racism, racial equity, and culturally sustaining pedagogy. The website attempts to create awareness towards different cultures and diversity of color.

Characteristics:

  • The website is straightforward and plain with a simple scrolling page and a navigation panel at the end of the page.

  • The color scheme is also plain white which is good in terms of visibility but lacks in aesthetic.

  • The website has a lot of text which gets tiring to read if the user is only interested in a brief idea of the organization.

  • The search bar is also at the end of the page which is a little inconvenient.

  • There is a short form which asks for the user’s relation to education systems, with a submit button and hover element. 

Improvement Suggestions:

I think the layout of the page could have been better and more convenient for the user. At the moment, the layout makes the user scroll all the way down to the end of the page to be able to navigate to another page, or even search through the website. With a reduction in text and slight addition of color, the website would be better aesthetically. The website made me feel like the topic was very serious and does not need to be sugar-coated to be made important, which gave the perfect vibe for a website which is meant for equity and diversity. The website does not have any images which makes it feel unnecessarily long and unattractive, but the header graphic has a good collection of words related to the topic of equity and diversity.

portfolioCovers4.jpg

Wireframes

Wireframe Sketches

Creating a rough idea of my website's layout

I used this kind of layout because the big, wide map across the page draws attention and invites the user to hover and click around the map. The overall layout of this website is straightforward to draw more attention to the topic than aesthetic or functionality. I also included a section at the top of the page that explains the difference between gender and sexuality. This section should be at the top of the page because it is important to know how gender and sexuality are two different aspects of one's identity. I planned to use lots of color to represent the LGBTQ community and help promote their inclusion. I also planned a section at the end of the page, which is targets the non-binary community and offers resources depending on where the user lives. This section uses forms and text boxes.

genDiv_sketch1.JPG

Paper Prototype

Creating a rough idea of my website's layout

Most of my interactive elements are forms and hover boxes. I create little hover box pieces to prototype when my users tried to navigate the website. For forms, I have 2 forms, one for finding nearby sources and another for the user to interact and add to the map. Using this feature, I hope to also create an open, sharing environment where people can educate each other and share knowledge through technology and interaction. For the "add to the map" form, I have little map pointers which will pop up in the given or provided locations and give the user a chance to personalize the website.

genDiv_sketch2_edited.jpg
genDiv_sketch4_edited.jpg

Color scheme

An initial palette of colors for the design

For the website, I decided to use a bright but simple color scheme. My initial idea was to use JavaScript to make the background change colors for each section of the page, making the website rainbow as a whole to represent the LGBTQ community. However, this would become very difficult to use in case of visibility and legibility of the website, making it less accessible.

genDiv_sketch3_edited.jpg
genDiv_colorscheme.png
portfolioCovers4.jpg

User Testing

Overall Design and Functionality

Goals for testing

1

2

3

Test the website's effectiveness.

Figure out the gaps in functionality causing confusion and frustration.

Identify additions that users would like to see in the website.

Preliminary Drafts

Non-functional drafts of the website layout

Draft 1

genDiv_draft1.png

Draft 2

genDiv_draft2.png

Anchor link button added for easier access

Draft 3

genDiv_draft3.png

Anchor links menu for easier access

Button opens as a pop-up instead of scrolling through the website

First Prototype

Functional prototype critique

Does not explain the main intent of the website and/or what the user can expect

genDiv_proto1.png
genDiv_proto2.png

Text is too long and becomes tiring to read

Text is not bold enough to easily read

Testing Summary

User Feedback

  • Great use of interactive elements to address a very important topic

  • Suggestion to use JavaScript libraries and d3 to actually implement interactions

  • I had elements which would be using map coordinates and letting users add to the map using location. For this implementation, users suggested a library and database to make sure the coordinates land in the right place

  • Effective color scheme

 

Overall, this critique was very useful to help me figure out how much work I would need to put into this project and how I would go about doing it so that it turns out to be as similar to my original design as possible.

portfolioCovers4.jpg

Final Design

Hi-fi Mockups

1/4

Explore the live website!

portfolioCovers4.jpg

Final Thoughts

I believe my final draft was more successful in communicating my call to action and encouraging people to pay more attention to artwork and imagery. The stark contrast between the background, imagery and text looks much brighter and  draws the most attention to imagery and the main exhibition names, without being too dull or gray. Testing has proven the design to be  easy and straightforward to navigate and to attract all kinds of audiences. The slideshow layout is also unique and more aesthetically designed element which goes with the overall vibe of the website.

Challenges

  • Since this website was coded from scratch, I had to work with languages, libraries, and databases that I had not heard of before. Many of the elements I included were being coded for the first time, so I had little inspiration or past online projects to refer to.

  • This was one of my first projects handling multiple HTML and JavaScript files, so I learned to comment through my code to keep track of what I wanted to achieve.

Future Steps

  • A design is never perfect so keep iterating and learning!

  • I hope to expand this website into a hub for awareness, education, and support for non-binary genders.