Experimental Website revamp

General
1

the challenge

It’s been way over a year that we’ve build the website as it is today. Back then, we just started having other chapters outside of Berlin and wanted to give our honours to them by being more inclusive but also document more of our processes. Since then a lot happened, but very little on the website.

Aside from having plenty more chapters by now, we’ve also developed and new formats. Neither of those are very accessible through the website today. On top, we’ve added more tools to our infrastructure – like discourse – and shaped more clearly what is it that we do.

the proposal

Earlier this year together with the Melbourne team, I started playing around with implementing an interactive map to make it possible for people to find an opentechschool in their region using the public meetup.com API. I called this experiment “the locator”, a different approach to finding events and chapters close by than a long (and not up to date) list on the top of the website. Here is a (cut) screenshot:

It is an interactive map with a list of all globally upcoming meetup events of all opentechschool groups found on meetup.com. Depending on where in the map you are, it highlights the corresponding events and chapters. And if you’ve geo-location of the browser enabled, it even locates the closest chapter to you.

Motivated by the great results, I went further and implemented the same events-displaying on the Chapter pages, too:

And because it was so much fun, also added a feature to show the latest discourse discussions if a category was given for that chapter:

Taking all the nice features together and revamping the website using a similar approach, I came up with this much more interactive and inviting approach to the lading page:

Aside from those two new features (we already had the blog role, though I rewrote it for this one), I also revamped the header to be a bit more compact and visual. Under it we have space for “breaking news” and then the three-part separation of “learning more about OTS”, “starting to learn” and “joining the movement” with short paragraphs introducing the three main aspects that people want from the website.

With the new locator being in place, I also revamped the quick-navigation. As said before, it wasn’t properly representing our “structure” anymore. I replaced it with a clean and easy list of chapters and projects/formats accessible through the arrow next to the logo (which is also a proper font now):

Next steps

This is still far from done. The design needs some more love (see the header?), the wording needs more thinking and aside from hackership, we don’t have any content for any of the project pages yet. Also the question whether it should be called “project” or “format” is still open …

But first, I’d like your feedback about it. And, if you like it, your help with getting it further. What do you think? Ideas, remarks, criticism?

If you want to try it yourself, it is the “locator”-branch on the official OTS-www-repo and should run usual.

Thanks.

2 Likes
2
  • I think the white background for the text in the header image could be slightly more opaque to bring it out more, and the text fully opaque;
  • There could be a nice big “Find a chapter” or “Find a chapter near me” button in the middle of the page above the fold that links to the locator.
  • A world map displaying OTS Chapters might be a nice thing to include on the OTS homepage, the page is already long and busy though so I feel something else would have to go, or it could be hidden and able to be brought up.
  • The page could be made slightly less scrolly by moving the Events, Community and News sections into a single full-width section with 3 tabs to switch between displaying one of those lists.
1 Like
3

Updated the branch included you first two remarks, looks much better indeed.

As the locator also requires some loading time (JSON and stuff) I am not so fond of having it on the main-page. But in any case, yes, it would be quite a lot and I am not sure where to put it.

The two-columns are already a little tight for events and community tbh. And with news, which are mostly titles, so vertical is best to read them, I think that’d be too much.

I see that maybe clicking the new button in the header now, could “flip around” the area and load the locator there. But both things I consider to be done/played with post-launch.

4

Then perhaps have it not at the top, but near / below the fold.

By what I said, I meant it would expand them to full width, but in tabs. like so

5

I’d like to get moving further on this soonish, feels like it has been in the air for way to long …

I see what you mean. It’s just that tabs aren’t really on the same level as one is always pre-selected and therefore get way more attention while the others require clicking. I am not really a fan of those for content like this.

Would you mind if I go along with the version as is and we can figure out these things later on the go?