Since I launched Protagonize back in late December of 2007, the site has had a pretty distinctive look and feel — something we’ve all become comfortable with, and which has slowly grown to represent much of the site and community’s ethos, or “vibe” if you prefer.
Over the course of those three-plus years, what started off as a rather simple design has evolved and stretched to fit new content and an enhanced set of features. What worked well back in the simpler days of the site has become a bit cumbersome over time. To the point where I wonder if our once-simple interface is now more confusing and messy than useful.
I’ve spent a long while thinking about how we could refresh and redesign an interface that needs to encompass a significant amount more features than it used to house. On top of that, I’ve considered a lot of new advances in technology since early 2008, from both the browsing side and from the site development side of things.
With that in mind, along with the requests and thoughtful suggestions of thousands of Protagonize users since the site’s initial launch, it’s time for an overhaul. And today, to whet your collective appetites, I’ll be giving you a sneak preview of what’s to come.
So, What’s Changing?
These mockups (they’re not hooked up and functional yet, but don’t despair; they shouldn’t change too much before I take them into production) represent over a year’s worth of consideration and analysis. All of our existing functionality should still be available, although likely moved around and re-organized.
With this new design, I’m targeting and incorporating the following:
- Enhancing readability and usability to make using Protagonize a more enjoyable experience
- Making author profiles and story browsing more clean and professional looking, while retaining much of the site’s whimsy and colour palette
- Adjusting to general usage patterns around the site
- Revamping clunky behaviours to make them more functional
- Tightening up areas that take up too much visual real estate
- Cleaning up the site’s information architecture
- Taking advantage of the latest web tech (HTML 5 & CSS 3) to reduce the weight and download time of the site’s pages and improve performance
- Suggestions and feedback from our members
- Keeping mobile device interfaces in mind with a (mostly) touch and tablet-friendly design
I know that I’ve been taunting and tantalizing our members with the suggestion of a redesign for quite some time now, but it took me a while to figure out how exactly I wanted to go about it. I want our authors to be proud of the way their profiles and their works are displayed on the site, and at the same time I want the site to be a more attractive and enticing place for authors to post their work, so there was some significant deliberation involved.
With all that awesome stuff in mind, may I present you with two key portions of Protagonize 2.0…
The Author Profile
(Click the thumbnails to view the full versions.)
This is the revamped author profile. Some things of note (among many):
- This is the default (bio) tab view — your activity feed, works (sortable/filterable), faves (now visible to everyone) and fans/friends are displayed on separate tabs, instead of all on the same page.
- The general look and feel is much cleaner. More professional, easier to read, but still fun. :)
- The top navigation has been totally revamped, although I did show a preview of this in a prior screenshot. The right-hand column is also gone.
- The new “Explore” top navigation item will encompass the old Read, Authors, Groups and Activity menus. Don’t worry, it’ll be awesome.
- Way bigger profile pics!
- Major profile actions are now consolidated in the ribbon beside your profile pic. If you’re looking at your own profile, you’ll see an Edit Profile button instead of the “Become a fan” button.
- Many of the profile action buttons have been consolidated into the little options dropdown on the right-hand side. Less clutter!
- There is a new “about me” field on the left where you can put a short snippet about yourself, or your current status, or whatever else you’d like.
- Your personal quote (which remains optional) should be a little more obvious.
- Ads are a bit more subtle. Note: They’ll be hidden to others on your own profile if you’re a subscriber (and to yourself, across the board.)
- Your participating groups listing has been overhauled pretty significantly on the bottom left.
- Under your gender/age and location, you’ll see a list of links. You can control those, adding your Twitter, Facebook, blog, or IM link(s) in there (in this case, it’s a sample MSN handle.)
- I’ve decided to highlight only specific author stats (under the “About” block on the left) — other stats will be visible on a separate page (with advanced stats for subscribers.)
- Commenting (the form) and the comments display are much cleaner and easier to read. I’ve also added the option to up/down vote profile comments. Down-voted comments are hidden below a certain threshold (configurable) and highly rated comments get a nifty little “popular” flag.
- The page footer is a lot cleaner/tighter and less bulky.
Note: You’ll notice that I’m hinting at a couple of new areas that I’ve promised in the past — author blogs and achievements. These probably won’t be ready right away when the new interface launches, but they’ll be coming later on.
The Story/Reading View
This is the overhauled reading view. Things to note:
- I’ve kept much of the same styling from our new profile pages, to keep things consistent. You’ll notice that our highlight colour is now green (which should be familiar to everyone who uses the current design) instead of the pale yellows of the author profile.
- Much cleaner reading area. A wider column, black (well, dark grey) text on a white background, and a larger font and additional leading should be much easier on the eyes.
- Pages are still tailored to read best at approximately the length of a normal page of text in a typical novel, somewhere around 250-300 words.
- As with the redesigned author profile, the most commonly used actions will be available front-and-center in the “ribbon” area. These primary actions will vary depending on if you’re looking at one of your own stories, or someone else’s.
- I’m showing the expanded “options” contextual menu on this screen, just so you can see how it works. I’ve migrated many of the lesser-used options when reading into this new menu, along with the contents of the old Story Options menu.
- Page markers now have a much more “e-reader”-style feel. Yes, I was (blatantly) inspired by the iPad’s Kindle and iBooks apps, but it makes sense, works nicely, and it’s a lot more obvious than our old marker system. The new page markers will work exactly the same way, except they should be a lot more user-friendly — the view above is of a “marked” page, as per the green page marker on the top right. When a page isn’t marked, the marker will be greyed out and clickable.
- All references to “branches” and “chapters” have been consolidated into simply “pages“. This should make things a little easier to figure out for new members, and less clunky throughout the rest of the site. It also eliminates the implicit suggestion that each page on Protagonize should be as long as a full chapter in a novel. Note: The way different story types work (addventure vs. standard) will obviously remain the same.
- I’ve added a text sizer widget to the top right. The other icons there let you browse markers you have in the current story or work, get the story’s RSS feed, or navigate back in the story you’re reading.
- Story details and the currently selected Creative Commons license are displayed at the bottom of the right-hand column. As you can see, all of the old functionality is still here and available, just re-organized to make more sense.
- The follow-up branch titles (at the bottom of the current story page) are a little less clunky and more obvious calls-to-action.
- Commenting is cleaned up as per the updated styles on author profiles.
As I mentioned, I really intended the overhauled reading interface to be much more tablet-friendly. I myself spend a lot of time looking at the current site on my iPad, and I’ve been pretty disappointed with the usability from a reading and interface-usage perspective. This new approach should be a much more pleasant experience on mobile (particularly tablet) devices. Try viewing the large version of the thumbnails above on a tablet, you’ll see what I mean.
More to come…
As I mentioned, this is just a preview. You’ll notice that I haven’t shown you the revamped homepage, because I’m still working on it. Things in these mockups will probably change a bit before I officially launch the new interface. I may move stuff around, or change how things work on a minor scale. But most of it is now set in stone, so things won’t change too drastically.
And as for the question I’m sure you’re all dying to ask: timing. As game developers love to spout, “when it’s done!”
Honestly, though, it should be sooner rather than later. Think weeks (well, a few), not months. I’m pretty busy these days, but I have a lot more control over my schedule than I did three months ago, thankfully. I want to see these updates live as much as you do (if not more. :)
I’d love to have your feedback on these two mockups — love it? Hate it? Let me know. I’ve already shown the author profile redesign to our beta group and the feedback was overwhelmingly positive.
Thanks for reading! Hopefully we’ll see a similar response from the rest of our users.