ExperienceBlogger

This is the first post in my series on Wireframing. Enjoy!

Before I put pen to paper and begin to sketch out a site or page design, I go through a few key steps first:

1.  Define Your Goals:  Before you kick off any new product, page, etc., spend a few minutes fleshing out the goals for what you’re about to build.  Basically, provide a “reason why” for everything you’re about to design, before you even design it.  Here’s how we typically break things down:

- User Goals:  First and foremost, we focus on the user.  It’s helpful if you can incorporate some user research into your process up front (e.g. interviews, personas, etc.) but many times early stage start-ups don’t have the time or resources. 

Don’t worry, it’s OK to skip the formal/rigorous user research phase when you’re building your first prototype.  But be sure to constantly test and iterate those prototypes against real users going forward (a later post will deal with user testing).

For those who can’t go through with some upfront user research, at the very least try to put an empathetic pair of goggles on and think from your user’s point of view.  It helps to ask questions like:

Why is this site valuable to your target customer?

What  can your site do that helps make their lives better?

How can you make it easier for them to execute those activities?

Once you understand the purpose of the site from the user’s perspective, it’s time to think about why the site is important to YOU!

- Business Goals:  This step tends to be easier for most folks to think through.  You’re basically asking yourself what activities you want the user to engage in that speak directly to your core business objectives.  So ask questions like:

What are the MOST valuable actions a user can take on this site/page? (e.g. purchasing a product, registering for a newsletter, referring a friend, etc.)

What can I do to make it as easy as possible for them to take this action?

How can measure the impact of this action?

I tend to rank my business goals on a per-page basis which then helps me prioritize various visual elements later on.  I also find it helpful to limit the number of business goals per page to 3 (ideally, it’s just 1).  This helps keep my design tight and focus the desired action I want the user to take.

For example, on some of our old pages we used to have multiple calls-to-action.  We simply scattered them about the page and hoped users would click on all of them (newsletter registration, sign-up for a free trial to a product, etc.).  It seems like common sense now, but it took us a while to figure out that we should probably eliminate (or at least conditionally display) the newsletter sign-up area because the most valuable action a user could take on our site was to purchase a product.

2.  Create a Sitemap - I can’t even begin to stress how important this is.

Do NOT start designing a single page until you know how it fits into ALL of the other pages on your site.  Every time I try to break this rule, I end up screwing myself, scrapping whatever design I was working on and eventually I have to start over with a site map.

And please don’t skimp on the level of detail in the site map either - it might seem painful but it pays to not only show groups of pages, but try to show the entire process flow from page-to-page as well.  How does one page transition into the next?  How do all of the pages link to one another?

Once you can visualize a process, you can picture how a user will feel as they’re going through it.  This will help you identify points of friction and you can eliminate them BEFORE you even start designing the page.

Again, a site map is a MUST!

3.  Apply a Framework:  It’s easy to lose your way when you’re building a massive site, operating on a tight budget and a deadline is rapidly approaching.  You tend to cut corners in an effort to move faster.  I’ve been there, I understand.

I’m all for the quick and dirty approach to building a product - especially when we’re talking about an alpha version or MVP (Minimum Viable Product).

But there are frameworks you can apply to your process that won’t slow you down and will insure a design that incorporates both the user and business goals successfully.

In my next post I’ll go over a framework that we’ve come to depend on to quickly get a new page up and running!

Feedback

By the way, please feel free to submit some feedback on this post.  It’ll help me improve on the next one!

For the next few weeks I’ll be writing a series of posts on my wireframing process.  I’m still formulating the overall structure of the series but I think I have a good idea of how I want to break the content up.

But first, I’d like to offer up some “disclaimers” before diving into the series:

1.  I haven’t been “formally trained” in interaction design.  I went to an art high school (Manhattan High School of Art & Design represent!) and have independently studied design in one form or another for most of my life.  I’ve even gone to a number of seminars on User Experience and Interaction Design, most recently the Adaptive Path UX Intensive (which was GREAT btw). 

However, I’ve never had any rigorous, formal training in interaction design.  So I’m sure certain aspects of my process will be lacking relative to folks who have been formally trained and solely focus on interaction design to make their living.

But this is the process that works for me and has allowed to me research, plan and design dozens of sites and applications that are used by hundreds of thousands of people.

2.  I won’t cover interaction design basics.  This series is mainly here to illustrate the framework I use when I’m building a new site or web page.

And while it might not be critical for you to have a firm grasp of user experience and interaction design fundamentals, it will certainly help you in your endeavors if you go over some of these resources first:

• Jakob Nielsen’s 10 Heuristics for User Interface Design (click through on the “See Also” links at the bottom, GREAT stuff in there as well)
• Don’t Make me Think by Steve Krug
• The Design of Everyday Things by Donald Norman

3.  This series will primarily focus on the actual wireframing process, it will not encompass the visual design that comes after the wireframes are complete.  That’s where my expertise stops and I’m smart enough to outsource that task to those who are better suited for it than I.

However, I will include some pointers on how to find a good visual designer and more importantly, how to communication your vision to a visual designer.  This way everyone’s happy with the final product.

So expect my first post in this series in a few days.  I hope someone gets something of value from it!

I’m sick and tired of being forced to download new software or subscribe to a new site every time I want to try out a new web app.  Why can’t more services simply “plug into” my existing online experiences?

Let me be a bit more specific…

Micromobs

So I’m going through my blog roll yesterday and come across this article on Tech Crunch:

Micromobs Launches a Yammer for Friends and Families

Great!  A new “yammer” which is basically a “new twitter” which is basically a new Away message on AIM.  And if I want to use it and want my friends to use it, we’ll all have to sign up for and learn to use yet another service.

I’m already on Facebook, Twitter, Yammer, my company Intranet, etc.  You get the picture.

The last thing anyone needs is another “heavy-weight” way to stay in touch with our friends.  What we need - and what product people need to start thinking about - are “light-weight” services.

Light-Weight Services

To me, light-weight services are applications that don’t require us to learn and adapt to a new user experience.  This isn’t revolutionary thinking or anything, it just makes sense to me.  Why would anyone want to force their users to jump through a new hoop if they don’t have to? The hurdle just becomes higher and it becomes more difficult for the product to gain traction.

There’s just too much unnecessary friction.

So my question is, why couldn’t Micromobs use an existing user experience to provide the same service?

Existing Experiences

For instance, if they set up a service that allowed me to quickly create email distribution lists (e.g. if I email “waynesfriends@micromobs.com” it sends a message to all of my friends on that list, to which they can also reply) I’d be much more likely to give the service a shot.

If you look at the early version of Twitter, the SMS component was a HUGE selling point.  You didn’t have to download a client, you didn’t have to use their website (aside from setup/admin features); all you had to do was send a text message (an existing user experience everyone was familiar with).

The same can be said for the commenting system you see on this blog, Disqus.  The app installs directly into my blog’s UI, sends me e-mail notifications for any comments I receive and then allows me to reply to those comments via email (instead of forcing me to use their website).

Takeaways

Don’t get me wrong, I’m not saying every new application or service should throw away their own UI and try to integrate with Facebook, my email client, etc.  The big product/UX takeaways for me are:

1.  Stick to fundamental UX principles:  reduce friction!

2.  Integrate with existing user experiences whenever possible

3.  Leverage the existing experience as both a retention tool and as an acquisition tool (e.g. the Micromob/email example would be inherently viral)

What services do you use that successfully create light-weight user experiences?