Timeline:

March 2023- September 2024

My Role:

Lead UX Designer

Team:

1 Designer, 2 Software Developers, 1 Database Administrator, 1 Product Manager

Tools:

Figma, Bootstrap, HTML/CSS, .NET, Microsoft Azure

Skills:

Interaction Design, Visual Design, Design Systems

PROJECT OVERVIEW

I joined AI for Girls Enterprise Foundation in May 2024 to redesign their website with a fresh, modern concept. The foundation is dedicated to empowering the next generation of women by educating them on how to leverage artificial intelligence and technology in their careers and higher education. Through a combination of educational workshops at schools and fundraising efforts for tuition assistance, AI for Girls plays a crucial role in shaping young women’s futures in tech.

My passion for technology began in middle school when I attended weekend workshops at Black Girls Code. Learning about programming, robotics, and website design inspired me to pursue a career in technology, and I was excited to give back to the next generation through my work at AI for Girls. With this project, I aimed to create a website that better reflected the organization’s mission and made it easier for users to access resources, learn about workshops, and contribute to the foundation’s efforts.
‍

BACKGROUND

AI for Girls Enterprise is looking to expand its reach and raise awareness about its mission to empower young women through education in technology. However, the organization feels that their current website does not effectively communicate their values or showcase the impactful services they offer. To attract more participants and supporters, they need a website that accurately reflects their mission and better engages their target audience.

WHAT'S the problem?

The current AI for Girls Enterprise website fails to effectively communicate the organization’s mission and services.

The organization is limiting its ability to attract new participants and supporters. The lack of clear messaging and engaging design prevents the organization from reaching a wider audience and promoting its educational workshops and fundraising efforts. A redesign is necessary to better align the website with the organization’s goals and improve user engagement.

The goal is to craft a design solution that creates a clear, compelling narrative around the organization's educational programs and fundraising efforts while providing an intuitive user experience that encourages visitors to learn more and get involved.

key user challenges

Lack of context

Users visiting the site may not immediately understand the purpose of AI for Girls or the value it provides through its educational workshops and tuition assistance programs.

Lack of white space

The design is cluttered, with limited use of white space to separate elements and provide breathing room for content. Sections of the website appear cramped, making it hard for users to focus on key information.

Low color contrast decreases accessibility

The website suffers from low color contrast between text and background elements, making it difficult to read content, particularly for users with visual impairments. Important information, like call-to-action buttons or key headings, blends into the background, reducing visibility and effectiveness.

What ARE THE design limitations TO CONSIDER IN THIS PROJECT?

* Content Management System (CMS) Restrictions

While working with Wix, certain design choices had to be readjusted to work within the constraints of Wix.

* Limited Content Due to New and Upcoming Organization

The design needs to be flexible and scalable, allowing the website to look complete and professional while accommodating future content as the organization grows. I also need to creatively structure the site to ensure it doesn’t appear sparse or incomplete.

defining User goals

The students need...

to easily find and sign up for workshops and access educational resources. As well as to contact the organization for opportunities to join the team or host a workshop at their school.

The donors need...

clear and compelling calls to action to donate, as well as transparent information about how their donations will be used.

The parents need...

easy access to workshop information and contact details to ensure their children can participate in the workshops.

WHAT CONTRIBUTED TO THE SUCCESS OF THIS DESIGN?

Adding More Media

The addition of images helps to set the identity of the brand so that the user can understand what the brand does.

Linking Social Media Sites

By adding the social media links of the organization to the footer, users can easily access more content from AI for Girls.

Logically Separating Elements

In order to organize the workshops by education level, the workshops were separated based on that quality.

Adding Upcoming Events to the Home Screen

By highlighting upcoming events on the home screen, users can easily locate these when they load the site without having to go to the Workshops page.

--> Enhanced Accessibility

By addressing color contrast and usability issues, the website became more accessible to all users, including those with visual impairments.

--> Higher Conversion Rates

Improved user engagement by 25% and increased new visitors by 43%.

--> Clear Communication of Mission

More clarity led to a stronger connection with visitors, fostering trust and credibility, particularly with potential donors and supporters.

--> Flexible Design for Future Growth

The flexible design allowed AI for Girls Enterprise to easily scale the website as more content and features are added in the future, avoiding the need for a major redesign down the road.

if i could go back in time, this is what i would've done differently

1. Optimize for SEO from the Start

Why?

I would have integrated basic SEO best practices during the design phase, including optimizing content for search engines, ensuring mobile-friendliness, and improving site speed.

2. Focus More on Accessibility Testing