UX Design and Development with 48in48 for a nonprofit
The Rebirth Empowerment website's design was outdated, navigation was unclear and did not represent the vision of the non-profit, making it hard for people to decide if the programs were right for them and find the information they were looking for.
Redesign the website so that the menu was more straight-forward, had more up to date information and represented the new vision of the company.
UX Designer/Website Builder
1 Product Manager
1 UX Designer
1 UX Writer
1 Website Builder
48 hours
Beaver Builder
Figma
Google Drive
Trello
Word Press
Before we started the official 48 hours of re-building this website, the team received documentation that gave us an overall view of what the company's mission. The main purpose of the website was to help people in a lower-income bracket get help with advancing their careers. If you would like to take a look at the full document,click here.
After receiving this documentation, we scheduled a call with the owner to discuss other important information prior to the re-design of the website. From this call, we learned:
In order to better understand the target audience, a persona was created based on the information the client provided.
Diane is a single mom with a very busy schedule. She has to pick her kids up at 3:30 every day from school, which has caused her to lose her last job. She has been frantically looking for a new job, without any luck.
We began to review the original site to see what the structure of the website was like currently. A site map was created in order to better understand what the layout was like, so that it could be improved upon.
After discussing with the team, we decided what the best layout would be for the new site. We found the following:
The goal of the first night was to have a home page created. In order to decide what information should stay on the homepage, and what information should be edited, we went back to our persona, Diane. We thought about what information she would be interested in seeing, as well as what information would be important for the business.
Easy to apply to programs
Overview of the services provided
Easy to find the information she is looking for
Needs to be easy to donate to the non-profit
Website needs to be organized, so people will apply
Content needs to be clear
After the creation of the homepage, we had another call scheduled with the owner. This way we would know if we were going in the right direction, prior to building the remainder of the pages of the site. The main items of note from this call were as follows:
When originally picking imagery for the site, we had forgotten to take Diane into consideration. We made the mistake of relying too heavily on the type of imagery that the site was originally using, which was primarily focused on the construction program. It was also noted that diversity was also very important to this organization.
The copy was originally too wordy and not engaging to the customers.
You can't build a city alone. To have an empowered city, we must start by coming together.
Empowerment begins with education.We are proud to be a Dallas-based nonprofit dedicated to making sure every neighbor is empowered through technical education, hands-on job training and appreciation for their unique capabilities that make them an invaluable part of our whole community.
"Empowerment Starts Here: Transforming Lives Through Education"
ReBirth Empowerment Education: Restoring Lives and Rebuilding Communities
The main colors of the site were inspired by the logo of the company, which was yellow, white and black. The color was used consistenly throughout the site, so that it was very clear when the customers could click on a button. Yellow was a somewhat difficult color to work with. We had to continuously check to see that it was meeting the accessibility guidelines.
For the text choice, we again thought about Diane. The most important thing to Diane was to easily find out the details of how the programs work and apply to one. The site should also represent the everyday person, When the person enters the site, they should feel comfortable and have an easy time reading the content. Because of this Montserrat was chosen for the text style, for its ease of readability.
To ensure that the site was meeting all accessibility guidelines, the site was reviewed by a quality assurance team. If you would like to see the entire spreadsheet with the comments from the test, please click here.
After all of the corrections were made, we had one last meeting with the owner to check to see if everything was looking good on her end. Then it was finally time to publish!