BRAID Africa Redesign
Volunteer project for a non-profit organization.
PRIMARY ROLES:
30% UX Consulting
40% UI Design
100% Web Development
About BRAID Africa
BRAID Africa is a U.S. based, non-profit organization that responds to the needs of individuals and communities traumatized by war. In the past, their work focused primarily on Liberia’s refugee population, but they are currently building international partnerships. In this project, I worked mainly with the CEO & Founder of BRAID Africa and a Graphic Designer to redesign the BRAID Africa website. Although my primary role was Web Development, I also provided UX consultation with best-practice methods.
Case Summary
Product Goals
Our initial focus was to improve the overall user experience to gain new partnerships and increase donor activity.
User Problem
The problem with the previous design was that much of the content needed to be updated, and navigation to the donation page was difficult to find.
Outcomes
The redesigned website helped increase interest in new partners and enabled users to navigate easily to the donation page.
Process Highlights
Project plan and overview
Project Team
The team consisted of the CEO, Graphic Designer, Content Strategist, and Web Developer with UX Design consultation.
Role & Responsibility
My role was primarily to execute the development of the website while providing UX guidance with best-practice methods.
Methodology
Utilizing elements of Design Thinking, I worked with the team to help guide design decisions. We also worked with a Content Strategist to provide much of the content and restructure while the graphic designer delivered the visual designs.
Project Plan
The project lasted about six months, working in phases to implement higher priority items for the first launch.
Discovery and Ideation
We were a small team with limited time and resources to conduct a comprehensive research, so we used existing user data and feedback to help with initial decisions.
Understanding the Project
Our first meeting involved understanding the project. We conducted a full audit of the website and documented a list of essential task items requiring attention.
- Organize the website for improved usability
- Update outdated content
- Refresh visual aesthetics
- Decide which platform to use
- Improve donor page experience
- Improve page flow and architecture
- Reduce monthly platform cost
Team Workflow and Process
Since the team was just getting accustomed to updating a website, I created and recommended keeping with a process to ensure a smooth workflow for deliverables. The process helped us understand each other’s roles and expectations for completing this project.
Research
Since my primary role was to develop the website, much of my research investigated which platform was best suited for the job. The platform needed to be user-friendly with rapid onboarding for team members to perform simple tasks such as editing text without knowing any code.
Researching Other Platforms
Two essential factors in choosing which platform to integrate were ease of use and customization. The simplicity and consistency of the existing interface worked well with the current website management. With Square’s acquisition of Weebly, we
saw potential in utilizing the Square integration for the donation page since the organization was using the payment device for external transactions.
Weebly’s intuitive and consistent interface made it easy to customize code without relying on clunky error-prone plugins. The only drawback was that it didn’t provide version control. But using tools like GitHub enabled options to save my code into a safe repository as a workaround.
Weebly’s predictable, consistent, and user-friendly interface was the more reliable platform for customizing components, yet easy enough for simple edits.
Wix’s user-friendly interface was similar to Weebly but clunky and automated, which would have interfered with simple editing tasks.
Although WordPress would be the platform of choice with the advantage of site versioning, its confusing interface and complexity were not ideal for the team to perform simple editing tasks.
Platform Analysis Review and Results
A careful review of these platforms concluded that using the existing Weebly platform was the best approach for the initial launch. This decision was due mainly to time constraints of transferring sensitive donor information requiring further investigation and research.
Identifying User Pain Points
Our study of similar donor websites, along with existing data and user feedback, uncovered many pain points from which we developed a list of tasks for the project. One of the apparent user pain points was that users had difficulty navigating to the donation page. In this journey sketch example, a user is encouraged to visit the website to donate. Once the user visits the website, they struggle to locate the donation page and end up exiting the site.
Conducting a Study of Common User Patterns
We used common user patterns to validate some of our design decisions to improve the experience. For example, the location of the donate button in the previous design was hidden below the fold of the landing page, making it difficult for users to find. From our analysis of similar donor sites, we observed a typical pattern where the donation button is located in the upper right-hand corner. This location appeared to be the most accessible location where users would typically find a donation button.
Idea Prioritization
After gathering all information, user data, and collaborating ideas with the team, we were able to begin designing. While the Graphic Designer and Content Strategist worked on restructuring the site architecture and finalizing the designs, I worked on updating the website styles and preparing the page framework. For our first phase launch, we focused on higher priority tasks and pages to address critical user needs.
Samples of Previous Design
Home
Donation
Get Involved
Prioritizing a List of Tasks
After analyzing other Non-Profit websites and gathering our notes and data, we identified essential tasks we wanted for the first phase. The content strategist worked with the designer to audit the existing content, working in iterations until we could arrive at a final design.
In our first meeting, we identified areas that needed to be updated and were not useful due to low user engagement from existing data or team feedback. After careful review, the team decided which items would go into the new design’s first launch by prioritizing each task item from least to most important.
Prototypes
Using the InVision App, we communicated changes, approvals, and final deliverables. In this User Flow, we improved the navigation menu to include the “Donate” button so users could easily access the donation page.
Previous User Flow
Improved User-Flow
From our study of various charity websites, we concluded that the donate button would best serve the user in an area where typical patterns have shown to be the most effective.
Hi-Fi Mockups
As part of our workflow process, I helped the team use the InVision App to collaborate on changes and feedback. We used the app to finalize and approve the designs before releasing them for development. It was the first time they used the tool, and the process worked seamlessly.
Development and Testing
Utilizing Existing Templates
Before updating any pages, I worked with the designer to define the new styles. I recommended using an existing template to save time and reduce errors caused by having to custom create a new template.
Implementing the Styles
Once the final designs were created and approved, I was able to implement the styles into the user interface by adjusting the template code. Any future style adjustments were kept to a minimum, ensuring that development would go smoothly.
Method for Testing Live Pages
To test if the styles worked, I needed to create a method for publishing updated pages without making them available to the general public. To update a page, I would duplicate it and then add a unique name-value to the end of the updated pages. I would then share the newly updated page with the team. Although I published the new pages publicly, users would need to know the unique name-value to view them. Once the new page was approved, I would simply replace the old page with the new one by simply changing the name-value. Changing the name-value did not affect how the pages were being directed. This was the simplicity I found very useful with the Weebly platform.
Outcomes and Results
We completed the project with two separate phased launches. Our next task is to improve the donation page experience, among other vital features like responsiveness across various device platforms. Overall, the team met our project goals, the user engagement experience improved, and BRAID Africa acquired a new partner.
Visibility and Insights
Although further tests are necessary to validate the redesign’s effectiveness, the improved experience enables the organization to generate interest from social platforms and other partnership sources. Additionally, we have a better outlook on the website’s performance with more reliable Weebly tools which utilize a front-end tracking method similar to Google Analytics to gain more valuable insights.
Sample user engagement chart displaying Unique Visits and Page Views.