36 comments

  • Mike SwartzMike Swartz, almost 5 years ago

    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.

    36 points
    • Nic TrentNic Trent, almost 5 years ago

      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.

      2 points
      • Mike SwartzMike Swartz, almost 5 years ago

        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.

        1 point
    • Andrew Richardson, almost 5 years ago

      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.

      0 points
      • Mike SwartzMike Swartz, almost 5 years ago

        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.

        1 point
    • Hayden MillsHayden Mills, almost 5 years ago

      Thanks for sharing the reasons! It really helped me understand the goals of the redesign better. Cool stuff to read.

      2 points
  • Rolando MurilloRolando Murillo, almost 5 years ago

    Nice approach to search. The overall aesthetics feel very Dropbox.com to me.

    8 points
    • Eric REric R, almost 5 years ago

      My first thought was literally "this must have been designed by the same color-blind folks that did Dropbox"

      5 points
  • Nic TrentNic Trent, almost 5 years ago
    • 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.
    7 points
  • Account deleted almost 5 years ago

    It's amazing how someone can make something so bad in so many different ways while trying to make it good.

    7 points
    • Justin YoungJustin Young, almost 5 years ago

      Be Nice. Or Else.

      11 points
      • Account deleted almost 5 years ago

        Do you think it looks good? Or functions well?

        2 points
        • Nic TrentNic Trent, almost 5 years ago

          yes

          4 points
          • Account deleted almost 5 years ago

            Cool. I think it has some fundamental issues, beyond the terrible colours , which are subjective, that make it less than ideal.

            1 point
            • Nic TrentNic Trent, almost 5 years ago

              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.

              3 points
              • Account deleted almost 5 years ago

                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.

                4 points
                • Brendan Appe, almost 5 years ago

                  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.

                  0 points
                  • Account deleted almost 5 years ago

                    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.

                    0 points
    • Daniel GoldenDaniel Golden, almost 5 years ago

      This comment is rude and unhelpful. If the delete comment functionality for mods was working rn it would be deleted.

      6 points
      • Account deleted almost 5 years ago

        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.

        4 points
        • C W, almost 5 years ago

          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.

          3 points
          • Account deleted almost 5 years ago

            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.

            0 points
  • Alex FloresAlex Flores, almost 5 years ago

    Mobile experience is fantastic

    5 points
  • Mattan IngramMattan Ingram, almost 5 years ago

    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?

    2 points
    • Mike SwartzMike Swartz, almost 5 years ago

      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.

      2 points
      • Mattan IngramMattan Ingram, almost 5 years ago

        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.

        0 points
      • Eric REric R, almost 5 years ago

        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.

        0 points
  • Andrew C, almost 5 years ago

    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..

    2 points
    • Mike SwartzMike Swartz, almost 5 years ago

      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).

      1 point
      • Andrew C, almost 5 years ago

        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!

        2 points
  • ChrisArchitec t, almost 5 years ago

    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

    2 points
  • Thiago Duarte, almost 5 years ago

    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.

    1 point
  • Kevin MartinKevin Martin, almost 5 years ago

    No HTTPS? Kinda shocked.

    1 point
  • Dave Gandy, almost 5 years ago

    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.

    1 point