World Cares Center is a nonprofit that provides training, supplies, and relief to disaster stricken communities. When I joined the project, the organization's website was barebones, running solely with the help of volunteer developers and graphic designers.
With the help of Flynaut, WCC was in the final stages of developing their volunteering portal. However, Flynaut was not contracted to work on their main website, which also needed a refreshed design. This is where I come in.
.png)
I ran a moderated usability test with 5 participants in order to benchmark the site’s performance. The participants indicated that the site was frustrating to navigate, induced headaches due to information overload, and featured an outdated visual design that contributed to an overall suboptimal user experience.
I ran a moderated usability test with 5 participants in order to benchmark the site’s performance. The participants indicated that the site was frustrating to navigate, induced headaches due to information overload, and featured an outdated visual design that contributed to an overall suboptimal user experience.
When I ran Google Analytics on the site, the data indicated that users tend to click off the site pretty fast. When they do stay, they visit only a few pages, making discoverability of the volunteer and donation pages critical.
.png)
I synthesized all of my research using affinity mapping and uncovered many pain points users encountered during their experience. Below are the top three grievances I chose to focus on.
Users had a hard time finding the information they were looking for. In particular, the information architecture and navigation bar of the site were especially confusing. Unclear labeling, redundant categories, nested tabs in nested tabs, among other things were the main causes of grief.
Text walls and insufficient contrast made the content hard to read. Additionally, the main CTA buttons had little to no visual prominence; this results in low conversion for both donations and volunteer signups.
Alignment issues, inconsistent elements, and illogical design patterns all contributed to a sub-optimal user experience.
Narrowing the scope of the project allowed me to target solutions that would improve the website the most. By focusing on these goals, I can ensure my subsequent design decisions are grounded in user research and solve the problem.
In order to develop an information architecture that aligned with users mental models, I conducted a hybrid card sorting exercise with 10 participants. Then I tested my new IA against the old one using an A/B tree test with 10 unique participants for each side.
%20(2).png)
The previous navigation bar features too many categories, and was organized illogically; this resulted in information overload. The red highlighted boxes indicate redundant pages.
%20(1).png)
The new IA was created through card sorting, which makes it more aligned with how users expect the information to be laid out. Additionally, the navigation bar is more concise and streamlined.
Excessive text walls led to a significant drop in engagement . Additionally, the sheer volume of information presented posed a challenge for users to retain, due to the overwhelming cognitive load imposed by the content.
.png)
The previous design received feedback that it was unengaging and intimidating to read. And since the site features a large amount of information, this feedback was quite concerning.
.png)
I refined the copywriting and used typography (font size, weight, color, etc.) to introduce visual hierarchy. Additionally, I added images to make the text more intriguing.
The 3 main actions that World Cares Center wanted its users to achieve were: signup as a volunteer, make a donation, and learn more about the organization. Users found all three actions were difficult to accomplish.
On the navigation bar, get involved and donate had the same level of prominence as all other items. Moreover, the donate button on the body of the page was hidden far down the page and did not stand out.
.png)
I created a "donate now" button that stood apart from the other items in the navigation bar. Additionally, a "go to portal" button was added to the hero banner on the homepage.
.png)
Many of the text and UI elements did not meet the WCAG standards for color contrast in accessibility. This contributed in visual strain when trying to read content on the site. I went back and ensured my design met at least the AA standard.
I created a comprehensive design system according to atomic design principles. This helps WCC design more pages in the future after I am gone. Additionally, it helped speed up my own design process.
.png)
.png)
I conducted another usability test with 5 new individuals. I was mainly looking to test navigability and comprehension of the content on the new site. I uncovered some areas for improvement which are shown below.
.png)
.png)
Many users thought that World Cares Center's only function was to provide disaster relief aid through deploying volunteers.
I added cards to the design to clarify the 3 main functions of World Cares: training volunteers, stockpiling emergency items, and deploying volunteers.
.png)
Initially I designed the volunteer page as a general interest form. However many users incorrectly assumed that they could only volunteer by deploying to provide disaster relief.
I redesigned the page to clearly denote the 2 types of volunteers: Ready Responders (deployed volunteers), and operations.
With feedback I got from testing the existing site, I redesigned World Cares Center's website by making it more visually engaging and easy to use. Below is a selection of pages from the final design.
.png)
Working with a team is different working solo. There are a lot of moving pieces and I tried to keep all stakeholders in the loop throughout my process.
Incorporating stakeholders into the early stages of the design process not only facilitates smoother buy-in for your design concepts but also fosters a shared understanding among all involved parties. Additionally, it's important to recognize that valuable insights and innovative ideas can originate from individuals who may not have a design background.
I learned to be precise with padding and margins when annotating my Figma file. Developers won't know what values to set if you don't. I also learned to be aware of technical constraints when designing features.
I informed my design based on data gathered through usability testing and web analytics. In order to gauge the success of the design and to improve in further iterations, I will continue to monitor Google analytics as the site becomes live.
.png)