22 July 2010
Big Wins with Quick Changes
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
Completed design
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):
The specifics
This ‘New Today’ button immediately makes it clear this video has been uploaded today.
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.
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.
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?
Enjoy this article?
If you liked this article, feel free to re-tweet it to let others know. Thanks, we appreciate it :)
We love .net Magazine
We're big fans of .net so they've hooked us up with a rad deal: Save 45 percent on your subscription.
B. Moore
# July 22, 2010 - 7:02 am
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.
Gareth Poole
# July 22, 2010 - 7:42 am
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?
Ryan Carson
# July 22, 2010 - 9:53 am
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.
Jaan Orvet
# July 22, 2010 - 7:56 am
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.
Mike
# July 22, 2010 - 9:38 am
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.
Jaan Orvet
# July 29, 2010 - 8:48 pm
Mike – Cheers, thank you. Sounds like the right approach.
Ryan Carson
# July 22, 2010 - 9:52 am
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.
Jaan Orvet
# July 29, 2010 - 8:50 pm
The Twitter idea is good, I like that.
(The user testing I meant was pre the initial launch; poorly phrased question on my behalf.)
Angus Bradley
# July 22, 2010 - 9:56 am
How do you find mockingbird? Is this a change from balsamiq?
Ryan Carson
# July 22, 2010 - 10:24 am
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.
Nuno
# July 22, 2010 - 11:08 am
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…
Kerry Watson
# July 22, 2010 - 12:00 pm
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.
Ryan Carson
# July 22, 2010 - 2:13 pm
Totally agree – there are some things you just can’t see until you launch and your users point them out :)
Ryan Carson
# July 22, 2010 - 1:19 pm
@Nuno – Thanks for the feedback – much appreciated.
Jon
# July 22, 2010 - 2:18 pm
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
# July 22, 2010 - 6:06 pm
Cheers – that’s what we were aiming for! :)
Giania
# July 22, 2010 - 6:35 pm
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
# July 23, 2010 - 3:50 pm
Hey Giania – The images look OK now. Are you still having trouble? Thanks for the heads up!