top of page

Redesigning
a Nonprofit Website

Frame 2.png

My Role

UX/UI Designer

UX Researcher

Tools

Figma

Paper & Pencil

Miro

Skills

Wireframing
User Researches
Visual Design
Responsive Design

Duration

6 weeks

Understand

The Problem

The current group members as well as the new comers could not get information about the classes and the organization itself through their mobile devices since the existing website was not responsive. Additionally, it was difficult for admins to update the site information, add / cancel classes, upload photos to gallery and add events.

The Solution

I re-designed the current FICA Oakland website to provide Capoeiristas with more consistent, updated information about classes, the organization, members and donation. The purpose was to help increase awareness about this art form and also make it easier for organization to fundraise.

Background

What is FICA Oakland?

Fundação Internacional de Capoeira Angola (FICA) or The International Capoeira Angola Foundation (ICAF) is a non-profit international organization dedicated to the practice, preservation and growth of Capoeira Angola.

What is Capoeira?

Capoeira is a Brazilian martial art that combines elements of dance, acrobatics, and music. It was practiced by enslaved Africans in Brazil at the beginning of the 16th century. It is known for its acrobatic and complex maneuvers, often involving hands on the ground and inverted kicks.

How did I end up redesigning this website?

My partner has been doing Capoeira for the last decade and FICA Oakland has been his final destination on his journey. The organization already had a website but had some usability and navigation issues especially in mobile view.
I volunteered for redesigning the experience users have when they interact with the website.

Observe

1. Interview with Current FICA Oakland Members

I spoke with 3 FICA Oakland group members and I discovered 3 main key findings.

Key Insights:

  1. Would like to reach out to up to date information about the classes, events.

  2. For the new comers, they would like the website to be more informative and to the point.

  3. Because they are a non-profit organization, the donation button needs to be visible.

2. Interview with Potential New Members

I conducted a total of 3 user interviews who are not familiar with this group but might be interested in joining a group to do Capoeira.

I asked them for completing 2 tasks:

  1. Imagine that you’re looking for a place to do Capoeira. So you find FICA Oakland, go to their website. How would you find the class information? Can you speak out loud which day/time are the classes you find in this website?

  2. Imagine you’d like to make a donation. Where would you find that information or how would you make it?

Key Insights:

  1. They wouldn’t make sure if the time table and the price of the classes are updated on the web site because of their visuality.

  2. It took a while for them to find the donation button.

Ideate

1. Current Design Analysis

Based on the usability testings, user interviews and my analysis of the current website, I identified the biggest pain points.

Heuristic Evaluation:

  1. Hidden and unorganized features

  2. Poor navigation

  3. The content scattered all over the website

  4. Lack of 4 basic design principles (Contrast, Repetition, Alignment, Proximity)

  5. Inconsistent typography

2. Sitemap

After research, the next thing to be answered was what information will I add to the website and how I will redesign it. Research and analyzing the current sitemap played a huge role in helping with the IA, as it provided some clarity as to what information has to be provided and what layouts and patterns work for better conversions.

Current sitemap.png

Current Sitemap

Redesigned sitemap.png

Redesigned Sitemap

Visual Design

I started with basic wireframing on paper before jumping to visuals. After creating some lo-fi wireframes on pen and paper, I jumped straight to visual design. I created a new color palette based on the colors of the organization's logo.

 

Overall design was created by taking into consideration the contrast, alignment, proximity and consistent typography, which were lack on the existing website.

Current Website Page Examples

Screen Shot 2021-12-27 at 3.42.54 PM.png

Home Page

Screen Shot 2021-12-27 at 7.23.54 PM.png

Class Information Page

Screen Shot 2021-12-27 at 3.58.12 PM.png

About Page

Screen Shot 2021-12-27 at 7.39.17 PM.png

Gallery  Page

Redesigned  Page Examples

ICAF OAKLAND4.png

Landing Page

MESTRES-fica oakland.png

Mestres - FICA Oakland Leaders Page

CLASSES.png

Classes  Page

Gallery.png
About Us - 2.png

About Us Page

MESTRES-fica international.png

Mestres - FICA International Leaders Page

EVENTS.png

Events Page*

*Facebook events page of the organization will be embedded here.

RENT SPACE.png

Rent Space Page

Gallery  Page

Outcomes

Next Steps

After some iterations on pages, the design handoff process has started. I involved the engineer during the whole process and now I can't wait to see the results!

What I Learned

This project was a monumental learning experience for me in so many ways. I personally learned a lot about the process, collaboration, and working for a real world design work. 

Thanks for reading!

bottom of page