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
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.
How might we create an engaging and professional website with clear navigation that gets target people involved?
Home page (original)
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
Interactive card design
->Reduce the amount of text to find the information you need in the first place
-> Interactivity attracts younger groups
-> Add a search function to help find info quickly
-> Organize a large number of legal provisions in a form
Colors with lo-fi wireframes
Picking up the website colors from LGBTQ community flags.
Homepage (Ver. 01)
Homepage (Ver. 02)
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.
-> 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
X: Phone number under the header did not stand out
-> should make the phone number the top priority