Ephemerisle dot org

ephemerisle logo in whiteEphemerisle was an event created by the Seasteading Institute to encourage innovation towards novel means of inhabiting the oceans and to provide a real-world space to experience the unique problems and politics of seasteading.

The Ephemerisle website project embodied phase-based work based on rapid need for change and improvement, and on data-driven analysis of visitor usage patterns. It began as a set of static HTML pages that were hard to keep updated, and blossomed into a collaboratively-edited, easily-navigated treasure trove with lots of room for community involvement.

This project also required careful attention to time and budget. As a non-profit funded by private donations, the Seasteading Institute’s Ephemerisle promotions needed to generate maximum interest using minimal time and resources. And of course, the team was working against the hard deadline of the event itself.



Ephemerisle: spunky and swirly

Phase-Based Development

I. Dynamic Stretching: upgrading the website infrastructure to allow easy collaborative editing.
II. Targeted Training: using analytics and UX design to catch and keep new visitors.
III. Activating Our Core: integrating social media and forums to help keep the community excited.


I. Warming Up with Dynamic Stretching

Circa 2009, The Seasteading Institute had just run its first successful festival on the water they dubbed Ephemerisle, and they were keen on running another one in 2010.

Ephemerisle welcome page

all of the content in the original website was bound up in static html


The original Ephemerisle website [see it archived here] had done its job well: its swirly spunkiness beckoned exploration to learn more about the event and find out what others in the small but growing community were planning.

But it had a major weakness: it was all static html — great for loading times, nice and snappy, but terrible for quick edits and collaborative writing. With the 2010 Ephemerisle event shaping up, more information needed to be added to the site that should logically go in new pages, but no one was absolutely confident of what the “end product” website would contain. And with three staff members concurrently creating and editing each others’ work, a revamp into a content management system was sorely needed.

As a team we decided we liked the graphics “OK”, but we no longer had access to the original designer to acquire more of the same stuff, and we lacked the budget to start the graphics from scratch. So as the implementer of this Grand Unification Strategy, I would have to make do with what was there.

Goals for the static-to-Wordpress transition:

dynamic menus in action on Ephemerisle.org

A dynamically-generated menu, expanding on roll-over, made navigation much faster.

  • Rework the old design into modern CSS, dynamicized with WordPress template features.
  • De-gunk the old static pages of their redundant HTML; import the data into WordPress Pages.
  • Turn the left-hand navigation, which was statically coded, into a dynamically generated menu.
  • Deploy automatic “bread crumbs” at the top, to facilitate navigation through “deep” pages.
  • Merge the old (separate) Ephemerisle blog with the main website CMS.
  • Install Google Analytics and start watching how people actually use the website.

The above was accomplished in about three days. The conversion looked almost exactly like the original, but with the nav menu balanced under the logo and the content area pulled in tighter to the frame.

(Over time, as more pages were added to the hierarchy of navigation, using that original fancy font — Gill Sans Ultrabold — became an impossibility, as it simply did not scale. Fortunately, nobody was married to that font.)

The real work was yet to come.


II. Targeted Training

Just as Ephemerisle embodied fast, efficient, incremental improvements-as-needed, the website’s interface needed to grow and change to accommodate the wider and denser amount of information we wanted Ephemerisle-goers to have.

But above all, we needed to make sure that the website was accessible even to a complete neophyte, especially since it was starting to get some interesting attention from the likes of Reason and Make Magazine; in other words, the website needed to look like a party girl but carry a big briefcase.

Because we’d been using Google Analytics, we had data on the actual use patterns of visitors on Ephemerisle.org. What we didn’t have was a good way of making use of that data to reorganize and restructure to good effect.

Enter Megan Woolever. After a team throwdown with sticky notes followed by a showdown on whiteboards, our new user experience designer was able to come up with a new content organization based on the Analytics data and our assessments of which pages we most wanted people to see.
[nggallery id=1]
Then it was up to me to fulfill the new specifications. But once the concepts had been wireframed, the implementation went quickly. Although we had to throw out many “nice to have” features we just didn’t have the time/budget for, the crucial upgrades resulted in near-instant improvements to our website usage statistics: average number of pages per visit went up, and average length of time spent on the website increased by over a minute. More importantly, these statistics increased the most for new visitors — which was exactly what we wanted!


III. Activating Our Core

Ephemerisle user group (Matt and Natalie)

The Ephemerisle Community Group helped us figure out what was most important about the event and the website.

We realized that Ephemerisle needed to pull together as a virtual community for the event to be a success. With not much time to spare but great momentum, the most expedient route for us was to gather a group of Ephemerisle community members to give us a sense of priorities. One of the most demanded features of the group, and something we’d been thinking about already, was an official Ephemerisle Forum.

However, with only a few months left before Ephemerisle 2010, we couldn’t expect people to get the hang of lots of new technology, and we wanted the solution to be as integrated into the website as possible.

One intense weekend later, after a frenzy of research and coding, The Ephemerisle forums were born. I used bbPress, integrating its login system with the main site to let people use the same account across the whole website, and then styling the forum with elements from ephemerisle.org.

ephemerisle forum listings

The bbPress-based Ephemerisle forum shares template code with the WordPress-based ephemerisle.org.

The result was a lean, mean, “get ‘er done” kind of forum that provided a natural extension of the blog for discussion purposes and a nexus of interaction especially for newcomers to the Ephemerisle scene. Best of all, bbPress seemed to have a pretty tiny learning curve, and many people took to it readily.

Meanwhile, we still needed to keep contact up in those virtual places where Ephemerislers already congregated. So we rigged the website to send automated updates to our community’s favorite social media sites, Twitter and Facebook, but made sure to spend real quality time there every day.


Addenda

As community manager for The Seasteading Institute, I was responsible for quite a number of the blog posts and the writing and photos on some of the website pages.

I also produced the Ephemerisle Press Kit, and took many of the photos that appear throughout the website.

For various reasons, the 2010 event was canceled, so the front page of Ephemerisle.org directs the reader to look to the community-driven “Not-Ephemerisle” website. I’m maintaining an archival version of the website on my own server.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Email
Print
WP Socializer Aakash Web