A Bridge for Girls:
A User Centered Website Redesign
A Bridge for Girls is a charitable organization based in Kigali Rwanda that supports young women desiring education, vocational training, mentoring and job opportunities. The various vocational trainings include tailoring, handcraft design, computer literacy, financial education on running a successful business, budgeting and achieving financial goals.
Homepage and What You Can Do page prototypes. Design built in Figma.
The project took place over an 8 week period and consisted of working collaboratively with a writer, photographer and the organization's founder. I was responsible for the user research, interaction design, usability testing and visual design on the project.
The requirements given to me by the founder were to conduct a full redesign of the Bridge for Girls' website while including the the following two main goals in our design.
-
Create an experience for the user that captures the strength and power of the women in the program.
-
Create a design where user needs should inform all aspects of the design from the site's content to its architecture and functionality, while at the same time considering the needs of the various stakeholders.
Problem Statement
I created the following problem statement in response to the design goals outlined by the Bridge of Girls founder and team.
​
-
How might we create an experience that ultimately empowers the women in the program and tells their story in a compelling manner, while at the same time considers the needs of the user in all aspects of the design.
Project Timeline
Design Goals
User Research
There were two main goals I wanted to accomplish with the user research for this project.
Research Goal 1: Analyze the competitive landscape.
Method Used: Competitor Analysis
Research Goal 2: Analyze the customer/user.
Methods Used: Interviews, Survey
Competitor Analysis:
Process: I conducted 10 one-on-one moderated in-person sessions. Each participant analyzed two competitor sites. 20 sites were evaluated.
​
Purpose: The purpose of this round of testing was to learn how users were interacting with the nonprofit sites they frequented. I wanted to get a better sense for what people used these sites for. I also wanted to find some examples of organizations that were utilizing powerful storytelling and using this storytelling to empower the individuals they were supporting. In order to get at these questions I conducted one-on-one sessions with users. I had them walk me through a nonprofit site they were familiar with, had used in the past, and felt was a strong example. I then had them do the same with one that had caused them frustrations or that they disliked for some reason.
Research Method #2 Interviews
Interviews:
Process: I conducted 15 in-person, one-on-one interviews over a three week period.
​
Purpose: The primary purpose of my interviews was to learn more about customer's philosophy, needs and motivations around their charitable giving behavior. I wanted to learn more about what factors were significant for people in deciding which organizations to support.
Research Method #1 Competitor Analysis
Interview Questions:
​
-
Question 1: "Could you describe your personal philosophy that guides who you choose to donate money to?"(In follow-up questions clarify: What are your main motivations for why you donate? What are the factors you consider when selecting a particular charity to donate to?)
​
-
Question 2: "Could you walk me through the last time you donated to a charity?" (In follow-up questions clarify: What was the charity? Why did you donate to that specific charity? How important is it to you to feel that you are supporting a specific individual vs an organization? Did you use a website to conduct that transaction? If yes could you describe how that went?)
​
​
​
Summary of Interview Findings/Quotes
​
"I battled breast cancer so now I donate to Seattle Cancer Care Alliance"
​
"I really like it when charities have an Adopt a Child function on their site. I feel like my money has a very personal impact."
​
"We've been given so many gifts in our life. I feel like I have a responsibility to give back in some way."
​
Survey:
Process: 10 individuals participated in a 20 question online survey using Qualtrics as the tool for administering the survey and analyzing the data.
​
Purpose: The survey was primarily focused on website functionality. I wanted to get a better sense for what people want out of a charitable organization's website.
Research Method #3 Survey
​Survey Questions:
​
-
What functionality do you look for in a nonprofit website?
-
How does a charity's website instill trust in you as a donor?
-
What can a nonprofit website do to create a more personal connection with you?
-
Is it important that financial information be reported on a the website and if so how do you prefer to see it depicted?
-
Is it important for you to feel like you are making a personal connection to the specific individuals the organization is providing assistance to?
-
Is financial transparency important?
-
Do you want to know the salaries of the various people employed by the organization?
-
How important is corporate matching your decision to donate?
-
Are tax write-offs a significant factor for you?
-
How important are organizations like Charity Navigator, that do third party vetting?
​
​Summary of Survey Findings:
​
Theme 1: Websites need to communicate financial transparency. This can be accomplished by having infographics displaying how money is being used and employee salaries being listed.
​
Theme 2: Trust is the number one reason people select one organization over another. Websites help instill trust by: 1. Offering photographic evidence of the work they're doing. 2. Providing links to third party vetting organizations. 3. Profiling various recipients and providing details about their lives. 4. Giving clear details about the organization's programs. 5. Providing financial transparency.
​
Theme 3: Incentives such as tax deductions and corporate matching help motivate people to donate. A good website should account for their needs, address them and provide donors with methods for printing out tax receipts.
​
Theme 4: When looking at a charitable organization's website for the first time, users are most interested in: 1. Finding a clear explanation of an organization's impact and work backed up with statistics. 2. Seeing each of the organization's programs or initiatives laid out in detail.
​
Theme 5: Making a personal connection is important. One way a website can capitalize on this is to include an "Adopt a Child" function and a way to correspond with their beneficiary. This helps donors feel that their resources are going to a specific individual.
​
.jpg)
.jpg)
Similarity Matrix
Product Design Phase
This graphic is called a Similarity Matrix. The cards I created are on the right and each cell shows the percentage of people who grouped the two cards together. For example 100% of the people grouped the cards "Videos of the Girls Working in the Studio" with the card, "A Video of the Aid Workers Teaching the Girls." Participants identified five main groupings which I've circled in red above.
Concept Modeling:
The purpose of this concept model was to start to put some structure around the various elements that emerged from my affinity mapping session. This helped me get a more accurate sense for what the main elements might be and what the new structure of the site might look like.
​Site Map:
-
The results of the user research helped clarify what functionality users wanted from a site.
-
The concept model helped define what this functionality would look like in terms of more concrete site elements.
-
The card sort allowed users the opportunity to give feedback on how the elements should be grouped, which then informed the design of the site map.
Below is an initial site map for the Bridge for Girls website.
Summary of Research Findings
​
Using the Miro white-boarding tool, I conducted an affinity mapping session. The purpose was to bring all the usability testing data together so that it might inform which site elements and components to include in the new design. I emerged from the affinity mapping session with a clear sense for what elements needed to be included in the site moving forward.
Card Sort:
10 users participated in an unmoderated, online, card sort using Optimal Workshop as the tool for conducting the sort. After I determining what the main elements of the site should be, I wanted to get feedback from users on how they felt these elements should be grouped. Card sorting is a powerful method for answering this question. A site element was written on each card and participants were asked to place them into the groups that they felt were the most logical. The Similarity Matrix you see below is one method Optimal Workshop provides for analyzing the data. Participants in the card sort provided valuable feedback around how to organize the various elements in the site and gave me a clear direction on how to construct the site map you see below.
The screen above depicts some basic wireframing of the homepage. The goal with this page was to storytelling through powerful imagery. Based on user feedback, the priority on this page was: 1. A strong hero image. 2. A clear mission statement. 3. Each of the programs clearly laid out with headings, descriptions and CTA's. 4. Additionally I wanted to include third party authentication links in the footer. 5. A clear donation CTA in the header as well as simple and explicit primary nav categories.
​
You can view this page with the visual design added below.
This is the donation page. It encompasses all the various ways people can support the organization. The goal with this page was to address user feedback indicating that people want to feel a personal connection to a specific individual. I tired to achieve this through the use of strong photography and storytelling.
​
You can view this page with the visual design added below.
This is the product page. Once someone has clicked on Purchase Items Made by the Women on the Donation page above, they are sent to this page. This is essentially an e-commerce page where customers can view a small selection of handcrafted items made by the women that are available for purchase.
This is the final page in the purchase flow. The purpose of this page is to: 1. Thank people for their support. 2. Encourage them to sign up for the organization's newsletter. 3. Have a tax receipt emailed or made available to print.
Once I'd built a site map I moved into wire framing and then prototyping. I used Figma as my tool for both the low fidelity wireframe as well as the higher resolution prototype. The following mobile and laptop wireframes outline the path one might take if they wanted to purchase a handbag made by a women in the program starting from the homepage.
Laptop/Mobile Wireframing and Prototyping
Laptop Wireframing
Laptop Prototyping
After creating the wireframes I built these high fidelity prototypes. The pages above are the Homepage and the Donation page. The focus was on clean, uncluttered design with an emphasis on storytelling through powerful imagery.
What you see above is the mobile version of the item purchase flow depicted in the laptop wireframes. All of the same functionality exists in both the mobile and laptop forms. The primary difference is the use of a hamburger button for the primary
navigation in the mobile form.
After clicking on an item, the user would be sent to a Product Details page where they would be given item specifications and purchasing information. The item could be added to a cart for final purchase. After the transaction they
would be sent to this page to get a tax receipt and thanked for their support.
What you see above is the mobile wireframing of the Homepage and Donation page with the visual design added. Continued refinement is needed along with collaboration with the founder around the specific functionality for the final design.
The final iteration of the Bridge for Girls site represents a "perfect world" scenario. User needs and desires need to be balanced with stakeholder realities when designing a site. There are a number of elements in the site that have real world implications that may be too labor-intensive to maintain given the constraints of the organization.
​
Some examples of this are the e-commerce component, the coordination of volunteers
at events, sponsoring individual women, or giving users the ability to write letters to the women they've sponsored. All of these elements will be discussed and finalized with the founder and charity volunteers.
Further Refinement and Implementation
Mobile Wireframing
Mobile Prototyping
