Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 10 2014

16:57

How To Create A Self-Paced Email Course


  

When I realized I had written what seemed to be a course (i.e. not my usual article or book), I was left with a sense of panic. There are so many options for running an online course, and all of them seem slightly confusing or time-intensive to set up.

Then I remembered the autoresponders feature in my newsletter application (I use MailChimp, although every newsletter software has it). I could trigger lessons with autoresponders and deliver course material to where most people spend most of their day: the inbox.

Another problem was that the course was about writing a book, and some of the lessons were slightly onerous — like “Write a first draft.” So, setting a fixed time delay wouldn’t work because some people complete things like that much more quickly than others.

Instead of automatically firing off each lesson after a set amount of time, I created a series of lessons via autoresponders that fired only when the previous lesson was marked as finished. That way, I got to deliver each new lesson only when the student had finished the previous. This method does not require you to configure any website, plugins or additional software (beyond setting up a mailing list and creating pages on your existing website, which you probably already know how to do).

I made my own course, Write and Sell Your Damn Book, free for a few reasons. First, I was able to bring some sponsors on board to give me enough money to make it worthwhile to create and set up. Secondly, I felt that the course material should be available to anyone, on any budget, who is writing a book.

Thus, the course made money before it launched, but the downside is that it made a fixed amount of money. I set up additional (albeit minor) revenue streams for it — affiliate links on Amazon to recommended books on the same subject, links to my own paid books, as well as the course in Kindle format, just in case people wanted to read the material all at once.

Using the method outlined below, I created a self-paced email course that had over 1,000 registrations in the first 24 hours, and almost 2,500 in the first week. There are other ways to do this using MailChimp, such as triggering the completion of a course with a URL, but this is how I set up mine.

1. Create A List

This list is only for people who will take your email course. Make sure the publicity settings are set to non-public and non-archivable (otherwise, people will be able to share the lessons with whomever they want).

Check “No, my campaigns are not public,” and uncheck “Activate the archive bar.”

When creating autoresponders, ensure that you remove the “View this campaign in a browser” link, to further discourage shareability. To take things one step further and make sure only subscribers see some or all of the course’s content, read up on conditional merge tags.

2. Match The Colors And Fonts In The Course Material To The Registration Process

You’ll find these by going to “Signup Forms” and then “General Forms.” Match the fonts, colors and logo of the course’s website for a consistent user experience.

3. Select “Send A Final Welcome Email”

You’ll find this option in the drop-down menu on the “Create Forms” page; it will be automatically selected, unless you’ve unchecked the box. Add text to this email (scroll down to edit the contents), informing users to “Click the completed lesson” button in each lesson to get the next lesson.

Later, we’ll get into how to set this up, but essentially each lesson’s email will have a link that users can click when they’re finished to notify MailChimp to deliver the next lesson.

Also, in this final welcome email, let users know when the first lesson will be delivered.

4. Set Up The First Lesson And Autoresponder

Go to “Autoresponders” and then “Create autoresponder.” Select the entire list to be the recipients. On the next page, the event that triggers this autoresponder is “Subscription to the list.” Make sure that “Also trigger on list import” is checked if you want to use Twitter cards or if you will be charging for the course (more on this later).

Lesson One
(View larger version.)

Choose whether to send it within the hour or at another time and date. On the set-up and campaign information page, give the campaign a subject line and make sure that, under “Tracking,” “Goal Tracking” is checked — this is important because it will trigger the next autoresponder lesson.

5. Set A Goal For Your Campaign

A goal is simply a URL that you add to the lesson. For my own email course, I created a few pages on my website that thanked the user for completing the lesson. For example, I added a button to the campaign for lesson 1, reading “I have completed this lesson” and linking to http://mydamnbook.com/lessons/lessonone.

The URL may be anything, but if you are setting a reminder email (more on this later), then the URL must contain the same folder — in this case, lessons. If you use WordPress, this is simply the parent page, and each individual lesson would be a child page of the parent, /lessons/.

These pages that live on your website are important for firing off autoresponders, as well as for letting the user know that a lesson has been completed and that a new one is on the way.

A good marketing strategy is to add some social engagement to the completion page for each lesson, such as “Tweet that you’ve finished lesson 1,” with a hash tag for your course or sharing buttons, so that users can let others in their network know about the course and where to sign up.

6. Set Up Subsequent Lessons By Creating A New Autoresponder

Set the entire list as the recipients. On the next page, set “Specific link in the campaign is clicked” as the event to trigger the autoresponder.

Lesson Two
(View larger version.)

Then, select the previous lesson. If you’re creating lesson 2, then select lesson 1’s autoresponder from the drop-down menu. Then, choose “Select a link from your campaign” and select the URL that you used for the button that tells the user they have completed that lesson.

Set the autoresponder to send either within the hour or at a time and date of your choosing. I always pick “Within the hour,” so that the user gets the next lesson fairly quickly.

Make sure to track goals for every lesson you create (otherwise, the URL clicks won’t be tracked by the following lesson).

To create lesson 3, you’d follow the steps above but would select lesson 2 from “For what campaign” and the lesson 2 completion URL for “Select a link from your campaign.” And so on, until you’ve added all of the lessons.

7. Set Up Additional Emails (If Needed)

In addition to the lessons, you may want to send out a different type of email a day or two after the final lesson has opened. The email could include additional resources, an “About the author” section, or perhaps a review of the course (if you’ve got one).

Select “Send to the entire list” for the recipients.

For the autoresponder, select “Campaign is opened” as the event to trigger the follow-up email, and select “For what campaign” as the final lesson (via the drop-down menu). Then, select the amount of time for “When the autoresponder should be sent.” If the email is a review or list of resources, then sending it a day or two after makes sense, while the lessons are still fresh.

8. Set Up A Reminder Email

Because the course is self-paced, people won’t get the next lesson if they forget about the email for the current lesson, so setting up a course reminder autoresponder is another good idea.

From step 5, if the same folder is in the URL for each lesson (in this example, /lessons/), then it’s simply a matter of creating a new reminder autoresponder that sends to a new segment of the list.

reminder
(View larger version.)

To do this, start an autoresponder, select “Send to a new segment,” then pick “Subscribers match,” and then “Any” from the drop-down menu.

In the next drop-down menu, choose “Goal Activity,” then “Doesn’t match,” and in the field type in the folder URL of all lessons (in this case, lessons) (don’t type the full URL or any slashes).

On the next page, select “Subscription to the list” as the event to trigger the autoresponder.

When setting the autoresponder, estimate a reasonable time which people would take to complete a lesson. For my own list, I’ve set the reminder to “45 days” after a user has stopped clicking anything.

Remind people that they’ve signed up for the course and, if they’ve forgotten about the lessons, to go back and read the current one (and click that they’ve finished it once they have). I also offer helpful suggestions on how to get over being stuck in the writing process.

Integrate With Payment Solution (Optional)

If you want to charge for the course, you will need to collect the user’s money before the course lessons start firing. I use Gumroad to sell items online; while it doesn’t directly integrate with MailChimp, one easy additional step makes it happen.

Gumroad
Giving your course a price can be done in one easy step. (View larger version.)

In your Gumroad account, click “Add a Product,” and then select the product. Where it asks for a file, create and upload a PDF of the text in your “Final welcome email” that tells people they’ve successfully signed up for the course and will get the first lesson within an hour.

Give it a price, and then “Add” the product. The next screen lets you upload a graphic (or video) and a description of the course. When it’s ready, click “Publish.”

To add an incentive (for example, to reward users with a discount for signing up early), click on the “Options” tab and create an offer. Otherwise, you’re done!

To integrate with Zapier, create a secret “free” offer, which you can use to finish the process, and delete it when you’re done.

Next, to connect Gumroad to MailChimp, sign up for an account with Zapier. Free and paid options are available. If you expect fewer than 100 users, go with a free account. Otherwise, it’s fairly cheap, and it scales. If 50,000 people are signing up a month, then the $99 per month price tag is well worth it.

Zapier
By connecting Gumroad to MailChimp you can automatically add purchasers of your Gumroad product to your course’s mailing list. (View larger version.)

Once you’ve got an account, click “Create a Zap.” The trigger service is Gumroad, and the action service is MailChimp. For “Choose a trigger,” select “New sale.” For “Choose an action,” select “Add subscriber,” and then continue. From there, follow the steps to connect both your Gumroad and MailChimp accounts to Zapier.

Next, choose your “Product” (which would be your course if you have more than one product in Gumroad), and then continue. Then, choose which MailChimp mailing list to put subscribers in. When you click on “Insert fields” in the email section, Zapier will ask you to create a new purchase of your product. Go back to Gumroad and do that (using the free discount code), and continue with the process. Make sure to select “Email” in the email drop-down menu.

Also, select “No” for “Send a welcome email” because subscribers will get the PDF as a download immediately upon paying. Click “Continue,” name the Zap whatever you’d like, and turn it on!

Now, whenever someone purchases the Gumroad product for your email course, they will be automatically added to the course’s mailing list and will start receiving lessons.

And that’s how you create a self-paced email course using MailChimp, Gumroad and Zapier.

(al, il, ea)

Credits for the image used on the front page: zapier.


© Paul Jarvis for Smashing Magazine, 2014.

February 03 2014

14:30

Designing Digital Strategies, Part 1: Cartography

As digital products and services come to comprise an increasingly important part of our everyday life, the division between the digital and the physical begins to blur. We can, for instance, see a washing machine on TV, read reviews of it online, purchase it on our phone, and have it installed by our local shop—all without leaving our computer. The sum total of these processes functions as a single, continuous experience. Designers can more prudently frame the experiences they create by incorporating ecosystem thinking into their process.

In 2011, the newly appointed CEO of Nokia, Stephen Elop, wrote:

The battle of devices has now become a war of ecosystems, where ecosystems include not only the hardware and software of the device, but developers, applications, ecommerce, advertising, search… location-based services, unified communications and many other things. Our competitors aren’t taking our market-share with devices; they are taking our market share with an entire ecosystem. This means we’re going to have to decide how we either build, catalyse or join an ecosystem.”

An ecosystem is the term given to a set of products, services, and people that function together in a symbiotic way. As an interaction designer working at a consultancy, I often meet clients who want to integrate all sorts of functionality into their digital solutions—email, Facebook, SMS—without really considering if that inclusion will actually add value for their users. Rather than unilaterally connecting all possible digital channels and launching a “family” of related products and services, designers need to determine ways in which ecosystems can act together in service of their client’s business goals.

Nike’s “plus” products work together to create something greater than the sum of their parts.

Designers do this through the creation of a digital strategy. Despite the fact that numerous voices suggest their creation, however, the actual details of creating one remains elusive. That’s where this two-part series comes in. In the first part we’ll review the elements that comprise an ecosystem as well as how to create an ecosystem map (a useful tool for facilitating a shared vision) by way of digital cartography. In the second part, we’ll see how ecosystem maps can be used to to develop digital strategies, helping companies fit together the various pieces that shape their digital puzzle.

The basics

The word ecosystem comes from biology wherein it describes a network of interacting organisms and their physical environment. From a technological standpoint, though, an ecosystem is better described as a network of people interacting with products or services. As Dave Jones defines them, ecosystems include:

  • users,
  • the practices they perform,
  • the information they use and share,
  • the people with whom they interact,
  • the services available to them,
  • the devices they use, and
  • the channels through which they communicate.

Ecosystem thinking, likewise, is the inquiry method used to analyze and understand ecosystems, both the problems they pose as well as the business opportunities they might present. Instead of focusing on a single product or service, however, designers who practice ecosystem thinking evaluate user behavior at the intersection of various inflection points. They ask:

  • Who are our users?
  • What practices do they perform?
  • What information do they need? (and where do they seek it?)
  • With whom do they interact?
  • What services are available to them?
  • What devices do they use?
  • Through what channels do they communicate?

Answers to these questions provide designers with all of the raw data they need in order to better understand the ecosystem in which they’re working. Turning that data into actionable information is the job of ecosystem maps.

An ecosystem map is simply a graphical representation of the relationships examined via ecosystem thinking. Ecosystem maps are closely related to other diagrams with which designers are likely familiar, including service blueprints, experience maps, and concept maps. They differ from these diagrams, however, in that ecosystem maps are optimized to aid in the creation of digital strategies.

A concept model that explains concept models (© Dan Brown, 2010)

Service designers Polaine, Løvlie, and Reason have arguably presented one of the best examples of an ecosystem map, however, without sufficient contextual knowledge it is difficult to understand the relationships their map presents between the “who,” “what,” “when,” “where,” “why,” and “how.”

That’s where digital cartography comes in.

Mapping an ecosystem

Digital cartography is an abductive, sensemaking process that, practically speaking, only requires time and permission to iterate. It boils down to five major activities:

  1. Understanding users and their goals;
  2. Mapping the activities (both known activities and “best guesses” as to the unknown activities) that users conduct in service of their goals;
  3. Mapping the information, services, devices and channels that users employ in service of their activities;
  4. Mapping the moments in which users perform their activities; and
  5. Narrowing down the discrete set of moments (or “experiences”) upon which the design team might focus.

The most useful outcome of digital cartography is not the map itself but the insights that the mapping process generates into the idiosyncrasies of users: their needs, their behaviours, and their perspectives. No map can really encompass the full complexity of an entire ecosystem; an illustration will always be a simplification of reality. However, the creation of simplified visual representations helps us to collaboratively forge paths in our digital world.

Creating a map

Like all user-centered design endeavors, digital cartography begins with research: interviews, observations, questionnaires, analyses of web site statistics, etc. This helps us to determine the goals towards which users are working as well as how users go about accomplishing their goals. Next we draw, or map, everything we know.

Don’t worry about getting everything right immediately. Ecosystem maps are useful both for structuring forthcoming research (finding out what needs to be examined) as well as for communicating the insights of the research that’s already been performed. Use a dry-erase board or a pencil and a piece of paper. It can also be useful to put the people and devices involved in a process, called actors, on individual post-it notes in order to move them around. This helps us to spatially reflect where actors fall in the process (left-to-right, top-to-bottom) as well as the relationships between them.

After spatially arranging the actors, have the team illustrate any/all of the activities undertaken by users as well as the information, services, devices, and channels they use for doing these activities. Next, cycle through the questions comprising ecosystem thinking: When do users perform activities? How do people send out invitations for, say, a birthday party? Who sends the invitations? How do they know who will come to the party?

It is easy to be overwhelmed with unknowns, especially in the beginning. Uncertainties (such as the order of certain events or the kind of channel that’s used for performing a specific activity), should be drawn as a “best guess” and marked with a questionmark for further investigation. Later, this information helps us to make a plan for how we can find out more about our ecosystem. For example, perhaps we could return to our research by conducting interviews with parents about how they usually invite children to their kid’s birthday party.

The final step is to determine the activities that our team will support through design. Not everything that is part of an ecosystem should be integrated into a digital product or service; it’s all about making strategic, informed choices. This helps us to distinguish “what is necessary” from what is “nice to have.” Moreover, it helps us determine which features might give our experience a competitive edge.

An example

Let’s continue using the example of an event-organizing application in order to illustrate how an actual act of digital cartography might unfold.

When organizing an event, people usually begin by discussing how, when, and where the event should take place. One person might take on the responsibility of securing the event space and sending out invites. Invitees might then contact the organizer to RSVP. Next, the organizer might wish to delegate tasks to the people who are attending (such as bringing stuff, preparing food and so on.) After the event, attendees might opt to send thank-you notes or share pictures from the event.

The ecosystem map, shown below, does not include all the activities that take place around an event, but it does include the more salient ones.

An ecosystem map for an event-planning application. I chose a circular presentation to indicate how the success of the app relied on repeated use.

The map also shows how activities are performed through the use of icons: invitations, questions and responses can be submitted through regular mail, e-mail, text message, in person, over the phone, or through Facebook. Timeframes for the various activities appear as green, dotted lines. In this case, I chose to use large timeframes as the timing varies a great deal across different types of events (planning a wedding might take six months, whereas planning a night out at the movies might take hours).

The inner circle of the map shows the activities that the app currently supports; the other circle shows what’s on our minds. Deciding what to do during an event and sharing photos are but two examples of countless activities that users might perform during the course of organizing an event. This division—what users do vs. what we support—is an excellent jumping off point as we formulate our digital strategy.

The map is not the territory

I have found the use of ecosystem maps to be very valuable when working with clients. I encourage readers to draw their own maps and share their experience of applying ecosystem thinking in their design projects.

Understanding ecosystems adds a whole new dimension to designing consistent user experiences across different types of media. So far I have explained what an ecosystem is and how we can draw ecosystem maps. Yet, it is not really about the map, but where it might take us. In the next (final) part of this series, we’ll see how to use ecosystem maps as tools, informing the creation of digital strategies.


The post Designing Digital Strategies, Part 1: Cartography appeared first on UX Booth.

December 10 2013

14:30

Notification Design Strategies

If your inbox is anything like mine, it’s littered with unwanted notifications from companies begging for attention. Gmail has done a great job of making it easy to separate important messages from automated notifications; however some organizations refuse to make it easy to control the emails we receive. What can notification designers do to make things right?

Interacting with most websites is simple: we sign up, we sign in, and, occasionally, we give websites a bit of our time and attention. Maybe we share a preference or two. In return, those sites provide us with not only useful information (in the short term), but also notifications and other recurring updates (in the long term). This functionality is nothing new. It’s often convenient.

Until it isn’t, that is.

What can designers do to make things better? In this article, we’ll review some examples of websites that allow users to control both the type and the frequency of the notifications users receive (to their user’s benefit as well as their detriment). Along the way, we’ll discuss alternative ways that our companies might provide value to their audience.

Quality over quantity

If you love it, set it free. If if returns, it was meant to be.

Anonymous

It’s a big, scary world out there for product managers. Allowing users to control the quantity of email notifications that they receive requires product managers to first trust that their users will return. Users will only do that, of course, if our products or services provide long-term value rather than merely grabbing (and squandering) attention.

Luckily, there are plenty of ways that the design of our notification can do just that. I recommend giving attention to the following five things:

  1. Say what you mean
  2. Give users a choice
  3. Relegate (some) interactions in the email itself
  4. Remind users of additional actions, especially time—sensitive ones
  5. Provide a digest

1. Say what you mean

The CAN-SPAM law specifically forbids sending an email to someone who has previously unsubscribed. In response, some website owners have deliberately obfuscated the unsubscribe process, often requiring users to sign in to receive fewer emails: e.g. “Don’t want to receive email notifications? Adjust your message settings.”

Consider Yipit. The company made a good first impression when it launched. As an aggregator of the bargains appearing on “daily deal” sites such as Groupon, LivingSocial, etc., YipIt promised to provide in an at-a-glance summary of deals.

When I signed up, however, I had login issues that their support team was unable to resolve. This would have been bad enough on its own. The kicker came when I discovered that—even though I couldn’t log in—I continued to receive email announcements! When I clicked on the “unsubscribe” option at the bottom of an email, it took me to a login page, not an “unsubscribe” page.

The bottom of the Yipit email, offering an opportunity for me to “unsubscribe.”

How frustrating. As a result, YipIt provided me a poor, inconsistent, confusing interaction. Unsubscribe buttons should never yield a dead end.

2. Give users a choice

When President Barack Obama ran for re-election, his campaign team specifically targeted emails based on “big data” about American voters. This meant that, at the peak of the election season, his team sometimes sent out as many as four or five emails a day. That’s quite a lot of email!

Rather than risk losing the support of subscribers who may have perceived the campaign’s increase in frequency as an increase in spam, the campaign team simply made better use of the page upon which users landed when they clicked the unsubscribe button. There, the team provided recipients with a way to adjust the frequency with which they received emails. Smart.

Next consider ThinkGeek, a website for nerdy gifts. Designers at the company recognized the simple—yet—nonetheless—profound fact that people likely get a lot of email during the holidays. So last year they provided an option for subscribers to pause their email notifications (or “temporarily unsubscribe”) until the holiday season passes:

In addition to providing users with a choice—always a welcome addition—both the Obama campaign and ThinkGeek designed smart ways for their less voracious users to stay on top of thingswithout feeling overwhelmed.

3. Relegate (some) interactions in the email itself

Zendesk, a web—based customer support system, provides both customer support representatives (CSRs) and users alike with a special kind of email. Rather than require that they make a roundtrip to a website to continue their conversation, Zendesk emails allow CSRs and users to simply reply to their email “above this line.” This effectively makes what would be a unique interaction (between a CSR, a user, and Zendesk.com) into something as easy as replying to an email.

Pragmatically speaking, this doesn’t save users more than a few seconds. But it’s the thought that counts. Both CSRs and users don’t need to recall their login information in order to get things done.

4. Remind users of additional actions, especially time—sensitive ones

Time—sensitive notifications are more likely to be seen as helpful, rather than annoying.
Instacart aims to be the “Amazon Prime of grocery delivery.” Instead of having one, big warehouse of groceries (like some failed dot—com era startups), Instacart trains a fleet of personal shoppers to go to local stores and deliver groceries.

Immediately after the company delivers a user’s groceries, Instacart sends an email notification to that customer informing him or her that their order is complete. This is more just a notification, though, as the email also provides users with several actions they might take in response: users can rate their order, leave a tip, report a problem, and refer a friend. If the user is satisfied with the order and doesn’t want to do anything else, he or she will still receive value from the final confirmation.

What a user sees right after the grocery delivery is complete: logical next steps.

For more information on keeping a list of subscribers happy, see Mailchimp’s Best Practices for Lists page. In particular, the company suggests segmenting subscribers by groups. This allows companies to send more—targeted emails which, in turn, lowers the likelihood that their users will feel overwhelmed. Additionally, Mailchimp recommends sending “relevant content” because if your email isn’t interesting to the user, the user might report your email as spam — and that’s not good for business.

RelayRides is a peer—to—peer car sharing platform that allows you to borrow your neighbor’s car. RelayRides sends lots of updates (many of which I do not mind) at logical times and related to my actions on the site. When I reserve a car, the quality of my job or vacation may depend on that car reservation, so I am very happy to receive an email and a text message updating me about my reservation.

Finally, don’t confuse time—sensitive interactions with promotions, which may be time—sensitive with regards to the company but not necessarily time—sensitive with regards to the user. In contrast to the relatively frequent text messages I receive when I rent a car from RelayRides, RelayRides does send me promotional emails. The difference is that they send the promotional emails infrequently.

5. Provide a digest

Finally, never forget the value of something as simple as a summary.

Content—rich sites such as Learnist, a place where experts curate content to help beginners learn, should provide users with an option to stay informed even if they don’t have the time to browse everything the site contains. With regards to Learnist, I found that the site interesting but overwhelming. It simply required too much of my time to find specific information. If I were able to pick a few topics of interest, however, and receive digests, my Learnist emails wouldn’t find their way to trash, as they usually do.

Content—heavy websites might consider two email options: one where users can see either a series of thumbnails with lots of content (as Learnist currently does), or another that provides users with an in—depth, blog—like summary of a particular topic. Whereas the former requires a bit more time to fully explore, the latter is much easier to browse “on the go.” This is especially important with regards to mobile access where connectivity can be an issue .

A great example of digests comes from the Nieman Journalism Lab. Longer in word count but more dense in the amount of information they contain, Nieman’s digests are filled with attractive images and short, informative sentences.

A more natural notification experience

Allowing users to control the frequency of email notifications about a product will improve the overall user experience. Whether we provide different options for notification content, through a different channel, offer different content entirely, or shift some attention to offline outreach, users appreciate the freedom from spam. Lastly, we must always consider the bigger picture. Thinking about what challenges users face, and what the platform solves, will guide all the decisions we make. Then our communications can truly be about quality, and not quantity.


The post Notification Design Strategies appeared first on UX Booth.

April 24 2012

13:30

Breaking Out of the UX Status Quo

As a UX Designer you’ve committed your career to helping people. You challenge the status quo everyday…but are you challenging it enough? How about with your deliverables? Your customers are people, too! Are your common deliverables – personas, sitemaps, user-flows and wireframes – really usable or are they just getting in the way?

It’s no secret to us: user experience designers speak their own language. From personas to user journeys, card sorts to wireframes, there’s a certain vernacular to our profession. It’s something that we learn over the years but that our clientele must overcome immediately.

Frustrated with the conventional deliverables used to communicate our work, I began to reconsider their presentation. What resulted is certainly not “conventional,” but – taken together – they are arguably more usable.

Personas are like resumés

Personas come in all shapes and sizes. Contrary to what they’re designed to do, however, rarely do they convey a good sense of the user. Most look like resumés: sterile and lacking in personality.

When was the last time you hired someone based on their resumé alone? Even with a resumé you still need to conduct an interview in order effectively gauge a prospect. Seeing someone and listening to their words reveals their personality – the key element missing from most personas.

So I started a searching for a better way. The first thing I did was move my deliverables online. This allowed me to link them together so that clients could click between them. For desktop projects I use Axure and for mobile and tablet I use Proto.io. Both of them are great tools as they create clickable, HTML-based output.

Next, I searched high and low for inspiration. This persona, created by User Insight, is definitely different. Therein, the user (Tina) does not consist of mere bullet points; she comes off as a real person. Jason Travis’s personas are infinitely more visual. Being picture-based, though, they lack any descriptive text whatsoever.

Inspired by these (plus adding my ideas and style) I tried to put together a new version of the traditional persona.

Barnabas's persona

You can view a demo here.

This approach paints a much more holistic picture of a person. Not only does it include their goals, it includes important, ancillary information such as their worldview, what they are looking for and their motivation. Further, the overheard conversation adds just the right amount of insight into his/her life. The “questions” section helps identify the areas the target user is unsure of and the “life pieces” section makes the persona human-like with feelings and desires.

Sitemaps are like spiderwebs

Sitemaps are (as most of you know) used to “map” the major components of a website to a rather sparse-looking diagram. Because they’re so sparse, they also tend leave a lot to the imagination. This gives rise to common retort: “What’s this page do, again?” “Can you change this page to that?” “How about we scrap that page”

You know the routine. Because clients come to us for the visual thinking they often can’t turn these sparse diagrams into anything “useful” on their own.

This got me thinking: why not just put the thinking alongside the map?

Barnabas's persona

You can view a demo here.

Even though it’s just a small difference, this approach pays off. It helps our clients understand the internal monologue that drives the narrative. Knowing the reasoning behind your decisions helps others understand (and agree) with your perspective.

User journeys are like electric panel diagrams

User journeys map the steps of a user, correlating goals (explained in Personas) with a site map to better illustrate how users will get things done. As a result, designers can make informed suggestions to the site’s information architecture.

The problem is that most user-flows are very dry. It is difficult to feel empathy with a user and their journey if all you see are boxes and arrows (similar to electric panel diagrams).

After scouring the internet looking for something better I found a couple of good approaches.

Jakub Linowski's user flow

Jakub Linowski’s Grand Narratives & Play Points diagram offers a compelling yet easy-to–understand presentation based on wireframes.

A user journey from the Bluepoint+ deliverable framework

Blueprint+ (Service Design Visual) is great because it includes the persona and a timeline.

Carlos Abler's user journey

Carlos Abler’s Multiuser WireFlows combines the two former ideas.

All of these are good but they all seemed to be missing something.

I’ve been always fan of recycling, so I thought there has to be a way to re-use the sitemap and display the user-flow on it. I also wanted to re-use my personas in order to create empathy for the user’s journey. This led me to the following presentation:

Barnabas Nagy's user flow

You can also view a demo here.

As you can see, I simply re-used my sitemap and added one of my persona with speech bubbles. In the speech bubbles I added the thoughts of the persona at every stage of their journey. This adds a human touch. The thoughts of the persona can explain to clients the reasons for the journey taken and the scenario puts these thoughts into context. It is simple but visually understandable way to show your user-flow.

Clients that already understand your sitemaps and personas will have no trouble seeing the two work together.

Prototypes/wireframes are like abandoned houses

Wireframes created in the absence of personas are broken. Yet we do this all the time. Why do we create personas if we don’t use them?

Looking for a better way, I saw a picture in the essay of Rósa Gudjónsdóttir:

A man working next to two cardboard cutouts of personas.

I was fascinated by the idea of having my personas around me. I started to print my personas and stick them to the wall in front of me. It helped, however, the screen and the wall are two different worlds, analog and digital. No good.

I eventually placed my personas in the margin of my prototype to serve as a constant reminder of who my users are:

A wireframe juxtaposed with persona avatars.

You can also view a demo here.

Not only does this help us to not design for ourselves, our clients and stakeholders are now constantly reminded who will use our design. The time and effort we put into establishing our personas is never lost.

Never stop learning

As I mentioned earlier, these ideas have helped me better convey my work to my clientele. They are not perfect, of course, nor were they intended to be. I am certain that it is possible to tweak them or in fact come up with even better presentations that work for you.

Are you also frustrated with common UX processes or deliverables? Don’t let the status quo get you. Always try to make things better, iterate and optimize. Surprise your users – err, clients – with something new and innovative as this is the way forward. If you’ve tried your hand at something different, be sure to share your result in the comments below!


January 17 2010

16:56
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl