landing page image for ArBex.png

ArBex is a nonprofit organization that provides mentorship and outreach to underrepresented scholars in physics academia.

Tasks

UI Design

Timeline

July 2021 (3 weeks)

Team

Eileen Yan (UI Designer)
Florien Boine (Logo Designer)
Kim Pham (Software Engineer)

Context

Freelance

  • Background

    ArBex’s ultimate goal is to reduce the biases that may undermine efforts to increase equity, diversity, and inclusion in academia. The organization seeks to achieve this via an online portal that can provide a space for individuals to connect with each other and present their work. My task was to create the UI to organize the flow of content and keep a consistent design throughout the website.

  • Deliverables

    The final deliverables of this project included eight webpage screens designed in Figma.

EXPLORATION

Who are the target users?

I created a proto-persona to quickly understand the motivations and frustrations of potential ArBex users. This persona helped me brainstorm designs from a user's point of view. Next, a brief comparative analysis of several nonprofit websites gave me further insight regarding how to arrange the hierarchy of ArBex's website.

Organizing the Information Architecture

With the proto-persona, comparative analysis, and ArBex's request for proposal (RFP) in mind, I began to organize the website's information architecture.

arbex ia.png

IDEATION

After I determined the overall structure of the website, I created medium fidelity wireframes to further visualize the content organization within each page.

  • Our Team Midfi Wireframe

  • Scholar List Midfi Wireframe

  • Scholar Profile Midfi Wireframe

Final Design

Using the colors in the organization's logo as a reference, I chose colors that aligned with the themes of professionalism, scholastic drive, and inclusivity mentioned in ArBex's mission statement. While finalizing these designs, I also accounted for accessibility. All colored text passes the WCAG AA contrast ratio, forms include both labels and placeholder text, and a breadcrumb navigation is used on the scholar profile page.

 
Style Guide.png
  • Homepage Final Design

  • Our Team Final Design

  • Scholar Search Final Design

  • Scholar List Final Design

  • Scholar Profile Bio Final Design

  • Scholar Profile Mentorship and Outreach Final Design

  • Become a Scholar Final Design

  • Become an Ally Final Design

TESTIMONIAL

"Eileen went above and beyond to deliver a beautiful and functional product. She listened to our needs, was responsive when we had questions, and thanks to her creativity and leadership, her output was even better than what we had envisioned."

— Claire Boine, Co-President, ArBex