2019, Interactive designer @Upperquad
Role: art direction, user experience, visual design
Cross-functional collaborations: Lead & Senior developpers, producers & strategists, creative and art directors, management team from client's side.

Chan Zuckerberg Initiative Website

Visit website´╗┐

CZI_1 visu

Project Goal

Chan Zuckerberg Initiative

Create a bold and dynamic website that differentiates CZI as a philanthropy at the intersection of social change and technology to amplify their ambitious vision and support it with tangible, meaningful stories.

  • Our longer term goals were:
    1. Articulate a cohesive and inspiring brand story.
    2. Attract talented, passionate employees from a wide range of backgrounds and fields.
    3. Represent and celebrate the diversity of CZI employees and the communities they serve.

CZI_1_medley

Research phase kick-off

Research phase kick-off

Understanding The Audience

Understanding The Context And The Current Situation

We have conducted on site interviews with people representing each initiative of the company. The objective was first to get to know better the specific audience each department were adressing their message to. Also, we have been able to gather feedbacks regarding the strengths and challenges encountered by the current CZI website in general.

EARLY INSIGHTS:

  • Navigation is limiting
  • We need distance and distinction from Facebook
  • No hub for press resources
  • No financial transparency
  • Limited photography and video assets
  • Specificity is lacking
CZI2

Revelead key audiences.

Digging into the subject

Industry Benchmark

We gathered an essential list of tech companies and philanthropies so we could assess the main opportunities and recommendations regarding our main objectives.

  • Tech Key Takeaways:
    1. Feature a diverse group of people.
    2. Balance levity and gravity carefully.
    3. Highlight values prominently.
    4. Create a dedicated space for diversity.
    5. Humanize the organization with photography of people and spaces.
    6. Make jobs accessible and navigable.

  • Philanthropy Key Takeaways:
    1. Show the people that CZI works with.
    2. Tell vivid stories to humanize efforts.

    3. Be financially transparent.
    4. Use video where possible.
    5. Emphasize News and Stories. 
    6. Distinguish CZI by developing a bold, distinct brand POV.
CZI_1 Copy 3

Ideation phase

Information Architecture And Wireframes

Understanding The Context And The Current Situation

After we detailed our strategic recommendations and opportunities to the team, we came up with an agreed direction in which we could implement our initial ideas. We focused on detailing how we could structure the new platform before sketching low-fi and hi-fi wireframes.

CZI_wf

Visual research and design

Inspiration Moodboard

As we wanted to focus the platform around the stories told by CZI employees and the community they interact with, I focused my visual inspiration research around clearly articulated interfaces such as magazines, newspapers, layouts with harmonious typography and grid.. I set my research around both digital and physical support.

My objective was to figure out what I could do to get the best of both worlds. I was looking to put forward the imagery and content of our photos but also to distinctly display our written content.

insp_czi-min

Visual Design Exploration

Initial Exploration

I explored various design layouts in order to propose different mechanism to the team.
I mainly wanted every blocks to have its own space and design. We would have repeated patterns overall the home page but this would help in bringing dynamism when scrolling through the page.

I explored various design layouts in order to propose different mechanism to the team.
I mainly wanted every blocks to have its own space and design. We would have repeated patterns overall the home page but this would help in bringing dynamism when scrolling through the page.

czi_new_1
czi_new_2

Design phase

Final designs

Both the team and client agreed on basing the final designs on some of my previous explorations. One of the interesting thing we decided to adopt was to keep 'lines' connected throughout the pages. Lines represent the existing connection between the people and community working together at CZI. We made sure to integrate this concept into everything we did, as well as the illustrations.

czi_medley_final