Case Study: Designed and Built a Website for an Empowering Women Community

Posted
Tags
Case Study
Share
A laptop screen showing a website with the text

Creating a website for a women’s empowerment community was an exciting opportunity to apply thoughtful design and development practices. I created a visually appealing yet practical platform that aligns with the brand’s values of kindness and inclusivity. While the project didn’t go live, the process was a valuable learning experience that I am proud to share šŸ™Œ

You can see the whole homepage prototype in Figma!

Design Process

Brand Colours and Visual Choices

Working with the client’s brand colours, I created two design versions for them to choose from:

  1. A clean white background with bordered text boxes for simplicity and readability.

  2. A light yellow background, which offered a friendly and kind vibe that better reflected the brand’s image.

A website with the headline "Empowering Women, Transforming Communities." and white background. Below the text there are 2 buttons labeled "Explore Programmes" and "Donate Now." Images of women engaged in various activities are visible at the bottom of the website display.
A website with the headline "Empowering Women, Transforming Communities." and light yellow background. Below the text there are 2 buttons labeled "Explore Programmes" and "Donate Now." Images of women engaged in various activities are visible at the bottom of the website display.

The client ultimately chose the light yellow version. While it required more thoughtful adjustments for contrast and usability, I think it was a better fit for their brand.

Call-to-Action Section

The first call-to-action section, ā€œHope to Action,ā€ had a design challenge. The initial white text box on the light yellow background didn’t stand out enough 🄲

To address this:

  • I changed the background to the brand’s primary blue colour to enhance visibility.
  • I experimented with button colours and found that the secondary yellow clashed with the blue, creating an unfriendly atmosphere. Introducing an accent orange brought warmth and consistency to the website’s overall tone.
Headline overlay stating "Uplift Horizons began with a simple belief:" with a "Learn more about us" button on the blue background. There is an image of a girl closing her eyes in black and white.

Footer Alignment

Initially, the logo was placed on the left of the footer. However, the sunrise logo’s symmetry worked better when centred. This adjustment required rethinking the layout:

  • Aligning the elements beneath the logo was tricky. Three equal-width rows appeared misaligned with the centred logo.
  • I redesigned the footer with a 1/2 width layout for the lower sections, creating a harmonious and balanced appearance.
Newsletter signup page for Uplift Horizons with an email input field and subscribe button, set against a dark green background with website navigation menu on the left side.

Cards Section

The cards section needed to be clean, friendly, and bold. I selected icons that embodied these traits and experimented with colour palettes:

  • The light yellow background initially made colour choices tricky. After testing all palette options, I chose yellow for consistency.
  • Adding a stroke around each card helped group the icon, title, and text. Grey strokes looked dull, so I opted for the brand’s text colour, close to black, to maintain elegance and contrast.
Three course or workshop descriptions for Digital Literacy, Entrepreneurship 101, and Artisanal Crafts, each with a simple icon representing the course type: a computer screen, a growth chart, and craft tools.

Development Process

Building websites

This was my second project building a website after a 5-year gap. My partner, experienced with development, supported me during the development phase, which helped me overcome challenges šŸ™

Design Adjustments During Development

While implementing the design, I noticed that the black text on the light yellow background felt too harsh and didn’t align with the brand’s values. I revisited Figma and adjusted the text colour to a mixture of black and the brand’s primary blue. This maintained sufficient colour contrast while introducing a friendlier tone.

Reflection

Although this project didn’t reach the launch stage, I gained invaluable experience in creating accessible, user-friendly, and visually appealing designs.
The lessons learned, especially in balancing brand values with usability and aesthetics, have been helping me in other projects 😊

I’m excited to continue building websites that empower communities and create meaningful online experiences! 🫶

Related articles

On the left, there is a word that says Before and a mobile screen of the old version of the Seedlang registration process. On the right, there is a word that says After and a mobile screen of Yoshie's redesign of the Seedlang registration process.

Case Study: Redesigning Seedlang App for Accessibility and User-Friendliness

As a UI/UX designer passionate about creating inclusive and intuitive experiences, I collaborated with Seedlang, a German learning app, to improve their registration process and home screen. This project was an opportunity to merge accessibility best practices with user-centred enhancements, which resulted in a design that supports all learners (including myself as a power user of Seedlang 😚) in …

A laptop and smartphone display a website or digital platform with a retro 70s-style graphic featuring people in vintage clothing against an orange background. The laptop screen shows a colorful title and group of individuals, while the smartphone displays an additional panel with text and another group photo.

Finding Balance Between Fun, Joy, and Seriousness

Designing the Sanat Ensemble website was both a rewarding and challenging experience. The task was to capture the vibrant energy of the 70s whilst honouring Turkish people and other communities who fought for equal rights. I also wanted the design to reflect the joy and lively spirit of their music and performances. Here’s a breakdown of the key struggles I encountered and how I overcame them! 1. …

Gradient background with shades of blue, progressively getting darker from left to right. The word

Make Your Website Easy to Read for Everyone (Why Colour Contrast Matters)

Have you ever used white text on a pastel background because it looked cute? You’re not alone—I’ve done it too 🄹 By the end of this blog, you’ll understand why that is a bad idea and how to maintain a beautiful, on-brand design without compromising accessibility. Why Low Contrast is a Problem For people with low vision or colour blindness, low-contrast text can be nearly impossible to read. The …