I like the content changes. I think the design seems worse than the previous one. In-particular the information density has gone down a lot, which feels in-tension with OpenPhil’s target audience. See e.g. this screenshot:
This screenshot feels to me almost like a screenshot from a tablet, but it’s taken from my pretty zoomed out and large laptop screen. The site starts feeling a lot less cluttered and navigable at 75% zoom to me:
Some other comments:
I don’t think I like the new logo. I am not exactly sure why, but my first reaction to seeing it was something like “this is a logo for a Christian church”. I think the cross-shape in the middle, and just the general association of “radiating light” with “christianity” seems like a candidate. I preferred the previous logo here. The logo is also just generically non-distinct (i.e. if you gave me just its outline on a piece of clothing or paper, there is little chance I would be able to recognize it as the OpenPhil logo). It’s also almost completely invisible and indistinguishable in my tab-bar, which is another litmus test I use for logos.
Overall the site feels like it’s gotten slightly harder to navigate. There is lots of padding, whitespace doesn’t seem to be used super effectively, and text-contrast issues are more present than in the old site (for example, on the frontpage, the navigation at the top has pretty bad contrast against the first image that’s displayed in the carousel).
A lot of pages feel kind of unpolished. The team page is just a giant list of names in a layout that feels very overwhelming and not well-optimized for this number of items in the list.
The site is extremely slow, given that it’s just a static site that presumably doesn’t have a lot of reason for dynamic content. When I click on a menu item, I have to wait (on a fast interconnection, on an M1 laptop) for almost a two full seconds until I see a page transition, and then another 500ms for the page transition to complete. Generally, clicking around on the website feels very sluggish.
I feel like a lot of content hierarchy isn’t very clearly established. The grants database, which is the page I use most frequently, now has a white header with lots of white UI elements that blend into each other as you scroll, without any drop-shadow, that make me very confused where different containers are supposed to be located (I like playing with whitespace in order to establish hierarchy, but I think the current design fails at that)
See the white top header overlapping with the option on the left, and the grey boxes in the center
Bullet lists in-particular seem to have kind of bad formatting:
The spacing here seems very off, the indent of the bullet lists is too narrow, and I think bullet lists should have all the bullets in a column, without the text breaking into the bullet column, so that you can skim the bullets consistently
The link styling is (IMO) both overwhelming and not super intuitive, with the the primary way links are made distinct is by giving them a black underline. I think it’s pretty standard across the internet to have links be colored, and one should stick to that style unless there is a good reason. Potentially the links could look better if the underline was a bit further below the text, and dashed or something, but probably the links should just be colored (I’ve tried making underline-only links work on LW, and gave up after a while)
The tag section has kind of bad text contrast, and feels a bit hard to read to me (grey text on grey background)
Why do all three of these items have like 200px of whitespace at the bottom? I think it looks bad, and contributes to the overall low information-density on the site:
It’s worse here:
These menus have an inconsistent click area. E.g. the whitespace to the right of the text “TEAM” should be clickable, but it’s not, and this has caused me to click into nothingness many times while playing around with the site:
Content wise:
I like the site more, and it seems to more accurately convey what OpenPhil is about. I could probably leave more comments on content, but I figured I have a particular comparative advantage about commenting on webdesign.
Thanks for all of this feedback! Lots of good points to consider moving forward, and exactly the kind of thing I hoped to get from this post.
This website was a weird project — passed around between owners and developers over a period of ~2 years. I think there was a good amount of usability testing before my time, but I’m not sure how much of that was holistic and focused on the final design (vs. focused on specific elements). I agree with most of your points myself and also trust your experience in this area.
So I’m just going to say that, at this point, it seems like Open Phil should just consider a wholly new redesign, basically make a new website.
The considerations for “cost benefit analysis” for making a new website:
Maybe a lifespan of 5 years?
The time opportunity cost or value to current users
As one of many valuable things, the grant page is a big deal. It seems like a good design on just this feature would have a lot of value to many people
A nice “PWA feel” would be good for the grant page and others (I don’t know that much about web design but the idea is something like the UX of this, which has instant response to user input)
There’s many other theories of change, like outreach or communicating to new donors or EAs, that would benefit from a good web page
I think each cause area can get a little more focus and polish (in addition to the polish described by Habryka’s, which seems to be a given).
This requires attention from a dedicated professional or team.
A good website is just good for morale of employees and EAs?
I think the budget justified by the above is large. Obviously, time cost or opportunity cost is a consideration.
So, like, maybe they can make Aaron Gertler like a super project manager (“Director Gertler”? “Executive Vice President Gertler”?) and give him a big budget. Then he can get bids, hire an agency and get a service agreement, etc.
This work isn’t trivial, but presumably this should be possible for some up front effort without further encumbering him too much.
Despite the real visual + other issues, I still think the website is very reasonable!
The changes to make, including some to the grant page, are tiny relative to the overall size of the project. It seems very easy to find our grants and other content, and overall reception from key stakeholders has been highly positive. OP staff seem to like the changes, too (and we had tons of staff feedback at all points of the process).
If you have other specific feedback, I’m happy to hear it, but I don’t know what e.g. “a little more focus and polish” means.
TL;DR I spent more time looking over the website (particularly on mobile) and I think I’m mostly wrong/bad in my comment above. There might still be some value in a redo, and I guess it is 30% likely to be valuable.
I am not a web designer, but I’ve interacted with several in the past. I guess my comments below are about “50% true”.
Why I changed my mind from my message above:
I was in the mindset of my initial impression and Habryka’s comment, which seemed quite negative. I tried the website again, on mobile. The website “just works”.
The website seems much much faster than I remember, it seems like someone tuned or put some effort to fixing this
Your message that the key stakeholders like it, is a big update.
Why I think there could be a redo:
For redoing the grants page, I think that redesign or work can be deceptively large and might involve touching many other places on the site (a similar filter menu appears on other pages).
I think in some situations in similar seeming project, it seems like an entire redo ultimately occurs, even when the original changes seemed small originally. This is because of the dependencies or costs of trying to accommodate existing content.
I think the changes might be minor in some sense, but I think this still needs a very experienced designer to go over the details.
There is some chance (30%) this assistance can be expensive or difficult to arrange, compared to just getting a new website from scratch.
There’s patterns of design being used that are different than ones I see (see comments below)
In some sense, Open Phil is a major expression of the heart and machinery of EA. So having a highly polished page that is highly professional is valuable.
I think some viewers of the site, will be really picky, especially newcomers and some kinds of talent (experienced professors). They might be judgmental and take on impressions, even if they can’t consciously articulate it.
These comment on the intro page, and the about page, as they seem like natural places where a newcomer would try to come to “gauge credibility based on a website”.
I think this comment is lower value and I sort of don’t expect many people to read it, I’ll just put it here for completeness.
I emphasize I’m not a designer. But it’s easy enough to just present these ideas to an actual designer and see what they say, so it’s low cost to be wrong and just have people read this.
No header bar, front page content up against top of screen
For the front page, there’s no header bar and that seems unusual.
As below, the image and content is right up against the top of the screen, with hamburger bar sharing the space space.
So the image with the scientist on a microscope, is in place of what often is the header image.
(By the way, the bright color in the image is slightly obscuring the logo and title.)
For contrast, see Oxford’s site on mobile:
Room for scrolling seems like a desirable pattern
Many modern websites “give space” for scrolling on mobile. So a user loading a page, who often instinctively scrolls down, has a lot of content to see.
In contrast, the mobile site right now is pretty dense and there’s not much room to scroll down to find more content. For example, “cause selection” is right below the first section of content.
So I claim this is sort of fighting the “modern” tendency for people to scroll down a mobile website.
If you go on Square’s site and scroll down, you’ll see a long narrative with many pictures breaking up the text. This room seems desirable.
It’s true that the target audience isn’t the same as the average TikToker, but I still think many people are familiar with mobile sites like this, and expect a roomy scroll.
I thought this was particularly surprising because the width of the click area doesn’t even match how far the text stretches to the right. Instead, it’s a function of whether the text consumes more than one line. So ‘Grantmaking process’ has a wider click area than ‘Get email updates’, despite the latter being wider, because it stretches over two lines.
Another inconsistency with the menus is that the click area doesn’t coincide with the hover area. For example, to click on ‘Longtermism’, the mouse pointer has to be above the text, but one can expand the menu that lists the three longtermist sub-areas even by hovering over the whitespace to the right of ‘Longtermism’.
I like the content changes. I think the design seems worse than the previous one. In-particular the information density has gone down a lot, which feels in-tension with OpenPhil’s target audience. See e.g. this screenshot:
This screenshot feels to me almost like a screenshot from a tablet, but it’s taken from my pretty zoomed out and large laptop screen. The site starts feeling a lot less cluttered and navigable at 75% zoom to me:
Some other comments:
I don’t think I like the new logo. I am not exactly sure why, but my first reaction to seeing it was something like “this is a logo for a Christian church”. I think the cross-shape in the middle, and just the general association of “radiating light” with “christianity” seems like a candidate. I preferred the previous logo here. The logo is also just generically non-distinct (i.e. if you gave me just its outline on a piece of clothing or paper, there is little chance I would be able to recognize it as the OpenPhil logo). It’s also almost completely invisible and indistinguishable in my tab-bar, which is another litmus test I use for logos.
Overall the site feels like it’s gotten slightly harder to navigate. There is lots of padding, whitespace doesn’t seem to be used super effectively, and text-contrast issues are more present than in the old site (for example, on the frontpage, the navigation at the top has pretty bad contrast against the first image that’s displayed in the carousel).
A lot of pages feel kind of unpolished. The team page is just a giant list of names in a layout that feels very overwhelming and not well-optimized for this number of items in the list.
The site is extremely slow, given that it’s just a static site that presumably doesn’t have a lot of reason for dynamic content. When I click on a menu item, I have to wait (on a fast interconnection, on an M1 laptop) for almost a two full seconds until I see a page transition, and then another 500ms for the page transition to complete. Generally, clicking around on the website feels very sluggish.
I feel like a lot of content hierarchy isn’t very clearly established. The grants database, which is the page I use most frequently, now has a white header with lots of white UI elements that blend into each other as you scroll, without any drop-shadow, that make me very confused where different containers are supposed to be located (I like playing with whitespace in order to establish hierarchy, but I think the current design fails at that)
Bullet lists in-particular seem to have kind of bad formatting:
The link styling is (IMO) both overwhelming and not super intuitive, with the the primary way links are made distinct is by giving them a black underline. I think it’s pretty standard across the internet to have links be colored, and one should stick to that style unless there is a good reason. Potentially the links could look better if the underline was a bit further below the text, and dashed or something, but probably the links should just be colored (I’ve tried making underline-only links work on LW, and gave up after a while)
The tag section has kind of bad text contrast, and feels a bit hard to read to me (grey text on grey background)
Why do all three of these items have like 200px of whitespace at the bottom? I think it looks bad, and contributes to the overall low information-density on the site:
It’s worse here:
These menus have an inconsistent click area. E.g. the whitespace to the right of the text “TEAM” should be clickable, but it’s not, and this has caused me to click into nothingness many times while playing around with the site:
Content wise:
I like the site more, and it seems to more accurately convey what OpenPhil is about. I could probably leave more comments on content, but I figured I have a particular comparative advantage about commenting on webdesign.
Thanks for all of this feedback! Lots of good points to consider moving forward, and exactly the kind of thing I hoped to get from this post.
This website was a weird project — passed around between owners and developers over a period of ~2 years. I think there was a good amount of usability testing before my time, but I’m not sure how much of that was holistic and focused on the final design (vs. focused on specific elements). I agree with most of your points myself and also trust your experience in this area.
Uh...
So I’m just going to say that, at this point, it seems like Open Phil should just consider a wholly new redesign, basically make a new website.
The considerations for “cost benefit analysis” for making a new website:
Maybe a lifespan of 5 years?
The time opportunity cost or value to current users
As one of many valuable things, the grant page is a big deal. It seems like a good design on just this feature would have a lot of value to many people
A nice “PWA feel” would be good for the grant page and others (I don’t know that much about web design but the idea is something like the UX of this, which has instant response to user input)
There’s many other theories of change, like outreach or communicating to new donors or EAs, that would benefit from a good web page
I think each cause area can get a little more focus and polish (in addition to the polish described by Habryka’s, which seems to be a given).
This requires attention from a dedicated professional or team.
A good website is just good for morale of employees and EAs?
I think the budget justified by the above is large. Obviously, time cost or opportunity cost is a consideration.
So, like, maybe they can make Aaron Gertler like a super project manager (“Director Gertler”? “Executive Vice President Gertler”?) and give him a big budget. Then he can get bids, hire an agency and get a service agreement, etc.
This work isn’t trivial, but presumably this should be possible for some up front effort without further encumbering him too much.
Despite the real visual + other issues, I still think the website is very reasonable!
The changes to make, including some to the grant page, are tiny relative to the overall size of the project. It seems very easy to find our grants and other content, and overall reception from key stakeholders has been highly positive. OP staff seem to like the changes, too (and we had tons of staff feedback at all points of the process).
If you have other specific feedback, I’m happy to hear it, but I don’t know what e.g. “a little more focus and polish” means.
TL;DR I spent more time looking over the website (particularly on mobile) and I think I’m mostly wrong/bad in my comment above. There might still be some value in a redo, and I guess it is 30% likely to be valuable.
I am not a web designer, but I’ve interacted with several in the past. I guess my comments below are about “50% true”.
Why I changed my mind from my message above:
I was in the mindset of my initial impression and Habryka’s comment, which seemed quite negative. I tried the website again, on mobile. The website “just works”.
The website seems much much faster than I remember, it seems like someone tuned or put some effort to fixing this
Your message that the key stakeholders like it, is a big update.
Why I think there could be a redo:
For redoing the grants page, I think that redesign or work can be deceptively large and might involve touching many other places on the site (a similar filter menu appears on other pages).
I think in some situations in similar seeming project, it seems like an entire redo ultimately occurs, even when the original changes seemed small originally. This is because of the dependencies or costs of trying to accommodate existing content.
I think the changes might be minor in some sense, but I think this still needs a very experienced designer to go over the details.
There is some chance (30%) this assistance can be expensive or difficult to arrange, compared to just getting a new website from scratch.
There’s patterns of design being used that are different than ones I see (see comments below)
In some sense, Open Phil is a major expression of the heart and machinery of EA. So having a highly polished page that is highly professional is valuable.
I think some viewers of the site, will be really picky, especially newcomers and some kinds of talent (experienced professors). They might be judgmental and take on impressions, even if they can’t consciously articulate it.
So, uh, I have comments below:
These comment on the intro page, and the about page, as they seem like natural places where a newcomer would try to come to “gauge credibility based on a website”.
I think this comment is lower value and I sort of don’t expect many people to read it, I’ll just put it here for completeness.
I emphasize I’m not a designer. But it’s easy enough to just present these ideas to an actual designer and see what they say, so it’s low cost to be wrong and just have people read this.
No header bar, front page content up against top of screen
For the front page, there’s no header bar and that seems unusual.
As below, the image and content is right up against the top of the screen, with hamburger bar sharing the space space.
So the image with the scientist on a microscope, is in place of what often is the header image.
(By the way, the bright color in the image is slightly obscuring the logo and title.)
For contrast, see Oxford’s site on mobile:
Room for scrolling seems like a desirable pattern
Many modern websites “give space” for scrolling on mobile. So a user loading a page, who often instinctively scrolls down, has a lot of content to see.
In contrast, the mobile site right now is pretty dense and there’s not much room to scroll down to find more content. For example, “cause selection” is right below the first section of content.
So I claim this is sort of fighting the “modern” tendency for people to scroll down a mobile website.
If you go on Square’s site and scroll down, you’ll see a long narrative with many pictures breaking up the text. This room seems desirable.
https://squareup.com/
You can also see this with the Gate’s foundation:
https://www.gatesfoundation.org/
It’s true that the target audience isn’t the same as the average TikToker, but I still think many people are familiar with mobile sites like this, and expect a roomy scroll.
There’s other things that make this look different than a 100% polished page.
The about page on Open Phil is pretty dense with text.
In contrast, if you go to the above sites, for example, the Gates site, there’s a lot more visuals and “roominess”:
Our Story | Bill & Melinda Gates Foundation
(I don’t have any prior interest or affinity to the Gates foundation, it just seems like a good reference).
In contrast, Open Phil’s about page is text heavy without pictures, and also the text doesn’t flow as naturally.
Each of these changes individually seem small, but I think there’s many details like this.
I think they might add up and justify getting a designer to spend a lot of time doing revisions.
As mentioned in the top comment, a full redo might be valuable.
I think I’m 20-50% certain about what I said in these comments.
I thought this was particularly surprising because the width of the click area doesn’t even match how far the text stretches to the right. Instead, it’s a function of whether the text consumes more than one line. So ‘Grantmaking process’ has a wider click area than ‘Get email updates’, despite the latter being wider, because it stretches over two lines.
Another inconsistency with the menus is that the click area doesn’t coincide with the hover area. For example, to click on ‘Longtermism’, the mouse pointer has to be above the text, but one can expand the menu that lists the three longtermist sub-areas even by hovering over the whitespace to the right of ‘Longtermism’.