Web Design /
Gender Equality Law Center
2019
Visual Design
Web Interaction
Overview
The Gender Equality Law Center is a new york-based non-profit organization that advances laws and policies that promote gender justice and racial equity in all aspects of public and private life. As an art director in a team of three, I created and proposed the direction based on market research and client needs. In order to solve the text-heavy problem and attract LGBTQ young people, I improved the reading experience with three key values: Inclusive, Supporting and Professional. I was inspired by the vivid colors from different kinds of LGBTQ flags.
Client: The Gender Equality Law Center
Collaboration:
Akira Lee - Art director & Visual designer
Sahir Singh - PM & Researcher
Xyarnés Ying Xian Ang - illustrator
The project was completed during the three-month internship in Wix Design Playground.
Design Process
Challenges
How might we create an engaging and professional website with clear navigation that gets target people involved?
Home page (original)
Main Problems
-
Information displays in old-style->
no interactivity, not very engaging for teenagers.
-
Lack of visual hierarchy->
heavy text-based, couldn't find the right info immediately
-
Unclear navigation ->
couldn't guide people with different needs
Inner page (original)
User needs and user flow
Main features
Interactive card design
->Reduce the amount of text to find the information you need in the first place
-> Interactivity attracts younger groups
FAQ design
-> Add a search function to help find info quickly
-> Organize a large number of legal provisions in a form
Design Details
Colors with lo-fi wireframes
Inspiration board
Picking up the website colors from LGBTQ community flags.
Design systems
Wireframes
Homepage (Ver. 01)
Homepage (Ver. 02)
Design Iterations
According to the feedback from the client and target users, we gained helpful feedback and then iterate design based on it.
Here are some important design improvements.
Homepage (After)
-> New header
Make the CTA button fix on the top right corner
Make phone number bigger and fix on the top
X: The illustration of hugs might make people think about sexual harassment
-> should avoid any physical contact
-> Add what we do section
X: Card design looks very different
-> should consider the consistency
X: Could not understand what this organization do
-> should add a intro section
-> Change the round corner to square
Make the card design flat!
-> Change illustrations
Homepage (Before)
X: Phone number under the header did not stand out
-> should make the phone number the top priority
