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

工作區域 8@2x-100.jpg

Challenges

Group 78 Copy.png
How might we create an engaging and professional website with clear navigation that gets target people involved?
Group 120 Copy.png
screencapture-genderequalitylaw-org-2020

Home page (original)

screencapture-genderequalitylaw-org-preg

Main Problems

  1. Information displays in old-style->
    no interactivity, not very engaging for teenagers.
     

  2. Lack of visual hierarchy-> 
    heavy text-based, couldn't find the right info immediately
     

  3. Unclear navigation ->
    couldn't guide people with different needs

Inner page (original)

User needs and user flow

user flow.png

Main features

feature01new.gif

Interactive card design

->Reduce the amount of text to find the information you need in the first place


-> Interactivity attracts younger groups

 

screencapture-akiraxcc-wixsite-website-1

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
Basic Desktop Copy.png
Basic Desktop Copy 2.png
Basic Desktop.png
Inspiration board
螢幕快照 2020-02-23 上午1.42.56.png

Picking up the website colors from LGBTQ community flags.

Design systems
螢幕快照 2020-02-23 上午1.38.29.png
螢幕快照 2020-02-23 上午1.38.42.png
Wireframes

Homepage (Ver. 01)

GELC_Akira#1.png

Homepage (Ver. 02)

Basic Desktopnew.png

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)

螢幕快照 2020-02-23 上午2.07.22.png

-> 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

gender_law_homepage.png
screencapture-akiraxcc-wixsite-website-1

Homepage (Before)

X: Phone number under the header did not stand out

-> should make the phone number the top priority