Design a web page template to displays ratings information about charities.
Design, Wireframes, and Information Architecture
Sketch, Figma, Dropbox Paper, InVision
I was tasked with creating a wireframe and web design template for a charity profile page. However, the project ended up requiring me to take on quite a few roles outside of that. Overall, I had a chance to work on the page's Information Architecture, UX design, and a variety of UI elements.
Since the success of any design project can be defined by its processes, it's important to acknowledge that this is a case study in failure. That makes this project one of the most valuable experiences I've had as a designer. Experiencing failure in this way has helped me to better internalize some really important lessons. Specifically, the value of developing and clearly communicating shared definitions and established truths. The final product would have been better served by a stronger internal process.
Experiencing failure in this way has helped me to better internalize some really important lessons.
It's important to note that the work shown here is not the final project outcome. Instead, I am presenting an idealized version of the project, using the actual boundaries and challenges presented by the content.
Task: Design a web page that displays ratings information for charities.
Charity Navigator was preparing to launch a new rating system for over 100,000 charities. The new system is possible through newly-developed automations for data-mining and analysis. The primary users for this page are potential donors, who may be casual users or power users.
The final page design is the result of several different design problems. Each problem required an individual solution, which work together in one cohesive system. This case study speaks to each of the 5 primary design problems, listed here.
Charity Navigator needed help organizing ratings information for their users. They wanted to build an iterative system that could easily add, remove, or alter metrics, as needed. The goal of this new system is to present fair and unbiased guidance about charities to donors. It is the backbone of a charity's profile page on the Charity Navigator website. While donors are the primary audience, the system also needs to work for the charities that are being rated. To help charities use the rating system, it needed to provide clear targets and shareable achievements.
Initially, we tried to define the system as a collection of badges. Above the badges, one cumulative score reinforces the charity's performance.
Problem 1: The badges are not binary evaluations separate from the cumulative score. Often, they are scaled metrics ranging from 0 – 100. They could also be a binary value or ratio. Some metrics are achieved with a high score, while others were achieved with a low score. Additionally, each metric has a different weighted impact upon the cumulative score. In other words, Badge 1 ≠ Badge 2 ≠ Badge 3.
Problem 2: Charity Navigator wanted the flexibility to add new metrics. There is no maximum value for how many they want to add. This meant, over time, the system itself could become unwieldy and difficult to understand.
Problem 3: Badges work best as a reward system. This system needs to communicate three states to users: pass, fail, not applicable. Showing failed badges is more transparent for users. However, highlighting those failures felt overly punitive towards the charities themselves.
Problem 4: Changing the definition of the cumulative score makes it difficult to compare. Charity Navigator's users would struggle to benchmark a charity's annual performance. Charities would also struggle to know how they can improve their score. Lastly, Charity Navigator would struggle to present clear authority in the industry.
Overall, badges introduce problems for users, the client, and charities. They devalue the ratings and expertise, established by Charity Navigator.
A system developed when I came upon an article on the Charity Navigator website about donor guidance. It turns out, the client already had a great outline for how users should evaluate a charity. Charity Navigator instructs users to first determine if the charity is genuine. Next, users should consider any possible cautions or advisories. With those established, a user should use their personal values to guide them. Things that might be important to donors include the following: financial stability, integrity, impact, and culture. Using these four categories, we can standardize a rating system and introduce stability. The branding team developed terminology for these metric categories, calling them "beacons."
The four category system...
Building a content strategy based on this system helped guide the user's experience of the page. I organized the levels of information into three distinct areas: Analysis > Metrics > Data. This helped to create content patterns that can apply to a wide range of information. It maximizes transparency and information access, without overwhelming users.
Charity Navigator wanted to allow charities to customize their profile page. I needed to define clear parameters to ensure this feature could be introduced in a realistic manner. These parameters were:
The solution was to create a limited number of themes from which charities could select their page's appearance. There is no need for image policing, or fear of creating inaccessible experiences. Plus, the array of available themes can grow alongside the system, to celebrate milestones.
We needed to concisely differentiate analytics information (the ratings) from profile information (facts about the charity). Low-fidelity wireframes were useful to help the client first think through what the system should be communicating.
Once the system was more clearly defined, we were able to articulate goals for visual solutions. Working with a wide range of example metrics helped to rapidly battle-test ideas. The sidebar design was an exercise in Gestalt principles. It benefited greatly from the principles of similarity and common region. These ideas helped to clearly reiterate the system's meaning with the resulting visuals.
Early iterations tried to visually combine the score with the beacons earned. Informal user testing (asking my husband) showed that including icons did not enhance the overall understanding. As he put it, "I understand what 75 out of 100 means." The simplification of the sidebar was scary but liberating. It allowed me to introduce a new visual cue of color strength to supplement the numeric values of the beacons.
A sticky top bar helps to provide continued content support to users, as they scroll further down the page. This is especially helpful for power users doing comparative charity research on desktop devices. Creating strong content patterns supports this user behavior.
Here, too, you can see the color strength system supplying additional information to users. An interesting use case is to look at the number of score combinations that can result in a 75. Despite having the same score, the system allows for an additional level of insight, at a glance.
One of the most important pieces of content to communicate is if a charity has any active advisories. These warn about investigations or data integrity concerns that might compromise an automated rating. The advisories are tiered into low, moderate, and high. Each tier requires a different level of concern that should be communicated to users. Tiers are visually different and have slightly different user flows. Low advisories are accessed after landing on the page. Moderate and high advisories first use an interstitial before allowing profile page access. As an additional precaution, a high advisory removes rating information from the profile page.
The beacon sections needed to be standardized in form and whenever possible, content. This helps to create a familiar user experience. An interesting challenge was the conflicting ways of defining a single metric. Metrics could be ratios or binaries. Additionally, metrics had two definitions. First, they have an internal definition (a Program Expense Ratio of 80%). Second, there is a contextual definition (a Program Expense Ratio of 60/70 possible points). The internal definition is extremely useful for experienced donors. Often, it is reflective of an industry-recognized measurement tool. The contextual definition is useful for newer donors. It helps them understand how the metric affects the section score. Rather than prioritize one group of users, I decided to introduce content duplication.
First, users are shown the top 3 metrics for each section. These are metrics that experienced donors most often look for, and newer donors should be guided towards.
The card content...
These features guide users not only to the information, but through the information.
Following these cards is the full metrics table for this section. This information is useful for power users and newer users.
Supporting these tables is the raw data and definitions for each metric. These are accessed through click-thru experiences. This design solution has a number of user benefits.
The wireframe structure for the beacon sections works well across each of the four categories. Using the same pattern for information, but using a different color scheme for each category, the page structure creates a consistent and easy-to-digest approach to complicated data.