Hey designerds, figured I'd weigh in on some of the thought process here, you might find it interesting:
- Colors: Totally agree, today's theme is super Dropboxy. There are 32 color themes at MIT's disposal day-to-day plus custom colorways keyed off the daily art. These were all made to be accessible (AA or better), so had to follow pretty strict contrast/value rules to get there. Some are better than others, but they're made to be diverse and impermanent as the site cycles through them each day. Tomorrow it'll be different.
- Search this is where a lot of effort went. MIT is a really diffuse place, and the main problem we saw in our research with users was digital wayfinding. We decided to make search the centerpiece and focused on getting it to be fast and useful (and even fun). One use case we worked on a lot was the mobile interface, as the site is really optimized for mobile sizes and handheld use. It has a custom elasticsearch installation that was heavily tested to make sure it was ACTUALLY useful in the real world. There are a few easter-eggs too ;) Full-page takeover on desktop is a side-effect of some of our mobile choices, which bubbled up to desktop. Try it on your phone!
- Content strategy: the coolest part of the old MIT.edu was that it changed everysingleday. We saw this as a feature, not a bug, and designed around this. Each day the site highlights one small aspect of MIT, or one big discovery, or an interesting person. It tells the story of MIT in the aggregate, but over time instead of across (page)space. Many universities resort to "box-filling" to get all the aspects of their culture and academics on the homepage -- and you get a big huge homepage with each group fighting over page real estate. With MIT this was just impossible. So they made a really bold choice and are telling their story one piece at a time. It's also well suited to a daily email, which is rolling out at the same time.
It's a quirky site, but MIT is a quirky place. We realized from the jump that in order to be "very MIT" it had to be smart, fast and weird. Judging by the comments I'd say we succeeded in the at least a few of those places. It's got a ways to go, but we think it's a great start for their writers, designers and engineers to build a platform for their community.
Nice! Really cool to hear some of the thinking that went on. Can't help but wonder how feedback might differ if the design stacked the search on top of the spotlight like on mobile?
But I also personally like the unique layout, simply because its unique.
Thanks Nic! The split was a solution to really large sizes, but there can be an awkward in-between. The stacked layout at 1099px wide is actually my favorite view of it.
I love the content strategy aspect of this. It seems like there was a lot of thought put into handling a huge amount of information.
It's really curious that you decided to change so much on a daily basis, did you do any testing around this aspect? I'd imagine there was a lot of consideration given to those who use the site daily vs those who only occasionally visit.
Good question. MIT had actually been doing a version of this content strategy on their site since the early 2000s, so the Spotlight is something people in the community know and expect. We wanted to keep + build on that aspect of the site and make it even more content focused, but also respect the utility-oriented visitor trying to find a person, department or building quickly with minimal fuss.
I can't tell you how much I appreciate that your team embraced this aspect of the site! So many designers seem leery to work with a site as a dynamic, ever-changing thing, it's refreshing to see a team recognize that's a feature, not a bug.
Thanks for sharing the reasons! It really helped me understand the goals of the redesign better. Cool stuff to read.
Nice approach to search. The overall aesthetics feel very Dropbox.com to me.
My first thought was literally "this must have been designed by the same color-blind folks that did Dropbox"
- I love the colors! Maybe a tad more Chobani than Dropbox?
- My favorite part about the site is the tooltips on hover. A nice accessibility touch.
- It's very confusing to know where to begin navigating.
- The search bar has no reason to take up the entire window once the user starts typing.
- The Spotlight section is an interesting and innovative solution.
- At first glance, the site looks great, but 3 different strong access points are fighting for my attention.
Chobani does a much better job pairing colors together than Dropbox (or MIT).
The designer at Chobani actually co-founded the agency that re-branded Dropbox... small design world I guess https://www.wearecollins.com/
It's amazing how someone can make something so bad in so many different ways while trying to make it good.
Be Nice. Or Else.
Do you think it looks good? Or functions well?
Cool. I think it has some fundamental issues, beyond the terrible colours , which are subjective, that make it less than ideal.
Genuinely curious what fundamental issues you believe are wrong. I wrote some things I like, don't like below. They were dealing with some interesting issues if you read the behind the scenes.
The page isn't balanced
There are four different things competing for your attention
Everything is horribly crowded (15"MBP screen)
There is no clear heirarchy
The tooltips obscure the links, showing me pointless URLs that I can't do anything with.
The top nav disappears when you scroll
Join us in building link doesnt provide any context, and seeing as the rest of the page is so confusing it makes me not want to click it
When you click search in the top right corner, the animation is almost seizure inducing.
That's just a few.
While I agree there are some hierarchy issues (the smaller sizes address this, making search the clear priority) I disagree with some of your other points.
The page to me doesn’t feel too crowded at all, and I’m viewing it on a 13” macbook. There is a search to the left, and image to the right with a headline peaking from below indicating scroll to read more. It feels clean and rather simple what my options are here.
The URLs are not pointless, their URLs are very tidy. You can easily see if a link is taking you to news, an alumni page, the library site, etc. It potentially obscuring the link is really a non-issue, move your mouse.
The top nav disappearing could be problematic, but it seems they’ve done a good job ensuring most pages aren’t very long so maybe they found it unnecessary?
Your last two points are fair, though I assumed “Join us in in building a better world” had to do with their community involvement/volunteering efforts, which was correct. I could see including that on the homepage a client demand and them doing the best they could with the real estate provided.
But thats the thing. you have basically infinite space to use. They've tried to cram it into this weird split layout which has more problems than it's worth. They could've made it a lot cleaner and usable if they'd gone for a more traditional layout. It would solve most of the problems on this site. Form before function and all that.
This comment is rude and unhelpful. If the delete comment functionality for mods was working rn it would be deleted.
I listed why I thought it was bad below that comment, and nobody seems to have rebuked any of those points. This reminds me of dribbble. People only want feedback if it's good.
I think most designers welcome negative feedback, we just insist on being treated with respect while being given said feedback. Calling something terrible, or your original comment which simply says you think it's bad without expanding, those are extremely negative ways of providing constructive criticism and I think you probably know that.
Maybe you're having a bad day, but that doesn't mean you can act like a dick and break this sites rules. Would you use those words or talk that way in a design review IRL? I highly doubt it.
I absolutely would use those words if a senior designer presented that to me. If it was junior I would probably give them advice on how to make it better. I genuinely thought it was so bad that it didn't need further explanation, but I guess I was wrong about that.
Mobile experience is fantastic
What do we call this new color palette that sites like this, Dropbox, and others such as https://www.emcap.com/ are using?
They're kind of earthy and fleshy, and not very saturated.
I'm still trying to decide if I like this color trend. It makes me think of paint?
Good question, a name for this would be great. It's kind of like natural vs synthetic pigments, like they use in dyes. This palette is like the one you could make from organic materials, like when people would crush up bugs and stuff to create pigments.
That is fascinating, although I'm not sure the designers will appreciate if I call their color palette the "crushed bug palette".
I do like the idea of natural dyes. It's being used in relatively "flat"design but brings a much less digital feel to it.
I call it "color blind"
Although emcap does a much better job because their color pairings aren't all muddy.
Diarrhea green background with piss yellow text isn't a good combination.
It looks like you guys updated the colors in the hero section from the other day though, which looks much better.
Positive: Very interesting concept! Love the double scrollbar kind of thing you guys have going on here (even though it's only one scrollbar). It's very well executed and feels natural even though one side is fixed. The concept seems curious and cutting edge — good for the brand.
Not So Positive: Keep in mind I have little context of your users so maybe this has be user tested out the wazoo.
Functionally I find it a tad hard to browse and understand. Under recent spotlight you have Muddy Charles Pub (today's spotlight) gone from the list. It wasn't until I hit tomorrow's spotlight (Parrish Bergquist) that I saw the entry and realized it was a curated list of MIT things—I would consider a way to help people orient themselves in space a bit. I had no idea where I "was" until I put cognitive effort in. Search links take you to external sites but these spotlight take you to internal pages? What's the diff? I read your content strategy above and it helps me out (across time not space/pages) but there's an easy way encapsulate time AND space in a historic format (blogs and timelines do this). I actually like the quirk of the concept overall—think it's neat. So maybe that's the culture and people you're playing to and it works? Functionally a layman is going to need help.
The search bar type-animation draws your attention continually. Consider limiting the amount of times that animation cycles. I also found the transition that happens when you begin typing the search bar very jarring. Was hard to understand the results because of the huge switch in context.
Good luck! It's a neat website overall with some usability kinks to iron out..
Good points, and great feedback! You've honed in on two of the aspects that we expect to change most over time. The internal/external nature of the links are a very tricky problem. There are so many MIT sites and so many places to link off to. We try to mitigate this with the tooltip messages, but the nature of the network is that you're more likely than not to link to a completely diff site. The UX of browsing past spotlights is one that definitely needs some more thinking. Our feeling was to start by generating the content and trying on the approach, and then tuning the system as we can get more data and feedback from users in the wild (aka: who aren't just testing the site for free food).
It's definitely a bold concept and it'll be great with a few iterations. In my experience it's not often a design starts out this bold—and that's a better strategy because dialling back is always easier than pushing the boldness factor.
Best of luck!
Not bad. Interesting search bar. Some behind the scenes launch commentary: http://news.mit.edu/2018/new-mit-homepage-and-daily-email-launch-today-0725
Incredible job! I can't imagine how difficult is to push things like this forward in an institute as big as the MIT. You guys did the first step for all the other colleges to start moving.
No HTTPS? Kinda shocked.
In a lot of ways, this still feels like the soul of the site from the mid-90s still. Design looks solid and flexible as the spotlight rotates on a regular basis.
My primary problem is still that awful logo from the redesign in the late 90's. I get they're trying to be techie and all. But they're MIT. They already are. They don't need to project it.