Curated by Carsonified

Learn with Treehouse

Accessibility, CSS3, Design, Django, HTML & CSS, HTML5, JavaScript, jQuery, NoSQL, PHP, Responsive Web Design, Ruby, Ruby on Rails, Tools, UX, Version Control, WordPress, iOS and more

Article 19

Big Wins with Quick Changes

By @ryancarson

22 July 2010 | Category: Uncategorized

Once you've launched a site, the most important thing to do is be ready and poised to completely change it. Reacting very quickly to real-world feedback can turn unseen problem areas into strengths.

I wanted to share a real-world example with you of how we recently did this on a project of ours.

I wireframed the Library page on Think Vitamin Membership and I thought I did a pretty good job. It was going to be bold, clear and constantly updated with new content.

I chose to use large blocks for the videos because I felt the visitors attention would be drawn to the two latest videos, which was the most important goal of the page (I believed at the time).

I chose to list the Course categories down the right side with an accordion-style menu. We also had the ubiquitous search bar as well.

Here’s the wireframe (which I did in Mockingbird) …

Wireframe

Wireframe of Library page
View larger

Completed design

Library page screengrab
View larger

Listening and Making Immediate Changes

The problem is we starting immediately getting a lot of feedback from people saying things like …

  • They couldn’t find new videos that were posted
  • It appeared as if the page never changed
  • It wasn’t obvious the breadth of courses we offered

The first thing I had to do was squash my ego and admit there was an immediate problem with the design. This wasn’t Mike’s fault (our designer). The problem was the original wireframe.

So Mike and I sat down and I explained the feedback and how I thought we could fix it. I didn’t bother to do a formal wireframe – we just sketched a few things on a piece of paper. Here’s the new design (which you can see live here):

Screengrab of Library page

The specifics

The new videos button on screengrab

This ‘New Today’ button immediately makes it clear this video has been uploaded today.

The new this week button on the library page

This ‘New This Week’ button again, makes it clear that the video has been uploaded very recently. The color shift from green to orange also visually denotes this difference.

The new course nav at the top of the page

We added a new simple horizontal menu which lists our courses. It’s very obvious now which courses we offer, instead of hiding the list away on the right side of the page.

Twitter and RSS buttons

We added a simple way for people to keep up to date on all the latest videos by bringing the Twitter and RSS feed to the top of the page. This was previously tucked away at the bottom of the right hand side of the page. The RSS feed is pumped to the Twitter account so it’s automatically updated.

Done in a Day

The greatest thing about this change is that it took about 24 hours to do. Mike did the design work in about eight hours and then our developer coded it up in about three hours.

I believe the important take-away here is that this re-design didn’t take long. We didn’t have a drawn out process to get this done. We listened to our users, reacted quickly and deployed the fix.

Are there any reactive changes you can make to your site today?

Follow @thinkvitamin on Twitter Please check out Treehouse

Other Posts You Might Find Interesting

  • Sorry - No Related Posts Found

Comments

  • http://twitter.com/digideth B. Moore

    2 Thumbs UP!

    The ecommerce site I work for is about to roll out a huge redesign…

    I will be sharing this post in the next meeting we have and maybe then they will listen to reason.

  • http://garethpoole.com Gareth Poole

    Love the new design!

    It’ll be cool to see how the design has improved the experience for your users; do you have any measurements in place to keep a tab on how the new design performs?

  • http://sharpenr.net Jaan Orvet

    Hi Ryan,

    Curious about your view on testing wireframes and comps before committing, and whether you did any testing on this project. I’m guessing with a quick turnaround ability on changes it’s not strictly necessary.

  • http://mikekus.com Mike

    Hi Jaan,

    We did do user testing on this project here at Carsonified HQ with some helpful volunteers. We took the user testing to a point where we knew getting it out in the public domain was the best way of getting real feedback that would help us fine tune the site. Our philosophy with this site is that it’s never finished. We’ll always be trying to improve the experience.

  • http://carsonified.com Ryan Carson

    This was one of those changes that we just knew we needed to make. We were receiving enough negative feedback that it was obvious it needed changing without any testing.

    Regarding my view, in general, towards testing wireframes: I think it’s a great idea to run them by your followers on Twitter, for a very informal sanity check. It’s not a proper test, but usually it irons out a few obvious things you’ve missed.

  • http://carsonified.com Ryan Carson

    This was one of those changes that we just knew we needed to make. We were receiving enough negative feedback that it was obvious it needed changing without any testing.

    Regarding my view, in general, towards testing wireframes: I think it’s a great idea to run them by your followers on Twitter, for a very informal sanity check. It’s not a proper test, but usually it irons out a few obvious things you’ve missed.

  • http://carsonified.com Ryan Carson

    We don’t have any measurement in place for this change. As I mentioned to Jaan below, it was obvious the change needed to be made, and that the UX would be massively improved, just based on the feedback.

    However, in the future, we’re going to try to do more formal A/B testing.

  • http://angusbradley.com Angus Bradley

    How do you find mockingbird? Is this a change from balsamiq?

  • http://carsonified.com Ryan Carson

    I like Mockingbird. It works offline and it’s free, so it seems great to me. It’s built with Cappuccino so no need for Flash.

  • http://www.nunomedia.com Nuno

    Amazing. Great work guys. It made me see straight way… I have a suggestion that it can be good with what just happened. I am loving the videos, I was expecting more things that is hard to find on the net: web typography, iphone… etc. (I am loving the design ones, user testing, html e-mail, etc amazing). But after a certain time you guys will have to make something new. And my suggestion would be make case-studys of examples (maybe not real world like this one) but it would be good to see examples involving different technologies and experts being solved in depth. Well done…

  • http://www.oscommercemanuals.com/ Kerry Watson

    Great post — sounds like incorporating immediate user feedback the day after a launch would be an excellent addition to the project schedule! You *always* know more after a launch than you did before.

  • http://carsonified.com Ryan Carson

    @Nuno – Thanks for the feedback – much appreciated.

  • Ryan Carson

    Totally agree – there are some things you just can’t see until you launch and your users point them out :)

  • http://www.jonwinstanley.com Jon

    I can totally relate to the process you have gone through here. At first glance I would have thought the first design was a good one too, but the second iteration is obviously better.

    Reacting to your feedback so quickly has made a much more engaging site for your users.

  • Ryan Carson

    Cheers – that’s what we were aiming for! :)

  • Giania

    Firstly – I LOVE Mockingbird. (I can’t remember who first turned me onto it, it may have been you all.) I’ve used it to fly through a couple wireframes now. I had tried Balsamiq before but it felt kludgy by comparison to this – which may be a change in me rather than a quality of Balsamiq. It’s definitely earned a permanent spot in my toolkit.

    Secondly – Skitch seems to be letting you down in the image showing department. :( I cannae see the meat that compliments your articles potato-y goodness.

  • Ryan Carson

    Hey Giania – The images look OK now. Are you still having trouble? Thanks for the heads up!

  • http://sharpenr.net Jaan Orvet

    Mike – Cheers, thank you. Sounds like the right approach.

  • http://sharpenr.net Jaan Orvet

    The Twitter idea is good, I like that.

    (The user testing I meant was pre the initial launch; poorly phrased question on my behalf.)

Badges for Treehouse

Treehouse

Learn iOS, Rails, CSS3, jQuery, Node.js, HTML5, UX and more in less than 8 minutes per day. New videos added regularly. Sign up today and get a free Web Design Toolkit.

Ads Via The Deck

Think Vitamin Radio
Episode #34: Amazon Fire and Responsive Roundtable

Check out our bi-weekly radio show. Covering the hot topics on the web.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Download Podcast as mp3

Advisory Board

The Think Vitamin Advisory Board in place make sure that you receive the best content possible.