A sneak preview of Protagonize 2.0

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

Protagonize: Author Profile

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

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

This entry was posted in General, Previews, Site updates and tagged , , , , , , , , . Bookmark the permalink.

38 Responses to A sneak preview of Protagonize 2.0

  1. Verse47 says:

    Looooooove it! I’m so excited. Well done, Boss!

  2. Mark says:

    The new style is nice and clean. If the original size of the pics are the actual size, then I love it even more. The present story text on Protag is a little small for my taste.

    • Nick says:

      Yup, the size shown in the expanded views (clicking on the thumbnails above, and making sure you’ve viewing them at 100% size in your browser) is actual size.

  3. Elorithryn says:

    So when this goes live do we get to tag stories to groups then? *grin*

    :} Elorithryn

    • Nick says:

      Not tag, but submit to groups, yeah. That’ll be live much sooner than the new design.

      Group submissions are actually working right now on my dev environment, I just need to finish testing possible ways of breaking stuff before I put it up in production. :)

  4. emptyanima says:

    Wow… they look so professional! I’m really looking forward to when this design takes over.

    ~ emptyanima

  5. HannaKingdom says:

    Looking good bossman :D I especially like the new author profile designs :)

  6. Delorfinde says:

    Aahhh…not sure if I like it or if I’m too attached the old one! I like the page themselves, but I’m not sure about the header. Perhaps if you put the page link thingies on the right, where they are now? That would probably confuse me less.
    But this way, I won’t be able to show off to people who can’t use the site because I’ll be stuck too! :/
    I think it will be cool once it’s there though. I’m just too attached to the old one, ha ha.

    • SumnerzAngel says:

      I agree, I’m going to miss the yellow of the author box and the green story background. I know changing it makes it easier to read (although reading on green was perfectly great for myself), but it makes me feel that Protagonize is losing its originality, by becoming white with black, xD

  7. Miserabilia says:

    Oh gosh, I can’t wait for the “Export story as eBook” option to come into effect. I have a lot more time to read things on my Kindle than on my computer, and well… Suffice it to say, I’m very excited!

    • Nick says:

      Hi Ruthie – for what it’s worth, you can already copy over PDFs generated from the site to your Kindle or iPad if you want. I’ll just be adding an additional option, probably exporting to ePub format (and potentially a “Send to Kindle” email option too).

  8. Rachel says:

    Are you adding the cool comment stuff (thumbing up/down, flagging popular ones and hiding bad ones) to story comments too, or just profile comments?

    • Nick says:

      The comment changes are being added everywhere — stories, author profiles, and I’ll even be updating discussion comments to match the new style.

  9. SpookOfNight says:

    Wowee, these look fantastic! Sooooo looking forward to playing with all those new features. You are a true god of IT stuffs Nick!

    Now … could someone help me find my bottom jaw?

  10. Skooch says:

    I love it!! I sooo cannot wait until all of this comes into effect! It looks so nice and smooth! I love that it will be easier to read as well! :D

  11. Immzie says:

    I really like this! And from me thats good!
    I cant wait for it to happen. the only proplem I have is I struggle to read black on while- but I can cope with that!

  12. Euphrates says:

    Looks great! Can’t wait to see it in effect. :D

  13. Krystal says:

    I love how it’s much more organized, simple, and keeps some parts of the current Protagonize look.

  14. Hannah says:

    I love the new format layout! Looks clean and organized, and makes it easier to navigate. Thanks fos all the hard work you’ve put into it!

  15. Tennyson says:

    Love the new look. I’ve always like clean and elegant. This does get a much more polished look and less busy than the current interface. It actually reminds me of wordpress which I have my author’s blog on. Maybe once we finish this I’ll point part of it here. Sweet! Can’t wait to see it in action. Do you have a roll out date?

    • Nick says:

      @Tennyson No set date just yet, I have to get a couple of other things done before I can work on building out the new UI. But as I mentioned at the end of the post, it won’t be a super long ways off, probably before mid-summer.

  16. CurasiTayo says:

    And I’ll join the masses and say I love it too! I was a bit sad when I first started reading about changes as I quickly grew attached to this site despite my first initial qualms about the readability and layout. I have grown to really love protagonize and am glad to say that I think it’s only going to go from “that cool website I use” to “the awesomeness that is protagonize”, at least, in my head.

    Hope the brill changes come about soon, can’t wait. (No pressure there at all!)

    ~Cura :D

  17. Rissi says:

    Well, I can’t say I love the new format. I’m just too attached to the old one. I always loved that instead of white, protag uses yellow and green for backgrounds. But, I guess I can live with it. After all, It’s still a site where I can interact with other authors and publish my stories so I can get critiquing. This is just a suggestion, but maybe you could have an option to display the origonal site for people like me who have gotten attached to the format it has now.

    • Nick says:

      Sorry @Rissi, I understand your perspective, but keeping the old site would require double the maintenance from my end — the two interfaces are pretty significantly different. One of the reasons I’ve moved away from the green and yellow backgrounds to using those as highlight colours in the sidebars is that they are pretty hard on the eyes for the vast majority of folks when reading for long periods of time, including myself.

      On a site where reading is of paramount importance… well, I’m sure you see what I’m getting at.

      As a single developer designing, building and operating this site, I can’t afford to keep two completely different user interfaces running in order to please a handful of people. It’d effectively mean I’d have to do nearly everything on the site twice instead of just once when building new features, which would mean the site — as a whole — would get 1/2 the attention and updates it gets now… I’m pretty sure no one would enjoy that (in particular, me.)

      It just wouldn’t make much sense considering how strained for time and resources I already am when dealing with Protagonize. I’m sure you’ll learn to like (if not love) the new interface, too. Sometimes people are only afraid of change until they realize it’s an improvement on how things worked before. :)

  18. Anthony says:

    Wow. Brilliant. Loving the new look.

    A little suggestion:

    Before I found Protagonize, I used a different site that was rather inferior to this one. Though, they did have a few features I found very interesting and I think you could implement into Protagonize. One of them being, drafts. You have drafts on Protagonize, but you are not capable of putting up drafts for each individual chapter. One thing I like to do is work on a few chapters, post them as a draft, then edit them for a little while. Once I think they’re perfect, I post them each one by one.

    I would very much like to do that here on Protagonize.

    Also, this one is a little more difficult:

    When reviewing on the other site, one way of critiquing was to press a single button to load the entire story into the comment. From there, you could highlight any part of the story you want red, blue, or green (you could highlight typos red, and then write the correct word in blue, for instance). And you could add notes and such. I found this particularly helpful when receiving critiques from people, and it was so intuitive and easy it made critiquing others work much more simple and fun.

    =) I would LOVVEEE to see both of these things someday work their way into Protagonize.

    Oh! One last thing (almost forgot): On Protagonize, each chapter is counted as a page. But in actuality, a chapter can be a LOT of pages. I know that on Protagonize every chapter is technically on one page, but when you put it into a PDF file it definitely isn’t. And this also makes our accomplishments which currently show on the right of our profiles seem very feeble in comparison to what they truly are. For instance, if I wrote ten chapters that were each ten pages long, that’s 100 pages of writing, yet on my profile it will only say 10 pages.

    Anyway, I’m really excited about this new look!! :D Keep up the good work.

  19. xkatanaXIV says:

    Amazing :) Looking forward to this~

  20. Pingback: Submitting works to groups is live! | The Protagonize blog

  21. JKBrennan says:

    Can’t comment on the visuals but easy clean navigation and everything in its place so to speak sounds perfect to me. Being forced to use the mobile sites, like I do on facebook, is not fun so I am glad you are sticking with just one. Looking forward to it although I feel I should hold off on memorizing too much before the change. I don’t mind learning a new site, but perhaps not twice in such a short time. :D

  22. Elizabeth says:

    I really like this!

    I am excited to use the new website!

    It looks professional, and sort of like a blog, I have a few question though

    Will you be able to make it possible to illustrate our works? Like add a picture under or above, which ever we choose.

    and the advertisement should look more appetizing to people on our facebook or twitter.

    And is there a way to fix the spell check? I mean I learned how to use the shift to capitalize the “I’s” but I can’t fix the words. I am a terrible speller and I think it would help to just be able to fix what we mess up quicker.

    But other then that, This is the best writing website in the world! I have yet to find one that is better! Keep up the good work!

  23. Elizabeth says:

    What if you could make role play a little more easier.

    Like a page

    It could be designed like a script, and people just add onto it like commenting, but it is role playing..

    People could start their idea on peoples wall, or a group. Then they start their role play page.

  24. Jsimmons says:

    When will this be up and running? Its been several months now, and I’m beginning to wonder if this change will ever take place.

    • Nick says:

      @Jsimmons It’s currently under construction, but it’s a pretty long and exhaustive process with only 1 developer working on it part-time (me).

      It will be live before the new year, however.

      I’ll be posting some screenshots of the new interface over the next couple of weeks, leading up to the launch.

  25. LouisaJo says:

    Is this still coming???

  26. Mycayla says:

    I’m really looking forward to this, I cannot wait until it’s up and running. I love the site, and what it’s all about. Keep up the good work!!!

  27. Pingback: Happy 4th birthday, Protagonize! | The Protagonize blog

  28. Jsimmons says:

    I’m so excited for this, though I do have one question.

    Will it be easier to write chapters/pages on a tablet with this new design?

    • Nick says:

      @JSimmons It most definitely will. The new site’s editor works properly on newer tablet operating system releases, including iOS 5 and the latest couple of releases of Android. The editor on the current site is incompatible with iOS 5, hence the editing issues you see right now.

  29. Wolfe says:

    Any idea when this will be out?

    and ive just one thing to ask, would it be possible to find out who has rated your works?
    i find it very annoying if people rate work and dont leave a comment to explain their rating and i think it may help if i could get in contact with whoever rated it to find out how i could improve on the particular page. this will also help in the case that you get a particularly low rating and re-do the work so you could ask the person who left the rating to look back over your work and possibly change the rating they left

    i understand this may be very difficult to incorporate into the code of the new site buit im sure everyone would greatly appreciate it :)

Comments are closed.