Archive | December, 2012

Mistakes: Lack of Defined Scope (Part II)

30 Dec

Still working on the report problem, but it’s starting to take on a finishable shape.  As nerve-wracking as deadlines are by definition, the good thing about setting one is the way they force your mind to focus on essentials.  This project will get done, and then I’ll be moving on to another thing or two.

The big thing I’ve discovered (which, again, shouldn’t be a surprise) is the extent to which both the usefulness and the pleasure of a project like this is curtailed when your clients are not as attached to the project’s success as you are.  In this case, it was an obvious hazard because I volunteered the project for my own experience and for free.  Usually when I’ve worked for free the client is either 1.) psyched and extremely cooperative (yea!), or 2.) apathetic, which means more work but not a real problem.  But I did not realize that in this case, the client’s decisions have created a real obstacle to completion because there are major sources of data I had to discount because halfway through the project I was not allowed access to them.  The final report is probably going to be of some use to the client: it provides more information than they had at the beginning.  But, really, being able to say “This is what 60% of your clientele is doing” doesn’t tell you  anything that’s worth building a strategy on.  My inner statistician is not happy.

So, my evolving solution to this dilemma is focus on 1.) what will be useful to the client, and 2.) what will be useful to my portfolio.  In that order, because the report is “due” before the portfolio.  To the client, the most useful parts of the report are:

  1. A list of viewers with as much contact information as I could find, and suggestions for ways to supplement that list, and
  2. A set of alternative layouts for the website.

My own portfolio needs wireframes, site maps, and task flows: those which are finished in time for the report will be going in there, too.

Next time, I’ll have to say at the beginning, “These are the kinds of information I’m going to need in order to successfully complete this report.  I understand that you might have concerns about sharing your database with a contractor, and it is perfectly fine if you would prefer to copy and send that information or to create a temporary passcode so you can track my activity.  But without that information, I’m afraid it’s not possible to provide the analysis you’re looking for.”  Etc.

Mistakes: Lack of Defined Scope (Part I)

21 Dec

Yes, that was more than a couple of days: the nastiest cold short of flu season knocked me out for about a week. If any freelance UX folk have suggestions on how to incorporate the unexpected into project timelines, please let me know in the comments.


Today I’m going to talk about the first of what I’m sure will be many errors that come with becoming a UX professional. In interviews, you’re taught to spin these as “learning experiences”, as if we’re all too delicate to admit to screwing up. (Gen X/Y, “everyone gets a trophy”, anyone?)  It’s actually kind of glorious to write and print in public “Yes, I messed up royally”.

The mistake I’m talking about today is a failure to establish a finite scope at the start of the project. One of my weaknesses, in any type of project, is the tendency to want to be comprehensive. I LOVE research, and (B)ig (I)deas, and it’s hard at times to accept that the assignment in question is not as weighty and meaningful, and that given the context, a small project can be as valuable as a big one. But then, of course, you get to the point where a deadline is looming and there’s not enough on paper. It’s a particular problem when the project has a really long timeline. This is not unpredictable, and it’s a common type of error for me, but like a cold, exposure to one error seems to have no effect on my resistance to its cousin :).

As I mentioned, this is a known problem, and over time I’ve learned to offset it by 1.) setting a series of hard stops for research, first draft, second draft, and citations, 2.) questioning the client or professor extensively to understand exactly what the project requires and then working from that outline, or 3.) picking a topic that’s so boring that I want to complete it as efficiently as possible. But as a not-for-profit job that I volunteered to do with no set deliverables and minimal requirements, the “Small Packages” project fell right into the gaps between those strategies.

With three to four weeks left on the project, I’m actually in pretty good shape in terms of submit-level material, in the form of wireframes, site maps, and user statistics. But the two pieces of the project that I expected to flow nicely into one another (the demographics and the website layout) are becoming more disparate.  Essentially, they’re dealing with two different user bases.

The demographics, collected from social media and YouTube statistics, are both shallower and more complicated than I ever expected. An earlier post spoke about the likely fans of this type of show, and to some extent the stats bear that out. But the redundancy of fans under multiple avatars means there aren’t enough data points to draw strong conclusions. Moreover, the relationship between those statistics and the behavior of those users cannot be extrapolated without surveys and testing, antithetical to the relationship this company wants with its fans. Oy.

The website layout has been easier to grapple with. The site has remained mostly static since I began work. However, without fitting into one of the rough demographic groups that make up the site’s main users (personas would require more access to data than this project has scope for), records of my own interactions with the site are not adequate indications of how the typical user experiences it. I do see a lot of simple opportunities to enhance the site’s playfulness, in a way that would be fun and appropriate to the company’s “brand values”. But I realized that would involve bringing in a different viewership, the kind that would be interested but not automatically gravitate to this show without being beckoned, and I get the sense that’s not where the company wants to go right now.

I have visions from “Project Runway” when the bodice and the skirt are both beautiful but they do not go together, and the designer (usually) has to ditch one half to preserve the whole.  Perhaps tomorrow I’ll have figured out how to combine the two.


Ada Lovelace’s 197th Birthday!

10 Dec

Ada Lovelace's 197th Birthday!

Quick shout-out to Ada Lovelace on her 197th birthday! (Hey, time is relative – people still ask if the actress Anne Hathaway is Shakespeare’s wife. *facepalm*) Arguably the first computer scientist.


9 Dec

Going on hiatus for a few days to prepare for an unexpected interview.  Thanks!

QuickNote: Dealing with Demographics

8 Dec

Today I got my first good look at YouTube Analytics for the webseries.  There’s all sorts of fun statistics to work through (NERD!), but I’m trying to focus specifically on the aspects that are the most useful to the client: who is watching, and how they’re watching.  (Monetization falls outside the scope of this project.)

The issue I’m puzzling out today is how to deal graphically with some unexpected demographics.  Before starting the project, I expected that a parody show about superheroes that runs on YouTube would primarily attract males, age 25-45ish (Gen X and Y).  Mom and Pop are also entrenched in geek culture (“nerd famous”?), so they seemed likely to see some crossover from fans of comics, graphic novels, manga and video games.  Kind of the “Wreck-It Ralph” crowd.

The gender demographics aren’t too surprising: 65% male viewers to 35% female viewers.  (Need to figure out whether that’s lifetime or per video, and what percentage of those are unique vs. repeats.)  But within those gender constraints, the age graphs look radically different.  I.e., the male graph follows a bell curve, peaking around 35-44, while the female viewership peaks at 18-24 and then drops off a cliff (f(x) = 1/x where x>0).  The difference is pretty stark.  However, if you average the values by age group, weighing them proportionate to the total percentage of the population, the curve becomes bell-like again.

There isn’t time on this project to create formal user personae or conduct tests.  But with such a stark difference in viewing populations, I need to figure out a meaningful way to describe those behaviors.  The clients might want to factor them in if they decide to include advertising, for example.

Metadating: “Judith”

7 Dec

So I watch the Geek and Sundry channel on YouTube and have gotten really interested in “Metadating”, the show in which three video game designers play through and analyze video games on romance.  The fourth episode included a game called “Judith” that was a rough take-off on the Bluebeard fairy tale.  One of the designers (fellow liberal arts grad) took a stab at analyzing the themes, and then suggested someone else could write an article on it.  So I obliged.  Sort of :).

Jones, Joia and B. Graner. The Heuristics of Exploration in “Judith”. 26 November 2012.

As the game designer of this duo, it shall be left to my colleague Mr. Graner to analyze the gameplay design of “Judith”. But as the literary authority, I can say with absolute clarity that “Judith” wasnarratively flawed. As this article will explore, the retelling of a well-known myth (“Bluebeard”) fell apart along the line where story met interactive gaming, i.e. the practice of exploration. However, this “failure” neatly illuminates the need for specific “good practices” in the context of narrative gaming standards.

Seriously, “Judith” had major problems. It took a lot of tokens from the Bluebeard myth (the key, the bloody knife, progression of doors) and applied them haphazardly, which broke up the story. The logic was faulty: ‘In order to truly love my husband, I need to know about every single person he’s murdered”? Yeah, no. In “Bluebeard”, there’s no slow reveal of increasingly graphic atrocities because that doesn’t work when you identify with Bluebeard’s wife. You find a hidden room in your husband’s castle filled with “bloody hay”, you run, end of story. The “I love him so I have to know” actually seemed like a save: maybe the game designer realized that the character of Judith needed a better motive than curiosity to stick around and explore, but the salvage was really clunky.  Games require items to manipulate, puzzles to solve, and monsters to fight, but “Bluebeard” is not a story that neatly accommodates those elements.

The relationship between the two plotlines was weak, but I actually thought that illuminated an second interesting difference between the narrative demands of a story vs. a game. My best guess is that the Jeff-Emily story was supposed to be a framing device, with Jeff standing in for the reader. A parallel example would “Wuthering Heights” is the story of Heathcliff and Cathy, but it’s being told to Mr. Lockwood, i.e. you. As “Wuthering Heights” progresses, your consciousness of Mr. Lockwood as a character melts away because you don’t see him – you see with his eyes. But as Day(9) pointed out, he identified the most with Jeff, because that’s the character he led off with playing. Because the player feels like Jeff, not Judith, Jeff has to have an ending: he “finds” Emily (who disappeared for the entire game because their story wasn’t the important part). Again, the fact that it’s a game rather than a story required the designer to close a loop that results in a “meh” ending.

In conclusion, it was suggested that you could read “Judith” along the lines of two interpretations 1.) the mythological character locked into flow of the story, or 2.) a feminist allegory of patriarchal control. Third option: the myth of Pandora’s box – curiosity gets punished. Exploration is the essence of gaming, and “Bluebeard” is a story that punishes exploration.  Which makes “Judith”, as a gamification of the “Bluebeard” story, antithetical to the medium it inhabits.

</pretension> 🙂

(SP) Initial Site Map

6 Dec

The initial site map for the central parts of the site.

Shows the organization of the front page's body, plus the global header and footer.

Shows the organization of the front page’s body, plus the global header and footer.

If a wireframe resembles a blueprint of a building, the site map works similarly to the organizational chart for a business.  Both give you insight into the “bones” of the website, but with different emphases.  By shrinking each page to an equally-weighted symbol, we can see how much content is actually available through a page, and whether the grouping of that information makes logical sense.  Each page gets a unique identifier, so it’s easier to see where access points to the same page recur.

This site flow follows the symbolism laid out in A Project Guide to UX Design (2012; 2nd edition).  A page is represented by a box; a link that leads to multiple pages on one page from a single template (like a blog) is represented by a “stack” of boxes.  A link that leads to an external page (ex. the production site’s e-mail address opens the user’s own Outlook account) has a curly edge.  For multiple pages of a type that that have different templates (ex. a season’s worth of episodes), the labeling gives each single page a sub-label system.

(SP) Initial Wireframe

5 Dec

Wireframe of the front page for “Small Packages” at the beginning of the project:

The front page, at the start of the project.

The front page, pre-UX.

At first impression, this is a visually-appealing front page.  (Obviously, it looks even better with all the graphics and non-clickable text that make up the interface.)  It has a clean and symmetrical design, it avoids gimmicky Flash and animated GIFs, the header and footer include the correct information, and the central image block draws your attention to the site’s body.  But even just looking at the wireframe, a few areas of potential improvement pop up immediately:

  1. There’s a mismatch between the webseries the site is designed to advertise and the emphasis that content is given on the page.  (ex. In the header, the buttons for “Season 1” and “Season 2” are the same size as the buttons for everything else.  The main image block in the body emphasizes the “Latest Episode” with a HUGE image.  But then it undermines that emphasis by creating equally huge images for “Latest News” and “Latest About Series”.)
  2. Half of the site falls below the fold.  That’s prime real estate, under-used.
  3. Buttons leading to the same content appear in multiple places.  In and of itself, not a bad thing.  But in this case, it feels like the intent is to make the front page look fuller than it actually is.  Meanwhile, each season full of episodes is squished into a small drop-down menu at the top of the page.

Preliminary diagnosis: A more streamlined organization of the elements will get  more content into the area above that fold, while replacing some of the images will put the visual emphasis squarely on the webseries videos.

(SP) Defining the Client in a Mom-and-Pop Shop

4 Dec

One of the benefits of blogging about a project as it happens is that it enables you to talk out the major problems that will end up having a minor place (or none at all) in the final report.  In this case, I need to answer an incredibly stupid-sounding question in order to obviate a cascade of smaller problems later in the rest of the project.  The question is, “Who is the client?”

[Silence as “Is this a trick question?” begins to sink in.]

No, this is not a trick question.

I am given to understand, by real UX designers, that establishing the client as an entity is something that’s done… by the client.  (It’s also, if you’re smart, something you do BEFORE you sign up for the project.)  Good to know.  But when you’ve volunteered to work gratis, essentially unsupervised, it’s the sort of question you have to puzzle out yourself.

“Small Packages” is the main output of Ninja Camel Productions. Like an increasing number of actors, “Mom” and “Pop” incorporated Ninja Camel years ago so that the pair of them would have the option to write and produce their own content between paid gigs.  The company has produced a couple of small projects, but “Small Packages” is the first major initiative to take off (go Camels!).

As a tiny store, Mom and Pop are not only the main actors and writers of the series, but they’re the producers, business and marketing department, and doing all the major behind-the-scenes part of running a company, with the help of some friends and volunteers.  To the best I can tell, there is no one “running the shop” on a day-to-day basis.  When the series is in production, the production company becomes the series because that’s where the owners is completely involved.

You can see the conundrum, can’t you?  There’s no division between the show, the production company, and the owners as entities.  As the legally-inclined know, no matter how similar their interests, every entity in a court case needs a different advocate to represent them.  In this case, what’s best for the series or the production company is not necessarily what’s best for Mom and Pop.  It’s a Russian doll or a collapsible cup scenario.

Collapsible Cup

No, it’s not an onion.

To complicate things further, “Small Packages” was created by Ninja Camel, which was essentially designed to enhance the acting careers of Mom and Pop.  How do you differentiate between the different entities when they’re all represented by the same people?

Given the time and human resources available for this project, I decided to focus on the widest ring of that cup, the webseries itself.  But if this project leads to future work for the client, doing that preliminary groundwork will put me in a better position to discuss overall content strategy.

QuickNote: Wireframing Tools

3 Dec

Question for experienced UX designers: what was your first wireframing tool, and how did you conclude that it was the right place to start?

So far, I’m using pen-and-paper and whiteboards. They work great!  But the production values are less than stellar.  And whiteboards don’t scan too well.

An informal survey of job posting for UX designers reveals the Big Three: Microsoft Visio, Axure, and OmniGraffle.  I like the reviews for OmniGraffle, but it’s Mac-only, and my newbie budget cannot support the Mac transition right now.

There are numerous excellent-looking cheaper systems like HotGloo (in September, rated it the WireFraming Champeen of the web-tool class) and Balsamiq.  But at this point in my career, for credibility’s sake, I feel like I’ve got to start by mastering one of the Big Three.