Understand the project
Kick-off meeting with our client via zoom to discuss the project’s focus
Site map created by me was brought to team meeting to discuss our current understanding with the interface & content structure
Testing the website remotely
The usability study was performed using the moderated user testing method. Often considered the gold standard in usability testing, this method involves users as participants, and UX experts as moderators, working together in a controlled setting. The recruited users are representative of a target demographic and the UX expert is able to collect a large volume and quality data through the study.
Participants recruiting
We determined the ideal user profile for the study based on the project’s goals. Six participants were ultimately recruited for this study with the following profile.
100%
Lives in NYC Metro Area & Not familiar with Big Reuse website
5/6
Have made at least a $200 single - time donation to a non-profit organization
1:2
men vs women ratio
1:1
mobile device vs desktop
test planning
Testing scenario
You are interested in learning about a new non-profit before choosing where to make a donation. A friend suggested you visit Big Reuse website.
Testing tasks
- Homepage - Browse the homepage & share your thoughts about the design and content
- About us - Find out what Big Reuse does & how long they’ve been operating
- Our impact - Find out what impact the composting programs have had on the community
- Our program - Learn more about ‘Circular Economy’ & its principles
- Donate money - Find out more about what your donation might be used for & start the process of making a donation
- After reviewing the donation page, do you feel more or less compelled to donate? Why/why not?
- What might compel you to donate?
Post -test questions
- What did you find difficult when using the website?
- On a scale of 1-5 (5 is highest), how easy was it to understand the website?
- On a scale of 1-5 (5 is highest) would you recommend this site?
- Pick three words from Impression Adjectives list that you think are most descriptive of the site.
Post -task questions
- What did you think about the content on the page?
- What was easy to understand?
- Was anything difficult? Why?
- If you could change anything about the content, what would you change?
Remote user testings conducted via zoom
Before conducting the test with our recruited participants, I conducted 2 pilot tests to check our testing plan and make changes if needed. The pilot tests went well and we confirmed our final testing plan.
In the official tests, using a prepared testing script, I moderated 2 testing sessions via Zoom. The participant was asked to share their screen and “think aloud” while completing tasks on the website.
data Analyzing
After each testing session, I reviewed the recording, captured notes and logged them into a shared Google spreadsheet.
The findings were then aggregated, and affinity diagramming was the method implemented by the whole team to sort out findings.
By conducting analysis of the findings, and discussing further with other UX researchers, we identified the key usability problems on the website and formulated the recommendations.
Screenshot from our affinity diagramming exercise in Figma
Overall findings
Content comprehension
50%
of users found the website meaningful, approachable
67%
of users shared that visual demonstrations - statistics and images - helped them understand the website’s content better
3.9/5
Ease of understanding rating
Visual impressions
Users used similar language to describe their impression with the site
Overall, it’s a clean and modern website.
They put thought into making sure it appears correctly on a mobile screen. Visually it’s pretty appealing.
Website’s usability
Users shared positive feedback for the money donation flow.
I find it straightforward. The interface was clean and minimal.
Findings are mostly positive, but there are rooms for improvements
Recommendation
1
Clarify the meaning of “circular economy” and better embed resources
Recommendation
2
Optimize the donate page by making clear how donated money is being used
Recommendation
3
Improve the use of images by selecting photos that are relevant to the presented content, & avoiding showing text over photos
Recommendation
4
Improve the content readability by enhancing visual hierarchy for text & number-heavy content
Recommendation 1
Clarify the meaning of circular economy and better embed resources.
The concept of Circular Economy is foundational in understanding the mission and purpose of Big Reuse. However, on the current website, users struggled to locate the relevant information on Circular Economy and ultimately confused its definition with other pieces of content.
”The way they treat this info now seems like it's an afterthought.”
We recommend embedding key pieces of information from the ‘Resources’ page in other more commonly explored areas of the website. Our study showed that ‘Our Programs Overview’ is a strong candidate for placing the Circular Economy definition and resources because it matches user’s mental model to come here first to seek out this information. Placing key information in areas that match the users’ expectations should greatly improve their understanding of Big Reuse’s mission and efforts.
Current ‘Resources’ page houses information about ‘Circular Economy’ in the bottom module. Multiple users were unable to successfully navigate to this page during the study.
Optimized ‘Our Programs Overview’ page that prominently displays the definition of ‘Circular Economy’ and relevant resources to learn more.
Recommendation 2
Optimize the Donate page by making clear how donated money is being used
One of the key features of the Big Reuse website is the ability to make a monetary donation to support the organization’s efforts and further the mission of Big Reuse. During the test, users struggled to complete the task, “find out what your money donation might be used for.” Detailed information on how donated money would be used did not exist, causing users to question the value and meaning of a donation.
"I would assume it would go to Big Reuse, but I have no clue how they're gonna use it."
"It’s a little funny not knowing exactly what your money is going to. I want to see something like, “right now we’re focused on x or y.”
Through the study, we found that transparency compels users to donate. They want to know what their money will support with more detail than the high-level mission statement. Our recommendation is to provide examples of what Big Reuse could accomplish with certain donation amounts, which allows users to see how their donation will make a tangible impact, beyond the broad mission of the organization. Helping users to visualize and see the value of their donation would likely compel them to donate more and reduce drop-off rates due to absence of information.
Current ‘Donate Now’ page features general information about the Big Reuse mission but does not describe how donations may be used in detail.
The Optimized ‘Donate Now’ page improves transparency around donation purpose by featuring detailed information around how donations of various sizes may be used by Big Reuse.
Recommendation 3
Improve the use of images by avoiding showing text over photos, and selecting photos that are relevant to the presented content
During the test, three out of six participants (50%) shared the struggle of reading the content that are displayed over an image. An image background with a lot of details and uneven color caused low color contrast between the text color and the image, making it hard to read. Moreover, users stated that the image in the background created distraction because while they were reading, they were also trying to see the image in the back.
User quotes: “With a black overlay, you have to look hard to see the pictures in the background”
User quotes: “It's more difficult to read the text, even if the photo is dark enough to see the white text, and also you can't see the image clearly if it's a good image.”
Irrelevance between images and associated content causes confusions for users. Users commented that some images look general and contain little relevance to the linked content that they think the images were generated from stock photos websites. In addition, there are images on the website that send the wrong message to the audience.
Image above was associated with the ‘NYC Compost Project.’ However, the user got a wrong message from this photo, thinking that Big Reuse’ mission is related to animals.
User quotes: “The photo looks nothing relating to the text next to it, why is there a dog there? I first thought they were doing things with dogs, but they're really not.”
This image demonstrates an instance where users had trouble connecting the images with the text that they see.
Solution for images: Avoid displaying text over photos
This mockup shows an example of showing text and image together. The legibility of the text is higher by using a solid color for the background. In addition, by not putting an overlay, or text on top of the photo, it is much clearer for users to look at and enjoy it.
In this example, with picture and text clearly displayed, it is easier for users to read the title of the link to different programs run by Big Reuse.
Solution for images: Choose photos that are more focused, and relevant to the presented content.
This is a good example of both using and displaying an image on the website. First of all, there is a strong connection between the text and the image that makes them parts of a coherent message. Secondly, by not having the picture as the background, viewers can now see clearly the title, the button, and the pagination.
Recommendation 4
Improve the content readability by enhancing visual hierarchy for text and number-heavy content
In the test, participants were asked to find out what Big Reuse does, how long they’ve been operating, and find out what impact the composting programs have had on the community. While most of the users in our study understood what Big Reuse does, all of them expressed their confusion about the date in the history part on the About us page.
It was difficult for users to find important information about Big Reuse in a block of text. On the “Our impact” page, users were overloaded with too many numbers.
On the “Our impact” page, users were overloaded with too many numbers.
User quotes: “Hard to keep straight what number applies to what, and can’t determine whether or not it’s impressive or the scale.”
“Sometimes you get a little lost in all the numbers.”
Audiences thought that this content was hard to read, and the history timeline of the Big Reuse is difficult to understand.
User quote: “It seems like the years are a little confusing about if they have started since 2015 or 2010.”
Solutions for content readability
On the About us page, we recommend using a two column layout to show the history information. By separating the important dates and the events, and keeping them in a vertical timeline, it is clearer for viewers to see the dates directly and know what happened to Big Reuse during that period.
On the “our impact” page, we recommend using larger and bold text for key numbers to increase visual hierarchy. In addition, implementing whitespace around blocks of text and color contrast will help audiences capture the important information easier.
